Sung M. Kim

Posted on Oct 13, 2018 • Originally published at slightedgecoder.com on Oct 13, 2018

Setting up a React Environment for ASP.NET MVC

#react #aspnet #webpack #babel

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.

🧐 Prerequisite

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, package.json.

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-env – enables latest JavaScript syntax
@babel/preset-react – adds support for React syntax
@babel/plugin-proposal-class-properties – adds support for an instance and/or static member declarations in JavaScript classes.

4. Create & configure Webpack configuration file (webpack.config.js)

Create a file named webpack.config.js in the project root (same location as package.json & .babelrc) & configure it as shown below.

Webpack outputs a bundle as ./Scripts/dist/Home/react/bundle.js so let’s add the script in View\Home\Index.cshtml razor file.

5. Install NPM packages

Now let’s install NPM packages to enable latest JavaScript and React syntax.

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

Now we are ready to write a React script using the latest JavaScript syntax (ES6+).

Let’s add an entry point for React in Views\Home\Index.cshtml file by deleting everything except ViewBag.Title section and add <div id="app"></div>.

Now we have an entry point, let’s write a simple React file index.js under Scripts\Home\react directory.

🏃‍ 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.

Start dev script (double click), which monitors the changes in index.js.

Start “dev” script by double clicking on it

To enable browser-sync, you need copy a script generated by browser-sync message in _Layout.cshtml under Shared folder near end of </body> tag.

And lastly, let’s run ASP.NET from Visual Studio to see the result.

♻ Reloading Browser Automatically

You’ve installed 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.

The post Setting up a React Environment for ASP.NET MVC appeared first on Sung's Technical Blog.

Top comments (46)

Daniel Freitas • Oct 4 '19 • Edited

I start dev script in the task runner and it works very good, but only once. When I edit index.js and save it, it doens't recompile the file and I need to run dev again every time. Do you think I'am doing some thing worng?

Daniel Freitas • Oct 5 '19

Justo solved by adding the following lines in the webpack.config.js file:

watchOptions: {
poll: 1000 // Check for changes every second
}

Sung M. Kim • Oct 5 '19

Thanks for the update & the fix, Daniel~

I honestly moved away from using React within ASP.NET MVC, so wasn't aware of how to deal with it :)

Tory Roland • Nov 5 '19

Out of curiosity, have you moved away from using React with .NET MVC for a particular reason or have you just become interested in other things? My team wants to implement a JavaScript technology to build out some parts of our site that might be a pain otherwise and I have been learning React because it seemed like a good fit. I know everything is dependent on the project at hand, but if there are general drawbacks in your opinion I would be interested in hearing. Thanks for this article it was very useful!

Sung M. Kim • Nov 5 '19

Hi Tory, check out the replies below.

have you moved away from using React with .NET MVC for a particular reason or have you just become interested in other things?

Tooling support for classic ASP.NET MVC (I haven't used ASP.NET Core) has been subpar (hot reloading was buggy, requireing manual refresh & new JavaScript syntax was flagged as erroneous, etc).

And also following JamStack, having a separate API server with a pure React front-end helped to separate responsibilities.

I can't seem to find the post(was it a forum?) now, but MS wasn't focusing on making SPA easier to develop few years ago so I moved away.

Tory Roland • Nov 6 '19

Thanks for your perspective on this. Hoping to make the switch to .NET Core sometime soon and it seems like it is better suited, going to the Live 360 conference later this month and will hopefully get more information. Have a good one!

Bill Butler • Oct 7 '19

Hi, I tried out your process using VS2019, step by step and got the following error. Was hoping you might nudge me in the right direction :). [I am a relative newbie with npm]

ERROR in ./Scripts/Home/react/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: d:\Docs\Scratch\ReactTest\Web\Scripts\Home\react\index.js: Unexpected token (5:4)

  3 |
  4 | const App = () => (
> 5 |     <>
    |     ^
  6 |         <h1>React in ASP.NET MVC!</h1>
  7 |         <div>Hello React World</div>
  8 |     </>
    at Parser.raise (d:\Docs\Scratch\ReactTest\Web\node_modules\@babel\parser\lib\index.js:6400:17)
...

Sung M. Kim • Oct 7 '19 • Edited

Hi Bill.

I am sorry it's because the code snippet is out of sync from the instruction. You might want to use React.Fragment instead of <>...</> because it's a syntatic sugar (you'd need to set up plugin-transform-react-jsx for that syntax to work, which is not set up in this article.)

As a workaround, you can use React.Fragment directly as shown below (I've also updated the gist to reflect the change).

import React from 'react';
import { render } from 'react-dom';

const App = () => (
    <React.Fragment>
        <h1>React in ASP.NET MVC!</h1>
        <div>Hello React World</div>
    </React.Fragment>
);

render(<App />, document.getElementById('app'));

Bill Butler • Oct 7 '19

Thanks so much for the quick reply.
That didn't change the outcome. Same error unexpected token.

I did note that the first line in the index.js file

import React from 'react';

was reporting an Intellisense error: "(js) cannot use imports, exports, or module augmentations when '--module' is 'none'"
Could this be a contributing factor.

technicallyty • Sep 17 '20

Article says Webpack outputs a bundle as ./Scripts/dist/Home/react/bundle.js so let’s add the script in View\Home\Index.cshtml razor file.

but then the picture below it shows it being added to _Layout.cshtml. Is this just a typo?

JiaqiZuo • Oct 2 '19

I tried to create about.js for about.cshtml and followed the same steps for index.js and index.cshtml, but it did not work. So I am not thinking if there are additional steps that I need to do? Thanks in advanced!

Sung M. Kim • Oct 2 '19

Hi @jiaqizuo

What's error and do you have code snippets handy?

JiaqiZuo • Oct 3 '19 • Edited

So basically I just did the same things what you taught to about.js and about.cshtml, but it seems there is no thing to show up on the About Page

Jérôme Oudoul • Jun 6 '19

First off, thank you for the great article : it's helping me a lot to configure ReactJS.NET within our ASP.NET MVC 4 website.
In step 4, you wrote :
Webpack outputs a bundle as ./Scripts/dist/Home/react/index.js
when I think you meant :
Webpack outputs a bundle as ./Scripts/dist/Home/react/bundle.js
Cheers!

Sung M. Kim • Jun 6 '19

Thank you, Jérôme 🙏 enjoying the post and spotting the error.

I've updated the post 🙂🤜

guymalka • Mar 3 '19

any idea how to create production verion (without node_modules folder) using the environment you created (mvc project)

Sung M. Kim • Mar 3 '19

When you generate a bundled JavaScript, you do not need to deploy the node_modules folder or add to the source control.

You could just deploy the bundled JavaScript in your production.

Or do you not want to have node_modules folder in the first place? If so you would need to use CDN scripts.

guymalka • Mar 3 '19 • Edited

if i remove the "node_modules" from the environment , the project fall and i get error like Module build failed: Error: ENOENT: no such file or directory, open
'...node_modules\react\index.js'

Sung M. Kim • Mar 3 '19 • Edited

Ah, I see what you mean.

I am sorry I made a mistake in the post so updated step 5. Install NPM packages to install react & react-dom as a dependency not as a dev dependency, which is not included in the final bundle.

So react & react-dom should be under dependencies as shown in package.json below.

{
    "version": "1.0.0",
    "name": "asp.net",
    "private": true,
    "scripts": {
        "dev": "webpack --mode development --watch",
        "build": "webpack"
    },
    "dependencies": {
        "react": "^16.5.2",
        "react-dom": "^16.5.2"
    },
    "devDependencies": {
        "@babel/cli": "^7.1.2",
        "@babel/core": "^7.1.2",
        "@babel/plugin-proposal-class-properties": "^7.1.0",
        "@babel/preset-env": "^7.1.0",
        "@babel/preset-react": "^7.0.0",
        "babel-loader": "^8.0.4",
        "browser-sync": "^2.26.3",
        "browser-sync-webpack-plugin": "^2.2.2",
        "webpack": "^4.20.2",
        "webpack-cli": "^3.1.2",
        "webpack-notifier": "^1.7.0"
    }
}

guymalka • Mar 4 '19

dont have any pack in devdependency

here is package.json

"name": "webbuildingoverhaul",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"@progress/kendo-data-query": "^1.5.0",
"@progress/kendo-date-math": "^1.3.2",
"@progress/kendo-drawing": "^1.5.7",
"@progress/kendo-react-common": "^2.4.0",
"@progress/kendo-react-dateinputs": "^2.4.0",
"@progress/kendo-react-dropdowns": "^2.4.0",
"@progress/kendo-react-excel-export": "^2.6.1",
"@progress/kendo-react-grid": "^2.4.0",
"@progress/kendo-react-inputs": "^2.4.0",
"@progress/kendo-react-intl": "^2.4.0",
"@progress/kendo-react-pdf": "^2.4.0",
"@progress/kendo-theme-default": "^2.56.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.1.3",
"css-loader": "^0.28.11",
"kendo-ui-core": "^2018.3.911",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"react": "^16.5.0",
"react-alert": "^4.0.4",
"react-alert-template-basic": "^1.0.0",
"react-datetime": "^2.16.3",
"react-dom": "^16.5.0",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-native": "^4.3.0",
"react-transition-group": "^2.4.0",
"redux": "^3.7.2",
"redux-thunk": "^2.3.0",
"restore": "^0.3.0",
"style-loader": "^0.19.1",
"webpack": "^3.12.0",
"webpack-cli": "^2.1.5",
"html-webpack-plugin": "^3.1.0",
"webpack-dev-server": "^3.1.8"
},
"devDependencies": {},
"scripts": {
"watch-test": "mocha --watch --reporter spec test",
"build-js": " reactify app.jsx | uglifyjs -mc > bundle.js",
"build": " webpack"
},
"author": "",
"license": "ISC"
}

Sung M. Kim • Oct 15 '18

I've also experienced issues with synchronization and blocked calls regularly, as well as build issues that I catch much sooner if I can see the build output.

...

I generally don't even bother with ide integration

I can empathize with your experience because
I've also been bitten badly trying to figure out why a page wasn't working properly as I assumed the site was rendered correctly without any build issues.

That's why I have a separate build script that'd just run webpack without watching the file change so I can fire up an one off build when I am paranoid 😀😄

Riadul Hoque • Jan 12 '19

Thanks a lot! That was really easy to follow!

Sung M. Kim • Jan 12 '19

You're welcome and thank you for the props, Riadul~

Nick • Oct 14 '18

Thank you so much for this article! I was looking to start with React in .Net.

Sung M. Kim • Oct 14 '18

You're welcome Nicolas.

But also consider creating React & Back-end in separate projects as discussed in this reddit post, Reaact and backend different or in same solution.

Nick • Oct 16 '18

Great advice, thank you!

Mark Mbirira • Oct 13 '18

Thanks for the nice simple article.

Sung M. Kim • Oct 14 '18

Thanks Mark :)

abimr • Apr 24 '20 • Edited

Thanks for your tutorial! I now have a non-trivial React app in an ASP.NET MVC 5 project.

But now I need to be able debug the React app from VSCode/Chrome.

My webpack entrypoint is ./Scripts/react/index.jsx. The output is ./Scripts/dist/react/bundle.js. What should be my "webRoot" and "sourceMapPathOverrides" values in .vscode/launch.json? Am I missing other values?

  {
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Chrome",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:23042",
        "webRoot": "${workspaceFolder}/Scripts/react",
        "sourceMapPathOverrides": {
          "webpack:///Scripts/react/*": "${webRoot}/*"
        }
      }
    ]
  }

kratos2333 • Jan 5 '21 • Edited

Hi Kim, thanks for the informative post, much appreciate this. I got an issue when I deploy my mvc react application to the IIS server. As IIS will put a virtual path as the project root so the url will be server/myApp (server deployment) instead of localhost/ (local test). This will break many things like need to be to make it works on IIS server. Also http controller call like axios.post('/someController/someMethod') needs to be axios.post('/myApp/someController/someMethod'). Any suggestion on how to fix these path issues ? Thanks in advance

T-T • Sep 15 '20

Thanks to Sung M. Kim. The post is very detail.

Sung M. Kim • Sep 17 '20

You're welcome & thanks for the comment~

Yang guang • Jan 28 '19

Nice article and help me a lot

Sung M. Kim • Jan 28 '19

Thank you. I am glad that it was helpful 🙂

Joe Zack • Oct 15 '18

Great write up! That's a lot more to that than just running "create-react-app" so I appreciate your time figuring this out and writing it up (with screenshots!) so concisely!

Sung M. Kim • Oct 15 '18

Thanks Joe 😀.

Your comment just made my day 🤜.

View full discussion (47 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

DEV Community