Azure CI/CD setup to build + serve React build directory from Express server

Question

Using Web apps in Azure, and Github CI/CD, is there a way to deploy an Express/React app as one application, where the deployment process takes care of building client/React code? Here is my directory setup:

• server.js (this is express logic)
• package.json
• client/ (client directory containing React source code)

I have server.js setup to serve a static client/build/index.html file. However, I'm not sure how to create that build directory within CI/CD. I'm currently just running npm run build locally and then pushing the build directory to my repo, but I'd preferably like deployment to take care of running npm run build.

Article 1 in Medium suggests changing the start script at the root level of server, but this does not work with Azure.

Article 2 from Medium suggests running npm run build locally, pushing that directory to CI/CD.

Answer 1

Your expected goal.

Using Web apps in Azure, and Github CI/CD, is there a way to deploy an Express/React app as one application.

I suggest you, the front-end react project and the back-end express project, it is better to completely separate.

The reason:

Even if the two projects are placed in the same directory, when they are essentially running, they are still running two ports separately.

Reference tutorial:

How to create a React frontend and a Node/Express backend and connect them

Building a React app with a Express back-end in the same project with external access to a MySQL database

From the current mainstream point of view, it is better to completely separate the front and back projects and not put them in a project structure.

My advice:

You don't want create two webapp services, you can use Virtual Apllications in windows platform. You can deloy your express project by github. But your react project maybe need choose another way to deploy, like zip etc.

As of now, I haven't seen the use of github to deploy virtual applications.

You can refer to my answer in the following post.

How to deploy a Flask+React application to Azure Web Service

Vue Frontend and Express backend on same Azure web app Service

React.js - How to deploy client and server independently or together?