Deploy Reactjs app with Nodejs server on Google App Engine

Photo by Morning Brew on Unsplash

I have spent some significant amount of time to find some way to deploy a Reactjs app on Google App Engine which has Nodejs server as backend as well. Google App Engine has samples and steps to deploy Nodejs server in their documentation which actually did not help me to right away. There are few blogs and youtube videos available on how to deploy Reactjs on Google App Engine but that also did not help me right away.

• I kept on getting a 502 error code.
• PORT 3000 does not seem to work. Not even any port other than 8080.
• Not able to start client and server both altogether at the same time.

Eventually, I was so frustrated since I was stuck on the above problems even after seeing the working deploy on blog screenshots and youtube videos, thinking I am also doing the same thing but why this is not working for me and also unable to believe that Google App Engine does not give any way to deploy a basic Reactjs app.

But I did not give up and I sit back and thinking there has to be some way otherwise how the premium customers will do. It should not be so much pain to deploy these basic things and I had the working solution and my app running on Google App Engine ultimately and believe me, it was very simple things to do.

Photo by bruce mars on Unsplash

I have made a video as well and explained step by step. You must check it.

Steps-

• App preparation
• Deploy on Google App Engine

App Preparation:

1. Create react js app using create-react-app

I have created a sample app, which you can clone and run locally. It has a backend server setup as well. You can refer to mine and make the necessary changes to your project. You need to replace `http://triple-hour-287219.uc.r.appspot.com` to http://localhost:3000 in server.js and http://localhost:8080 in App.js.

Get Ajay kumar’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

If you want to create a fresh, you can refer to this https://create-react-app.dev/ and create a Reactjs app. Steps are very simple and pretty easy to run the app locally on 3000 PORT.

2. Add backend calls and start a server

Refer to src/server.js and src/model.js in my sample.

• Backend server will run on PORT 8080.

Model.js

Deploy to Google App Engine:

Here, is the magic.

Photo by Julius Drost on Unsplash

To successfully see running your app on Google App Engine, you need to do the following things and add them to your project.

1. Go to https://console.cloud.google.com/appengine and create project.
2. Run npm run build and generate a production build. It creates build a directory under root the directory.

3. You have to start the backend server on PORT 8080. Remember it has to be 8080.

4. Add build directory path to expressapp object. You need to add a relative path so make the change as per your server.js file.

5. Add app.get call for the path /* at the end of all the calls. As it is like below. Do not change anything here.

6. Go to google app engine dashboard page https://console.cloud.google.com/appengine , find the host name at right top corner, and add here to allow cors. Do not put any port. It has to be just host name. http or https you can put based on your setup. for example, in my case it was http://triple-hour-287219.uc.r.appspot.com

7. Add url at client-side like this. Replace with your host name and do not put any port.

8. Add your server.js in start command like below. start:node src/server.js in package.json like this. This will be used by Google App Engine to start the app.

9. Add app.yaml with the below details. Only these 2 details are enough. We do not require any handler etc.

10. Follow usual command to deploy app in google app engine.

• gcloud init
• gcloud app deploy

11. Access app.

By default ,url will be opened in https. If your app is not setup https then you have to access it with http only. With https ,all the backend calls will fail.

This way, we will be able to deploy Reactjs app which has also Nodejs server running as backend.

Hope it helps!.

Code is available at GitHub. Follow me to get more technical topic blogs.

Please, put your comment if you found this article useful. You can also leave a comment on the next problem or any topic you want to learn.