Getting started with ReactJs and ASP.NET MVC application without using the helper template.

Background

We decided that for all new features in our product we will use Reactjs for client side development. Our product has been going for over five years now and has evolved from using ASP.NET MVC 3 to ASP.NET MVC 5 going through all the other versions in between. We have been doing all the front-end work with AngularJS . As the product evolves we decided as a team that for all new features we will use the latest technologies so that when it comes time to do a full migration it will be easier.

Going with Reactjs made sense, but I will not discuss the reasons behind that. Now, a new feature landed for development, we wired the APIs in ASP.NET Web API 2.0 and I started on the journey of wiring up React to the application. Our client side code is organised and structured by feature so getting that up and running was pretty easy.

Installing the npm packages

I will assume you have node installed, if not I suggest installing the latest. My app is in the ./Content/App/RefundEmd folder but the package.json file is in the root of the ASP.NET application. The reason for that was so we can share the package.json with other js apps that we run in the content folder.

You can create your package.json file in the app folder. Bear in mind that if you run npm install all the node modules will be installed in the folder where you package.json resides.

To create a package.json, in Visual Studio:

1. Navigate to your app folder (the folder in which you will build your application from) and click on Open Folder in File Explorer.
2. In the address bar, highlight everything and type cmd
3. This will open the command line and in the command line run npm init by typing npm init
4. Node will have a bunch of questions for you to respond to.
5. You will need to give responses for the required fields (name and version), as well as the main field. Leaving defaults is also OK.
6. The name will denote the name of your application and version will denote the version of your application and so on.
7. After you finish responding to providing this metadata for your application package.json file will be created in your folder.

Soon after creating the package.json file, you will notice that the package.json file is not part of your application. Click on the show all button at the top, under the solution explorer and include the file into the project and it will be available in your project.

Show All

I prefer to use Visual Studio Code when doing any JavaScript development. It has support for the latest JavaScript features and offers a built in node debugging. Another great feature is that it has built in terminal which is very handy.

Using the terminal (the Powershell command line in Visual Studio Code), navigate into the app folder (if you are not already in that folder) or the folder you have the package.json.

1. Installing React, run command npm install — save react react-dom. See below:

Command to install React and dependencies

The ‘ — save’ command will allow for the two libraries to be saved under the dependencies of the app in the “packages.json” file. If its the first time you are running npm install in your app, a “node_module ” folder will be created for you. The folder contains all the dependency libraries that are needed by your application

Basics that are required

They are a few things that are required for a React app.

1. Babel for Transpiling:

React uses JSX which is an XML-like syntax in inline JavaScript. So you need Babel to convert JSX and ES6/7 into JavaScript 2015. Babel is a pre-processor that will convert JSX and ES6/7 into regular ES5 JavaScript . Install babel as a development dependency. To install babel as a development dependency run:

npm i — save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

Babel Command

Babel offers two methods for configuration to use in a project.

a.) You can add a .babelrc file in the project. More on .babelrc here

b.) You can configure babel in package.json file. The advantage of configuring in the package.json is that you will have less files in your project. To configure, you add a section called babel in your package.json file. See more on here

2. Webpack for Bundling

You need to bundle and minify packages in the format that the browser will consume.For development you need to have a bundler that will take all your JavaScript and intelligently package them for the browser. Webpack is a very good bundler. Webpack bundles JavaScript, CSS, images and html into small minified files. The beauty of webpack is that it contains a huge ecosystem and a huge system of loaders. To install webpack and its cli run: npm i — save-dev webpack webpack-cli

Installing Webpack

3. webpack.config.js

Add the webpack.config in the root of your application. Webpack is configured via a single object that’s defined in the webpack.config.js and its placed at the root of the project.

Create a file in the root of the application and name it “webpack.config.js”. Webpack is configured by exporting a single object. My webpack.config looks like the one below.

webpack.config.js

From the file we can see that the entry of the application is “app.js” and the output is to the file refundEmd.js which is going to be created in the dist folder for distribution. Read more on webpack and how to set up its config here

Script Section in “package.json”

The script section in the package.json file is a section where commands that can be run within the life-cycle of the application are defined.

The “scripts” property is a dictionary containing script commands that are run at various times in the lifecycle of your package. The key is the lifecycle event, and the value is the command to run at that point. See npm-scripts to find out more about writing package scripts.

In the scripts section you need to inform the application how to run. Below is a snippet of my scripts section,

Script Section

In your terminal if your run “npm run webpack”, it should compile and a minified file should be dumped in the dist folder. You can reference the file in your view.

This is a short get you started document. You need to dig deep on setting up webpack config for your development environment. If there is anything I missed please let me know in the comments