1

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:

  • Two processes on two different ports, one for uWsgi+Flask and one for Vue, with Nginx serving them
  • One single process - Uswgi+Flask to serve the static (built) Vue pages, Nginx in front of them. Flask somehow needs to redirect the request to the appropriate static view.
  • Something else

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!

1 Answer 1

7

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.