Jello. I build a webapp using Emberjs on the frontend with a Flask REST API, and I am looking to deploy this in an EC2 instance with AWS. I am able to build the frontend to dist, but I am unsure of further action I need to successfully deploy my app. When I run the server and visit the instance public URL, I get a 404.
How should I configure Ember to automatically handle the GET requests and serve HTML the way it does when running ember serve -w locally? Any advice would be much appreciated. Cheers.
Hi @Jesus_Nike, welcome!
The main ideas to keep in mind here are the differences between development and production “builds”. When you run the dev server it’s just a tiny light static file server running on your local machine. That’s part of ember-cli and isn’t used in a production context at all. When you build for production all your app source code and assets get compiled into your /dist directory as purely static assets. This means to serve them in a production context you need a web server configured for serving static files. This could be your Flask server or you could run some other server on your EC2 instance.
Another thing to note: Ember is a Single Page Application (SPA) framework meaning all your front-end is generated using a single html document. So you have to set up your static file server to reroute any “sub pages” of your app to the app itself. E.g. if a user hits your flask server at https://mycoolsite.com/app/blog/2 and your ember app is configured at /app you want it to reroute the /app/blog/2 request to the Ember app at /app. The Flask docs have a brief section on configuring Flask for an SPA. Keep in mind though that if you’re serving your API and also your Ember app you need to differentiate them somehow.
What you need to do is setup a catch all get route that will serve your frontend application index page. So when someone comes to your website the will be served your ember application, but it will also allow your application to still function as an API.
from flask import Flask, send_file
import os
app = Flask(__name__)
@app.route('/')
def index():
return send_file(os.getcwd() + '/dist/index.html')
This is what my route looks like because I’m using expressJS using Node.Js. Since I’m using Express.Js I have to put this route as my last route in my application so your other get routes still work, but I’m not sure if you will have to do with with Flask.
server.get('*', function(req,res) {
res.sendFile(path.join(__dirname,'dist/index.html'));
});
I hope this helps you in some way.