Angular + Flask + CircleCI + Heroku

This project demonstrates:

• Angular Library
• NgRx
• Flask
• Reactive vs Template-driven forms
• Chat implementation using flask-socketio & Chatbot
• Cypress
• CircleCI + Automated DockerHub publish & Heroku Deployment

What is the purpose of this project?

This project is where I put all the things I want to try out/learn. So this project has no real world purpose. Currently, this project demonstrates backend + frontend + CI/CD. The CI/CD is for CircleCI but uses no CircleCI specific orbs. Hence, except for the schema, the build/test/deploy scripts should hopefully be platform agnostic.

---

Deployment URLs

• Backend
• Frontend

---

Installing ngrx libraries:

npm install @ngrx/core @ngrx/effects @ngrx/store @ngrx/store-devtools ngrx-store-freeze

Setting up custom library

ng new <application-name> --create-application=false
ng generate library <library-name> --prefix=rpa
ng generate application <application-name>
ng build <library-name> --watch

Packaging custom library

To create compressed file for publishing:

ng build <library-name>
cd dist/<library-name>
npm pack
npm publish --registry=http://localhost:4873

Publishing & Installing custom library

This project uses dope-table library which firstly needs to be published locally in Verdaccio. For this, run Verdaccio & point npm to that registry:

docker run -it --rm --name verdaccio -p 4873:4873 verdaccio/verdaccio
npm adduser --registry http://localhost:4873
cd <location-of-compressed-files>
npm publish --registry=http://localhost:4873
npm install dope-table --registry=http://localhost:4873

Starting Flask Backend

cd backend
python3 -m venv ./venv
source venv/bin/activate
pip3 install -r requrements.txt
python3 app.py

Endpoints

GET /companies/reload
GET /companies
GET /companies/<id>
DELETE /companies/<id>
POST /companies -d {name: <company_name>}

CircleCI Local Installation

sudo snap install circleci
sudo snap install docker
sudo snap connect circleci:docker docker
export GITHUB_TOKEN=your-token-here
circleci setup
circleci local execute

---

References

• The Angular Library Series - Creating a Library with Angular CLI
• Angular Workspace: No Application for You!
• NgRx Official Site
• NgRx: Action Creators redesigned
• Chatbot (used as git submodules)
• How to get started with Cypress
• How to build a CI/CD pipeline with Docker
• Container Registry & Runtime (Docker Deploys)
• Running NGINX on Heroku with Docker