How to deploy your project(React) to GAE(Google App Engine)?

Hi, This this Michael! I usually use XAMPP or old rusty servers to manage my apps and websites but today I wanted to share how I deployed my web app to the GAE for the first time! It felt so great and was a breathtaking experience! So let’s get started! So where should we start… Ok, from GAE.

So what the hell is GAE?

GAE is PaaS (Platform as a Service) provided by Google. There are various forms of environments for building web apps by the cloud, but GAE is probably a long-established store that is comparable with Amazon’s AWS among many cloud services. It can be said that “Web apps using Google’s technology can be created individually” such as user authentication by Google account provided by Google and data store function using Google’s huge database operation technology can be said to be the biggest thing.GAE is PaaS. So enough of GAE, for more information check out their official website!

https://cloud.google.com/appengine/


So let’s let’s just hop right into deploying your web app to GAE. In my case, I needed to make a portfolio with React, so I will show you how I deployed my App to GAE in an easy step!

Actually, there are only 3 simple steps in the deploying process.

  1. Create your application (In my case create-react-app)
  2. Need to create a new Project for your app in the Google Cloud Platform
  3. Install and deploy your app with GCP

Not that difficult! But you will need some basic developing and terminal knowledge!

(1. Creating your app.

Ok, since most of you might know or may have already built the app, I will skip this part! If you wanted to learn some react, I will make some soon but I know that there are some better tutorials out there!

(2. Create your project in GCP console! 

First of all, go to https://cloud.google.com and log into the console, find “GO TO APP ENGINE” to transition to App Engine Dashboard. Then there should be a link to “create a new App Engine project”! If you find the link, click to make one. After redirecting into the “create a new project” you will have to give the project a name and keep in mind to always keep your project ID safe and don’t forget it because it will be important (lol)

After you made your project, you will get your projects dashboard like the following(Not showing all the contents due to my privacy)!

 

So I made a project for my app, so what should I do here? Ok, download the latest SDK from this link  here from the download page, you will see the pre-requisites for the SDK, make sure to install all of them first and download and extract the SDK on your HD or anywhere, once you are finished with the basic setups, run the following command to install it.

./google-cloud-sdk/install.sh

You will see something like “Welcome to the Google Cloud SDK” kind of message.

After the installation is done, you will have to initialize it

./google-cloud-sdk/bin/gcloud init

By initializing through the above command, the browser window will open asking you login information and will show you the available configurations.

Since I’m already authorized, I was sent directly to the login and set the necessary permissions and settings.

When you are done with you login settings you will have to pick a google cloud project to choose. To choose you will have to enter a numeric number of the project.  After picking the project you are ready for deploying your app! That’s so great!

Now let’s deploy the App!

Now we are going to navigate to the web app that we created in the beginning and run the following command in order to deploy it to App Engine.

In my case, I have my project in htdocs.

cd /Applications/XAMPP/htdocs/myreactportfolio

Then run the following code!

gcloud app deploy

When you run the above command you will be prompted to choose the region where you want the App Engine to store your application! I actually don’t care so much about this part!

But just choose any region to start the process of the deployment!

It took me about 5 minutes for my app to be deployed, so be patient and let’s wait! After your deployment is done, you can run your app in the browser using the following command.

gcloud app browse

Now, I have my app deployed in GAE! Hurray! We finally made it! I will be testing and trying more stuffs with GAE! So I will be updating with more informations soon! So stay tuned! Unil next time!

 

Leave a Reply

Your email address will not be published. Required fields are marked *