How to structure an Angular 2 front end app along with Flask back-end api?
Here is a sample Nginx config file. I'm sure this is not the best way to do this, but it got me testing my app.
server { listen 80; server_name localhost; # Your angular app location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ =404; } # Static files location /static { alias /usr/share/nginx/flask/static; } # Gunicorn location /api { proxy_pass http://localhost:4000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }
Points to Note
Use Angular CLI to build your Angular app to say,
dist
folder. Make nginx point to it. Given as/usr/share/nginx/html
in the config. This link helped me figure out Angular CLI better.Serve your flask backend using gunicorn. Say,
gunicorn -b 127.0.0.1:4000 app:app
. Routed to/api
.Configure nginx to reverse proxy to gunicorn. Given in the code.
Hope this at least gets you going.