Note: This post was updated in November 2020 with information on WebPack 5.
As an outsource web development company, the EGO team often takes on web projects based on ASP.NET Core, webpack, and React. In this post, we share an internal crib been used to set them up.
Stuff that you need to start development:
For creating ASP.net core you need to install all this stuff first.
To create a new project, open terminal or console and type:
To navigate to this folder click File — Open Folder. And then select folder where you project was created.
After you navigate to a folder, open a terminal at the top panel and type:
This will launch your app and you will have this at terminal:
Adding MVC stuff to use it for some basic View
After this, we need to create a controller for our page. In our case it’s Home. On the root folder — create Controllers folder and there create the file — HomeController.cs. Here is the code for the controller:
After this create Views folder, with subfolder Home and Index.cshtml in it. Here is the code for this file:
Your project structure should be like this now:
Now just restart a website via dotnet run to take a look if everything is OK.
In this folder create two files: app.js...
Now we need to update our View with this code, adding references to our .js files:
Now your project structure should look like this:
Try to reload our View in the browser and open Developers Console. You will see this error:
This is because message.js is coming after app.js. Just swop the order and all will be ok.
First, let’s export the message function from the message.js file. Update your message.js file:
Now import the message function into your app.js file:
And then update your View:
Installing Webpack and setting it up
Create the package.json file in the root folder with this code:
Open a terminal and install webpack via this command:
Now your package.json file looks like the following:
Create the webpack.config.js file in the root folder with this code:
As you can see above, we are giving Webpack the entry point, which is our app.js file. As well as telling it where to output the bundled file.
After that, you will see a new file under /wwwroot/dist/ folder. Update your View with this:
instead of the old script row.
UPDATE. In October 2020, webpack 5 was released. It’s an update so major that its creators warn migrating might fail, so you can either join the first one to try it (and send your feedback) or wait until the first major bugs are fixed.
The v4->v5 upgrade procedure alsorequires preparation. That’s because some of the defaults were revised (like the new optimization.innerGraph option enabled by default) and optimizations like caching and improved code generation were introduced. Also, the minimum supported Node.js version for webpack 5 is now 10.13.0 (LTS).
Our website application development company suggests staying with webpack 4 if there’s no specific urge for an update. Or you can hire app developers with relevant experience to take advantage of webpack 5 with minimum risks.
ES6 and Babel stuff
Let’s add some ES6 features to our web application. Update the message.js file to use literals.
Then, run this command: npm run build, to re-run webpack and re-generate bundle. But for the IE browser, for example, we have the problem now. It doesn’t understand literals. So you need to use Babel plugin, here is how to do it with npm:
Update webpack with Babel using the next code and rebuild the app:
Now everything should work as intended.
HMR aka Hot Module Replacement — auto update stuff, coming from webpack
Open the launch.json file and edit this row:
Install client-side packages for hot module reloading via this command:
Now you need to update Startup.cs file:
And change the webpack config as shown below:
Finally, update your app.js:
Adding React to our project
First, let’s install React:
Then install the Babel preset:
Now we can update our message component with React stuff:
After this, we need to update our app.js file with this code. So the React component can now be rendered to DOM:
Now debug the app and you will see, that everything works:
You can find the used source code at this repo.
Hope you’ll find this guide helpful. Best of luck in your future projects!