Skip to main content

Using webpack-dev-server

Intermediate
Tutorial

Overview​

Starting with dfx 0.7.7, the SDK now provides you with webpack-dev-server in the dfx new starter.

The webpack development server, webpack-dev-server, provides in-memory access to the webpack assets, enabling you to make changes and see them reflected in the browser right away using live reloading.

Step 1: Create a new project and change to your project directory.​

Step 2: Start the replica locally, if necessary, with the dfx start --clean --background command.​

Then, deploy your dapp as you normally would, for example, by running the dfx deploy command.

Step 3: Start the webpack development server by running the following command:​

   npm start

Step 4: Open a web browser and navigate to the asset canister for your application using port 8080.​

For example:

   http://localhost:8080

Step 5: Open a new terminal window or tab and navigate to your project directory.​

Step 6: Open the src/hello_frontend/src/index.js file for your project in a text editor and make changes to the content.​

For example, you might add an element to the page using JavaScript:

document.body.onload = addElement;

function addElement () {
 // create a new div element
 const newDiv = document.createElement("div");

 // and give it some content
 const newContent = document.createTextNode("Test live page reloading!");

 // add the text node to the newly created div
 newDiv.appendChild(newContent);

 // add the newly created element and its content into the DOM
 const currentDiv = document.getElementById("div1");
 document.body.insertBefore(newDiv, currentDiv);
}

Step 7: Save your changes to the index.js file but leave the editor open to continue making changes.​

Step 8: Refresh the browser or wait for it to refresh on its own to see your change.​

When you are done working on the frontend for your project, you can stop the webpack development server by pressing Control-C.