ASP.NET Core + Webpack + React
In this post, our .NET Developer Eugene Sukhomlyn explains how to start developing your project using the abovementioned technologies. Contains lots of code and instructions.
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 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 code for the controller
After this create Views folder, with subfolder Home and Index.cshtml in it. Here is 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 all is great.
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 is looking 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 this
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.
ES6 and Babel stuffYour header title
Let’s add some ES6 features to our web applicate. Update the message.js file to use literals.
After this, run command: npm run build, to re-run webpack and re-generate bundle. But for 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-like this and rebuild the app
Now all are working great.
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 to this
Finally, update your app.js
Adding React to our project
First, let’s install the React
Then install Babel preset
Now we can update our message component with React stuff like this
After this, we need to update our app.js file with this code. So the React component can be rendered to DOM
Now Debug app and you will see, that all are working great
You can find all source code at this repo.
Hope you’ll find this guide helpful. Best of luck in your future projects!