Deploy web application built using Quasar framework and Python Flask framework on AWS EC2 instance, using PM2 & Nginx web server
Tags: webdev, aws, ec2, nginx
Published: 2023-02-09 06:25:22

[Follow me on Twitter](https://twitter.com/mayank91193)
[Follow me on LinkedIn](https://www.linkedin.com/in/i-am-mayank-patel/)

**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