How to structure an Angular 2 front end app along with Flask back-end api? How to structure an Angular 2 front end app along with Flask back-end api? flask flask

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

  1. 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.

  2. Serve your flask backend using gunicorn. Say, gunicorn -b 127.0.0.1:4000 app:app. Routed to /api.

  3. Configure nginx to reverse proxy to gunicorn. Given in the code.

Hope this at least gets you going.