Setting up a React Environment for ASP.NET MVC
Sung Kim Oct 13 Originally published at slightedgecoder.com on Oct 13, 2018
I had a chance to update a legacy ASP.NET MVC website using AngularJS (yes, the first version) to use Webpack & Babel 7 (which used to import AngularJS files using script tags).
Previous post Setting up an ES6 Environment for ASP.NET MVC 5 was a bit outdated as it was using older version of babel and webpack, so I decided write more concise post to get started with the newest libraries.
As I have moved onto React, I will show you how to set up React environment for ASP.NET MVC 5.
I will assume that you are familiar with NPM & Webpack,
so I won’t go into too much details on what each option in NPM & Webpack.
👣 Setup Steps
- Create an ASP.NET MVC web site
- Create & configure NPM configuration file (package.json)
- Create & configure Babel configuration file (.babelrc)
- Create & configure Webpack configuration file (webpack.config.js)
- Install NPM packages
- Install Visual Studio Extensions (NPM Task Runner)
1. Create an ASP.NET MVC web site
Create a new ASP.NET MVC project (choose a choice of your .NET framework).
And select a template.
2. Create & configure NPM configuration file (package.json)
Add a new item in the project root.
Create NPM configuration file,
And add a script section. And
package.json would initially look like the following.
3. Create & configure Babel configuration file (.babelrc)
Add a new file named
.babelrc in the same directory as
package.json file created in the previous step.
And add following babel options.
- @babel/preset-react – adds support for React syntax
4. Create & configure Webpack configuration file (webpack.config.js)
Create a file named
webpack.config.js in the project root (same location as
.babelrc) & configure it as shown below.
Webpack outputs a bundle as
./Scripts/dist/Home/react/index.js so let’s add the script in
View\Home\Index.cshtml razor file.
5. Install NPM packages
- babel-loader – Webpack loader for babel
- browser-sync & browser-sync-webpack-plugin – sync’ing browser upon code change
- webpack & webpack-cli – for running Webpack
- webpack-notifier – Shows pretty webpack notification
- react& react-dom – React library
6. Install Visual Studio Extensions (NPM Task Runner)
This is an optional step but to make our lives easier, let’s install a Visual Studio extension, NPM Task Runner for running NPM scripts from Visual Studio.
⚛ Let’s write some React code
Let’s add an entry point for React in
Views\Home\Index.cshtml file by deleting everything except
ViewBag.Title section and add
Now we have an entry point, let’s write a simple React file
🏃 Transpiling and Running
You could run the
dev script within
package.json file but let’s use the NPM task runner to make the life easier.
Open the “Task Runner Explorer” by right clicking on
package.json file in the project root.
dev script (double click), which monitors the changes in
To enable browser-sync, you need copy a script generated by browser-sync message in
Shared folder near end of
And lastly, let’s run ASP.NET from Visual Studio to see the result.
♻ Reloading Browser Automatically
browser-sync* packages so as you change your code, the browser will reload automatically upon saving.
👋 Parting Words
In this post I’ve assumed that you know the basics of NPM & Webpack so skipped much of details so that you can easily get up and running.
Please refer to documentations linked in-line in the post if you want to understand how each step works and to troubleshoot should you run into an issue.
Source code is available on GitHub.