CODEWITHSUNDEEP
pythonrestnginxvue.jsflask
cnstlungu
cnstlungu

Reputation: 557

How to deploy a Flask / Vue.js web application

I need some help in deploying my Flask/Vue.js web application.

Current setup: Vue.js frontend with vue-router with static pages + Flask backend (communicating over Ajax, only needed to facilitate sending an email through a form).

Problem:

I'm puzzled on how to deploy it on a VPS:

My Flask Backend/API:

from flask_cors import CORS
from flask_mail import Message
from datetime import datetime
import pytz
from flask_mail_sendgrid import MailSendGrid
from config import confreader

app = Flask(__name__)

app.config.from_object(confreader)

curdate = str(datetime.now(pytz.timezone("Europe/Bucharest")))

cors = CORS(app, resources={r"/api/*": {"origins": "*"}})

mail = MailSendGrid(app)

@app.route('/api/sendemail', methods=['POST'])
def send_email():

    subject = '[Contact Form Message] ' + request.json['name'] + ' on ' + curdate
    template = f"""
    <h1>{request.json['name']} ({request.json['email']}) on {curdate}</h1>
    <p>{request.json['text']}</p>"""

    msg = Message(
        subject,
        recipients=[app.config['MAIL_DEFAULT_SENDER']],
        html=template,
        sender=request.json['email']
    )

    try:
      mail.send(msg)
      return jsonify(True)
    except:
      return jsonify(False)

if __name__ == '__main__':
    app.run()

Thank you!

Upvotes: 1

Views: 3677

Answers (1)

Gediminas
Gediminas

Reputation: 685

Nginx can serve static files, so what you can do is point Nginx to a directory where your compiled Vue.js app is placed. At the same time it should also serve your Flask app. So there should be two locations defined.

There's probably more than one way to do it, here's a random example I've found online: 

server {  
    listen 80;
    server_name 123.45.67.89;

    location /api {
        include uwsgi_params;
        uwsgi_pass unix:/home/survey/flask-vuejs-survey/backend/surveyapi.sock;
    }

    location / {
        root /home/survey/flask-vuejs-survey/frontend/survey-spa/dist;
        try_files $uri $uri/ /index.html;
    }
}

https://stackabuse.com/single-page-apps-with-vue-js-and-flask-deployment/#settingupnginx

Upvotes: 7

Related Questions