Deploy web application built using Quasar framework and Python Flask framework on AWS EC2 instance, using PM2 & Nginx web server

Follow me on Twitter
Follow me on LinkedIn

What is Quasar Framework?
Quasar framework is a Vue.js-based framework for building websites with a single codebase and you can deploy it on the web as SPA, PWA, SSR, and to Android, iOS, and Desktop apps too.

What is Python flask framework?
Flask framework is a micro framework that is written in Python. It is called a micro framework because it doesn't require any tools or libraries.

What is PM2?
pm2 is a process manager that makes the management of background processes easy. It's very easy to use.

What is Nginx?
Nginx is a web server and it can be even used as a reverse proxy, load balancer, mail proxy, or HTTP Cache.

I assume you have an application built and running using the Quasar framework which is connected to Python flask framework API. Please set up the Database as per your application requirement and give the correct Database URI in the configuration.

Few assumptions for the whole blog we are making:

• Repository name: demo-app (Front-end content is in quasar-app folder and the back-end is stored at the root level with file app.py)
• Ubuntu server running on IP 10.209.201.30, Username: ubuntu
• key to connect: private.pem

Now, let's SSH into the server

ssh -i private.pem ubuntu@10.209.201.30

Clone your repository on the server and setup both front-end

git clone <your_repo_url>
cd quasar-app
npm install
Now, check if front-end is running fine or not by running quasar dev

Setup back-end. Here I am assuming you have requirements stored in requirements.txt file.

Install python3: sudo apt install python3

Install pip3: sudo apt install python3-pip

Install virtualenv: pip3 install virtualenv

Setup back-end

virtualenv venv
source venv/bin/activate
pip install -r requirements.txt

Now check if your flask app is running fine by running the command python app.py

So far both the front-end and back-end are working fine on the server.

Let's install pm2 now.

npm install pm2 -g

Now run your back-end app in background using pm2

pm2 start app.py --interpreter venv/bin/python3
pm2 save

It is important to run pm2 save so that so it will respawn after reboot

Now, your back-end app is continuously running on the server in background on port 5000 (Assuming you have defined port 5000)

Setup front-end
To set up the front-end, first, you need to build your Quasar app.

quasar build

Once you run the quasar build command, it will create the spa folder in the dist directory. (path: dist/spa)

To make the front end available, you need to copy spa folder at /var/www/html/ path.

I recommend you create the deployment script named deploy-front-end.sh within your quasar-app folder with the following content.

sudo rm -rf /var/www/html/demo_app/
sudo cp -r dist/spa /var/www/html/demo_app

This will copy static app (spa) at /var/www/html location.

Now, you can expose your front end to the outside world through the Nginx web server.

Now, your front-end and back-end both are working on the server.

The final step is to configure your full-stack application in Nginx.

Navigate to /etc/nginx/ location. There you will see 2 folders named sites-available and sites-enabled .

sites-available contains configuration files of all the available websites you may have.

sites-enabled contains those websites which are currently live.

Now go to sites-available folder and create the file named demo_app with the following content.

`server {
root /var/www/html;

server_name _;
location /api/ {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://127.0.0.1:5000;
}
location / {
    root /var/www/html/demo_app;
    try_files $uri $uri/ /index.html;
}

}`

Here, /api is where your back-end running. Since your python is running on port 5000 , you can see I have given location http://127.0.0.1:5000

Since we have copied the front-end to /var/www/html/demo_app location, in Nginx / location, I have given that path.

Now, your website is available but not yet live. We need to link it to sites-enabled location to make it available on the internet.

Navigate to /etc/nginx/sites-enabled location and run the following command.

sudo ln -s ../sites-available/demo_app

Now, run the following commands to restart the Nginx web server so that it considers the latest changes made to it.

sudo service nginx reload
sudo service nginx restart

Now, your website is live. If you haven't mapped the domain, you can access your website using the EC2 server's public IP or public URL.

I hope this will help you deploy your full-stack applications which you have developed using the Quasar framework and Python-Flask framework on the AWS EC2 server.

Do let me know of any doubts or issues you may have. Thank you for reading