How to load react.js apps into existing ASP.NET , Simple AF 🥵
Tags: react, webpack, aspdotnet, javascript
Published: 2023-09-15 04:42:56

In this post, I will show how to easily load react apps into existing ASP.NET applications, let it be js, jsx , tsx no barrier.

**Note: I've used ASP.NET Web Forms.**

**Step 1:-**

Take an existing react.js project or create a new one and keep it ready .

**Step 2:-**

Go to View > Terminal to open the command line and enter these commands to install your project's packages and webpack:

`cd <ProjectName>
npm install webpack webpack-cli`

**Step 3:-**

Create a filename webpack.config.js in the root dir , and paste the following code.

```
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const glob = require("glob");

module.exports = {
  entry: {
    "bundle.js": [
      ...glob.sync("build/static/?(js|css)/main.*.?(js|css)").map(f => path.resolve(__dirname, f))
    ],
  },
  output: {
    filename: "build/static/js/bundle.min.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpg|gif|svg)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192,
              name: "static/media/[name].[hash:8].[ext]",
            },
          },
        ],
      },
    
      {
        test: /\.(png|jpg|gif|svg)$/i,
        include: path.resolve(__dirname, "media"),
        use: [
          {
            loader: "file-loader",
            options: {
              name: "static/media/[name].[hash:8].[ext]",
            },
          },
        ],
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

```
save it and 

install the following dependencies
CSS loader:
`npm install css-loader style-loader mini-css-extract-plugin`
URL loader:
`npm install url-loader`
SVG loader:
`npm install @svgr/webpack`
Install process to avoid the "process is not defined" error:
`npm install process`

save it.

**Step 4**

Now come back to the root directory in cmd  and build the react app.

`npm run build`

As we have already declared the build script in webpack.config.js file , we will get the build folder added with the bundled folder inside the dist > build >static> js.

for a succesfull build , here is the log


![log file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gc24d3ucg6o1ph0l2mki.png)

we can set the entry and output in the webpack.config file .



![entry and output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4do9edpxrg7xmr43f4g.png)

we can customize the output bundle file name and the folder.

**Step 5**

According to the path we set , we should have got a folder name **dist** created , inside which you can find build/static/js/bundle.min.js .

just copy the bundle file from there and add the bundle file inside the ASP.NET Project's root folder , its a best practice to create a folder and put that bundle file inisde the folder .

**Step 6**

After placing the bundle file , now create a new .aspx page and paste the script like this . 

```
<%@ Page Title="About" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="TestReactWebApp.About" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <div id="root"></div>
  <script src="Scripts/dist/build/static/js/bundle.min.js"></script>
  
</asp:Content>


```

Here I have my own folder structure inside the script tag , but You can change the folder structure according to your wish. 

** Note that inside the .aspx page you can see the div tag with id root . inside the index.js of our react project ,  I have mentioned  the getElementById as "root" **

```
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

```

**Step 6**
Build the asp project and run the server .

if you find the images are not loaded . hover over the images in the browser and using the developer tools and , try to locate the path , then add the exact path as folders in the root directory. Inside the folder , add the .svg file form the build/static/media folder in your  react project and paste it. 

This is how you can add the react project inside the ASP project easily . Feel free to ask any doubts , or if you find any issues  , let me know , I will try my best to give solutions for you.