How to deploy an Angular 8 application and a Python 3 Flask Restplus API on Google Cloud using MacOs.
In this article, I will share with you a step by step example of how to deploy an Angular 8 application and a Python 3 Flask Restplus API on Google Cloud.
Let’s assume you have already built your Angular and Python applications and now you need to deploy and share it with the world.
Since Google Cloud was new to me, I spent a lot of time trying to deploy the application. I was unable to find a good example on how to deploy from start to finish and had to read the dry documentation. I hope this article will enable you to successfully deploy your applications quickly and save you some time to spend it on better things in life.
Why Angular? Because I am more comfortable with it and have extensive experience using Angular starting with its first version. But there are a lot of different web frameworks that you can try, in my case, I just wanted to build quickly to share the results with my client.
Why Phyton? At this time, I am changing my career path to become a data engineer and Python tends to be very popular amongst data people. In my opinion, it’s a great language; easy to understand and has a large community for support. It allows you to build impressive stuff with very little effort.
Why Google Cloud? Because it is free. Google gives you a credit for the first year, in my case, it was CAD 400. You can try all their features and services without paying a cent.
Alright, let’s begin from setting up a Google Cloud Platform account:
- Follow the link below:
Hit the Get started for free button.
2. Choose your country and check the Terms of Services, click Continue.
3. Fill out your information and payment method, click Start My Free Trial.
Once everything is set, you will see the following screen:
Now we will create 2 different projects. One for an Angular application and one for a Python application.
- Click on My First Project button.
2. In the popup screen click on the New Project button.
3. Give your project a name (example: AngularApp) and click Create.
4. Repeat steps 1 – 3 to create a new project for a Python application (example: PythonApp).
5. You should be able to see all your created projects listed on the Select a project display.
Let’s set up a Google Cloud SDK.
This tool allows us to deploy the code from your computer to Google Cloud.
- Follow the link below:
2. Click on View quickstart.
3. Select Quickstart for masOS.
4. Let’s explore the Before you begin section:
- Create a Google Cloud Platform. We already did that :)
- Make sure that Python 2.7 is installed on your system. Just open the terminal and use the command specified in the example: python -V
- Download the archive. In my case, I have a 64-bit system and google-cloud-sdk-261.0.0-darwin-x86_64.tar.gz is the best match.
Once the archive is downloaded, extract its content to the location of your choice. In my case, I will leave it in the Downloads folder.
Now we need to check if gcloud commands are working properly.
Open a new terminal and type gcloud init. If you have never installed Google Cloud SDK before, you will see the following message: -bash: gloud: command not found. Basically, this message appears because your $PATH is not defined properly so gcloud init command is lost and doesn’t know where google-cloud-sdk folder is located. We need to help it out a bit :). Open a new terminal and navigate inside the google-cloud-sdk folder. Run the ls command, you can now see the folder’s content.
What we need now is to execute install.sh. You can do it using the following command ./install.sh
The following message will display:
Type n and hit Enter.
The next screen will show you a summary of the installation and ask you if you want to modify the profile and update your $PATH. Type Y and hit Enter.
You will see the following message:
Hit Enter, again.
Restart your terminal and execute the gcloud init command.
You will see the following message:
Type Y and hit Enter. A popup login window will appear. Log onto your Google Cloud SDK using the same Gmail address that you used during the creation of your Google Cloud Platform account.
The following message will display:
Click the Allow button.
Go back to your terminal, you will see that you are now connected and the list of your projects is presented.
That’s for the Google Cloud SDK! The setup is done and we are ready to deploy our applications.
Now we need to prepare them to be deployed on the cloud. You can kill gcloud process by pressing Ctrl+ Z or just close the terminal.
Preparation and deployment of an Angular application.
Open a new terminal window and navigate inside your Angular project. You have to find your self in the same location as your angular.json file. My Angular project looks like this:
Once you are inside the folder of your Angular application, you have to type ng-build — prod.
If you see this error message :
It means your npm is not updated. Just run npm update command in your terminal.
Once ng-build finished its work you will see these traces:
Go back to your Angular application folder. You will discover that a new folder appeared: dist
Lastly, you need to add the app.yaml file. If you need more information about app.yaml file check out the link below: https://cloud.google.com/appengine/docs/standard/python/config/appref
My app.yaml file looks like this :
In case if you need to copy it, here it is in text:
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /.*
static_files: dist/calculator/index.html
upload: dist/calculator/index.html
I would like to bring your attention to dist/calculator/index.html. You have to specify the position of your index.html file relative to your app.yaml file. In my case, the index.html file is located inside the calculator folder that is inside the dist folder:
If there are no other folders inside your dist folder, your upload attribute should look like this: dist/index.html.
We are now ready to deploy our Angular application.
- Open a new terminal window and navigate inside your Angular application folder, find the exact location as your app.yaml file.
- Type gcloud init and hit Enter. You will see this message:
3. Chose option 1, it is connected to your Google account. Hit Enter. The following message will appear:
4. Chose option 1, it is connected to your Google account. Hit Enter. The next message will appear:
5. Chose your Angular application project and hit Enter, in my case, it’s option 1 angularapp. You will then see the following:
6. Type gcloud app deploy command and hit Enter. You will see the following:
7. Chose your region. In my case, I will go with the 12 us-central and hit Enter. You will then see the below:
8. Type Y, hit Enter and the next message will appear:
9. Type gcloud app browse and hit Enter. It will open a new window with the main page of your application. The address in the URL field will be based on your project name ending with appspot.com. In my case: https://angularapp-252323.appspot.com
Preparation and deployment of a Python 3 Application.
Open a new terminal window and navigate inside your Python 3 project. My projects structure looks like this:
As you can see, we need to add app.yaml and requirements.txt files. We have to have these files to deploy to the Google Cloud.
The content of app.yaml is much easier this time, only one line:
runtime: python37
Within the file requirements.txt, you have to specify all the libraries that your Python project is using. In my case:
Flask==1.1.1
Flask-Cors==3.0.8
Flask-restplus==0.13.0
There is nothing special in my main.py file, but for those of you who want to take a look, here it is:
Here is an example of flask_rest_plus in case someone is interested. All my namespaces are inside the apis folder:
I would like to highlight that this is not a how to build a flask_resplus API tutorial. The main purpose of this article is to show you how to perform a deployment. So let’s continue.
Once inside your Python project type gcloud init and hit Enter.
1. Chose option 1 and hit Enter.
2. Chose option 1, it is connected to your Google account, hit Enter.
3. Now chose the 3rd option; it’s related to your Python project. Hit Enter.
4. Type gcloud app deploy and hit Enter.
5. Chose your region and hit Enter. In my case, it’s 12
6. Type gcloud app browse and hit Enter. Your Python application is up and running:
That’s it! Now you have a full-stack application with Angular on the front-end and Python on the back running on Google Cloud.
I hope you enjoyed this article and found it useful. Let me know in the comments what your thoughts are and if you need help or clarifications. I will try my best to get back to you shortly.
Cheers!
