ASP.NET Core + Webpack + React

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.

Prerequisites

Stuff that you need to start development:

— .Net Core SDK
‍— ‍Visual Studio Code
‍— C# for VS Code
‍— NodeJS for npm packages

For creating ASP.net core you need to install all this stuff first.

To create a new project, open terminal or console and type:

‍CODE: https://gist.github.com/VladMogwai/0d4bdcfb5b21125d3bef15c4f19f7723.js

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:

‍CODE: https://gist.github.com/VladMogwai/9fd62bc21a079519739ce8686860ed40.js

This will launch your app and you will have this at terminal:

‍CODE: https://gist.github.com/VladMogwai/4c6669fad37010d1c57f1ee8957d627b.js

Adding MVC stuff to use it for some basic View

‍

CODE: https://gist.github.com/VladMogwai/c0c95090e022c21979b87247902ece19.js

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:

‍CODE: https://gist.github.com/VladMogwai/ef3694ec3af53debe04800f8b20c4b30.js

After this create Views folder, with subfolder Home and Index.cshtml in it. Here is the code for this file:

‍CODE: https://gist.github.com/VladMogwai/e699212246be4ebbbb24db933ed5e6ea.js

Your project structure should be like this now:

A screenshot of the ASP.NET project structure

Now just restart a website via dotnet run to take a look if everything is OK.

JavaScript: Dependencies and Modules

Next, let's add our first bit of JavaScript, we will keep it super simple at first. In the wwwroot folder create a folder called source.

In this folder create two files: app.js...

‍CODE: https://gist.github.com/VladMogwai/25c4dc062d439fece47e7b98faa0dd1e.js

and message.js:

‍CODE: https://gist.github.com/VladMogwai/70da37dffbab8ee6c704984a4e6ef4ef.js

Now we need to update our View with this code, adding references to our .js files:

‍CODE: https://gist.github.com/VladMogwai/76b7324c2dfae75300a968720cf02463.js

Now your project structure should look like this:

A screenshot of the extended ASP.NET project structure

Try to reload our View in the browser and open Developers Console. You will see this error:

A screenshot of an error in Development Console

This is because message.js is coming after app.js. Just swop the order and all will be ok.

There are many ways to get around this issue of having to ensure that files are added in the correct order. One would be to use JavaScript Modules (ES6 feature).

First, let’s export the message function from the message.js file. Update your message.js file:

‍CODE: https://gist.github.com/VladMogwai/59c15263081424d873bb6db9468ae99f.js

Now import the message function into your app.js file:

‍CODE: https://gist.github.com/VladMogwai/582358107ef670ffc360d2e39e9ca4be.js

And then update your View:

‍CODE: https://gist.github.com/VladMogwai/11035dbe796b77ea606a4f6265dcfd71.js

Installing Webpack and setting it up

In order to support the older browsers that don’t support ES6 Modules, we can use tools such as Webpack that enable (among many other things) bundling of JavaScript files. Webpack can interpret the import and export commands and package our files into one javascript file.

Create the package.json file in the root folder with this code:

‍CODE: https://gist.github.com/VladMogwai/60045f309796d8dc2709f42a046b7db8.js

Open a terminal and install webpack via this command:

‍CODE: https://gist.github.com/VladMogwai/0fea18816f97d3cb2dbdb0ceb03c5d16.js

Now your package.json file looks like the following:

Create the webpack.config.js file in the root folder with this code:

‍CODE: https://gist.github.com/VladMogwai/984133540187332298f106c9f8c05274.js

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.

Now we can run Webpack to bundle our JavaScript files:

‍CODE: https://gist.github.com/VladMogwai/75245cfdeb3312e340b246d4276c5bbd.js

After that, you will see a new file under /wwwroot/dist/ folder. Update your View with this:

‍CODE: https://gist.github.com/VladMogwai/df6c7de92d7866242ee9cc48b2b55d3c.js

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 also requires 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).

The Store

Check for more

Mage Real Estate Template Ui Kit

The Mage Real Estate Website UI Kit is filled with exciting features, such as pre-designed screens that make it easy to create a professional-looking website. Additionally, the components library is filled with everything you need to create a dynamic and functional website that is tailored to your specific needs.

Medific // Elegant Template for Medical Labs and MedTech Startups

Introducing Medific, a Webflow template designed for medical labs and MedTech startups, featuring modern gradients, 3D animations, and a suite of marketing tools.

Economic Insight // Finance Website Template

Economic Insight: A sophisticated Webflow template for subscription-based economic content, offering an elegant design, secure membership access, and comprehensive article navigation.

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.

‍CODE: https://gist.github.com/VladMogwai/63f10edc46e13d072b90e4c556ceb125.js

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:

‍CODE: https://gist.github.com/VladMogwai/c1f5b7024e71795b99245a5eab8c7b2b.js

Update webpack with Babel using the next code and rebuild the app:

‍CODE: https://gist.github.com/VladMogwai/a8747bc50e977c2c30fb594e6864fadb.js

Now everything should work as intended.

HMR aka Hot Module Replacement — auto update stuff, coming from webpack

One thing I’m sure you have noticed is that whenever there is a change to a JavaScript file, you need to re-run webpack and refresh your browser window. To speed up the development time we can use hot modules to automatically do this for us. Currently, the web application has been running in the production mode, we need it to run in the development mode.

Open the launch.json file and edit this row:

‍CODE: https://gist.github.com/VladMogwai/f829c215a670f82bcc7c1f65fd95d7e9.js

Install client-side packages for hot module reloading via this command:

‍CODE: https://gist.github.com/VladMogwai/4613c46b410b86786c4b76101b9d2b1b.js

Now you need to update Startup.cs file:

‍CODE: https://gist.github.com/VladMogwai/f08c9bf65741fa32cc950c1ad0dbe98c.js

And change the webpack config as shown below:

Finally, update your app.js:

‍CODE: https://gist.github.com/VladMogwai/f82058f218765499bcf7746657392120.js

Adding React to our project

First, let’s install React:

‍CODE: https://gist.github.com/VladMogwai/d9979d499dbfcf56120f9f1ca5440829.js

Then install the Babel preset:

‍CODE: https://gist.github.com/VladMogwai/b7fc5e61768fd992253cee0b82eafcd7.js

After this, we need to add the React preset to Babel. It will convert React (JSX) code to raw JavaScript:

‍CODE: https://gist.github.com/VladMogwai/b7c188f5cbb4e0768b47171cdc2addd9.js

Now we can update our message component with React stuff:

‍CODE: https://gist.github.com/VladMogwai/9ca39f00677d1eba780939846aa2c2a1.js

After this, we need to update our app.js file with this code. So the React component can now be rendered to DOM:

‍CODE: https://gist.github.com/VladMogwai/f50b981bf0148b14a8b71da2b2d4f6ad.js

‍‍

Now debug the app and you will see, that everything works:

You can find the used source code at this repo.

We also presented our own way of securing ASP.NET MVC apps: it is described in this blog post.

If you need help with your project, in addition to development-related services EGO Creative innovations offers QA Web plans to help you find out how to improve your product's quality with minimum effort.

Hope you’ll find this guide helpful. Best of luck in your future projects!

‍