Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/realpacific/fullstack-cicd-automation
NgRx + Forms, Angular Library (w/ Verdaccio as registry) w/ Flask for backend & chat implementation using socket & automated deployment to Heroku from CircleCI + Cypress powered tests
https://github.com/realpacific/fullstack-cicd-automation
angular chat-application cicd circleci cypress flask heroku ngrx reactive-forms typescript
Last synced: about 2 months ago
JSON representation
NgRx + Forms, Angular Library (w/ Verdaccio as registry) w/ Flask for backend & chat implementation using socket & automated deployment to Heroku from CircleCI + Cypress powered tests
- Host: GitHub
- URL: https://github.com/realpacific/fullstack-cicd-automation
- Owner: realpacific
- Created: 2019-11-26T10:45:44.000Z (about 5 years ago)
- Default Branch: dev
- Last Pushed: 2023-01-07T16:09:01.000Z (about 2 years ago)
- Last Synced: 2023-03-02T22:26:28.723Z (almost 2 years ago)
- Topics: angular, chat-application, cicd, circleci, cypress, flask, heroku, ngrx, reactive-forms, typescript
- Language: TypeScript
- Homepage: https://prashant-ng-app.herokuapp.com
- Size: 1.42 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular + Flask + CircleCI + Heroku
[](https://circleci.com/gh/realpacific/fullstack-cicd-automation)
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](https://prashant-flask-app.herokuapp.com)
* [Frontend](https://prashant-ng-app.herokuapp.com)
---
### Installing ngrx libraries:
```bash
npm install @ngrx/core @ngrx/effects @ngrx/store @ngrx/store-devtools ngrx-store-freeze
```
### Setting up custom library
```bash
ng new --create-application=false
ng generate library --prefix=rpa
ng generate application
ng build --watch
```
### Packaging custom library
To create compressed file for publishing:
```bash
ng build
cd dist/
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:
```bash
docker run -it --rm --name verdaccio -p 4873:4873 verdaccio/verdaccio
npm adduser --registry http://localhost:4873
cd
npm publish --registry=http://localhost:4873
npm install dope-table --registry=http://localhost:4873
```
### Starting Flask Backend
```bash
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/
DELETE /companies/
POST /companies -d {name: }
```
### CircleCI Local Installation
```bash
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](https://medium.com/angular-in-depth/creating-a-library-in-angular-6-87799552e7e5)
* [Angular Workspace: No Application for You!](https://medium.com/angular-in-depth/angular-workspace-no-application-for-you-4b451afcc2ba)
* [NgRx Official Site](https://ngrx.io/guide/store)
* [NgRx: Action Creators redesigned](https://medium.com/angular-in-depth/ngrx-action-creators-redesigned-d396960e46da)
* [Chatbot (used as git submodules)](https://github.com/ahmadfaizalbh/Chatbot)
* [How to get started with Cypress](https://medium.com/angular-in-depth/get-started-with-cypress-d6ac4b910605)
* [How to build a CI/CD pipeline with Docker](https://circleci.com/blog/continuous-deployment-with-circleci-orbs-automate-deploys-to-aws-gcp-k8s-and-more/)
* [Container Registry & Runtime (Docker Deploys)](https://devcenter.heroku.com/articles/container-registry-and-runtime)
* [Running NGINX on Heroku with Docker](https://ntotten.com/2018/07/22/nginx-on-heroku/)