Skip to content

Starter web application project with Angular Universal frontend and Flask RESTapi backend

License

Notifications You must be signed in to change notification settings

lucksd356/Flask-Angular-Universal-Demo

Repository files navigation

Flask Angular-Universal Demo

This project has not been updated to be compatible with the latest version of Angular Universal.

Starter web application project with Angular Universal frontend and Flask RESTapi backend ngudemo

alt text

Built with components from the following projects

Requirements

  • python 3.6
  • Flask
  • Flask-SQLAlchemy
  • Node.js
  • npm
  • Angular 8
  • Angular Universal 8

Get Started

  • Create a virtual environment for python 3.6+ using either conda or virtualenv
  • Install Flask and other requirements per requirements.txt
  • Install Node.js
  • Clone this repo

git clone --depth 1 https://github.com/lucksd356/Flask-Angular-Universal-Demo.git

  • Change to the download directory and run the Flask app

python runserver.py

  • Create and seed the db (the server must still be running, so open a new terminal window first)

python manage.py create_db && python manage.py seed_db --seedfile ./data/db_items.json

Open a new terminal window, change to the ngclient directory and install dependencies:

npm install

Development (Client-side only rendering)

  • run npm run start which will start ng serve

Production (also for testing SSR/Pre-rendering locally)

npm run build:ssr && npm run serve:ssr - Compiles your application and spins up Node Express to serve your Universal application on http://localhost:4000.

npm run build:prerender && npm run serve:prerender - Compiles your application and prerenders your applications files, spinning up a demo http-server so you can view it on http://localhost:8080 Note: To deploy your static site to a static hosting platform you will have to deploy the dist/browser folder, rather than the usual dist

Additional Notes

  1. Change the host address for Flask RESTapi:

    • Edit target in proxy.config.json
    • Edit the proxy address for the serve:prerender command in package.json
  2. Edit static.paths.ts to specify routes for prerendering