Embed your react application in basic HTML pages

In this article, I will be covering in detail how you can embed your react application easily to an HTML file using script tag (i.e: <script src="your-React-App">).

These steps we have to follow:

1. Create a basic react app.
2. Create a build of this react app using the npm run build command.
3. Create a basic server using node-js & express that will serve build files of react app to client-side.
4. Create an HTML file and embed react application in it.

Note: I am embedding it in an HTML file but you can embed it in any technology you want.

These all points will be covered in detail as follows:

1. Creating React app.

Creating boilerplate react app with npx create-react-app my-react-app.

2. Build React App

Type command npm run build, after build runs successfully your folder structure should look like this:

3. Express Server

Building a basic server that will serve all file names first and with that filename, any application can call these files from the server using its name. Here is the final code of the server

Finally, React app and a server is done to serve files, Moving on to an HTML file to embed this react app into it.

4. Create an HTML file.

That's all done. Let me know in comments if it helps or not

Thanks.

MS here, ciao-for-now??