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

Built with components from the following projects

• Ryan Shea's AngularJS + Flask Boilerplate App
• Angular Universal Starter
• Bootstrap Sticky Footer Navbar Template
• ng-bootstrap

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

• Check out the home page at http://localhost:4200

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