Setting up a React Environment for ASP.NET MVC

Sung M. Kim on October 13, 2018

Photo by Zoltan Tasi on Unsplash I had a chance to update a legacy ASP.NET MVC website using AngularJS (yes, the first version) to use Webpack &am... [Read Full]
markdown guide
 

Generally I prefer a watching build and manual refresh to browser sync. The number of times I want to lose track of an active debug state on the client as I type in an IDE are few. 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.

The last point is why I generally don't even bother with ide integration and just have a terminal session open persistently to run/monitor the updating build.

 

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 πŸ˜€πŸ˜„

 

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!

 

Thank you, JΓ©rΓ΄me πŸ™ enjoying the post and spotting the error.

I've updated the post πŸ™‚πŸ€œ

 

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

 

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.

 

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'

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"
    }
}

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"
}

 
 

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

 

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.

 
 
 

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

 
 

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!

 

Thanks Joe πŸ˜€.

Your comment just made my day 🀜.

 

That was a nice article but can you add some rules before moving to production with this setup.

 

did not work lmao, vs2019 here. It wont show me the content of react in the web app, but shows the other content

code of conduct - report abuse