RecipeAppNgrx

The link to working RecipeAppNgrx.

Table of contents

• The description of the project
• Helpful sources used for the project
• How to install and use
• To generate and publish docker images for production

The description of the project

The goal of developing this project was to become familiar and confident in work with ngrx and ngrx-data.

This project also uses:

• Angular Material. It's implemented custom css-theme and used lots of modules from this library
• Angular Layout.

Also, there's the backend part written by means of TypeScript. The backend work relies on these libraries:

• Express.js.
• Mongoose.js.
• Winston.

The project is tested. The frontend part is tested by means of Jasmine. The backend part is tested by means of Jest and Supertest.

The major toolkit for building the project is NRWL.

Features

Following the idea provided by NRWL team, the project is structured into apps and libraries. It has 2 apps and 10 libraries. Apps are these:

• recipe-app. It contains just AppModule and AppComponent.
• api. It includes the whole backend.

The list of libraries which are reusable modules includes:

• auth-state. This is ngrx part to manage the authorization.
• auth-login-ui. This is UI to log in.
• rcp-entity-store. This is the main library for ngrx-data. It imports all modules which use ngrx-data. In this case, imported module is RecipeStateModule. ngrx-data doesn't provide method forChild() for any Feature Module, so it's needed to register Feature Modules in rcp-entity-store. Also it's needed to import into rcp-entity-store CustomEntityCollectionService, metadata for EntityDataService and metaReducers.
• recipe-state. This is ngrx part to manage the saving, updating, loading and filtering recipes. It can filter recipes by user and category looking at the URL, which is the source of truth in this case. Effects are waiting for ROUTER_NAVIGATION action and update filters in needed case.
• recipe-ui. It provides UI for showing, creating and editing the recipes. Creation and updating of a recipe are possible just for authorized users.
• router-history-state. This is ngrx state containing data about previous and current route. It's used to come to the previous page from login page after signing up.
• core-components. This lib includes PageNotFoundComponent, HeaderComponent and SidenavComponent.
• shared-components. It has FilterComponent and imports lots of Angular Material modules. This lib is useful to many others.
• models. These are different data models used in the project.
• utils. It includes helpful services and functions.

Helpful sources used while the project

NGRX:

• Theory:
  • Ngrx Store (official documentation)
  • Comprehensive Introduction to @ngrx/store
  • Ngrx Store - An Architecture Guide
  • NgRx Entity - Complete Practical Guide
  • Angular Ngrx DevTools: Important Practical Tips
  • Using NgRx 4 to Manage State in Angular Applications
  • NgRx: Patterns and Techniques
  • Angular - Splitter and Aggregation patterns for ngrx/effects
  • NgRx + Facades: Better State Management
  • NgRx: tips & tricks
• Working projects:
  • Angular, NgRx and Angular Material Starter
  • Book Collection NgRx

---

Angular Libraries and helpful articles:

• Angular Material
• The complete guide to Angular Material Themes
• Angular Layout
• Angular Flex-Layout: Flexbox
• How To Build Responsive Layouts With Bootstrap 4 and Angular 6
• Nx NRWL
• Building Full-Stack Applications Using Angular CLI and Nx

---

Backend TypeScript | MEAN:

• Theory:
  • MEAN App Unplugged
  • TypeScript 2 + Express + Mongoose + Mocha + Chai
  • TypeScript: Declaring Mongoose Schema + Model
  • TypeScript: Mongoose Schema
  • Articles about testing Node.js backend
• Working projects:
  • MEAN + Material + Reactive in TypeScript
  • MEAN with Angular 2/5 - User Registration and Login Example & Tutorial
  • Winds - the example of backend

How to install and use

To install this project:

• run git clone https://github.com/vitalii-andriiovskyi/recipe-app-ngrx.git
• run yarn to install packages
• start Docker Desktop
• docker-compose up --build | docker-compose down | docker-compose up -d

To run the api use command ng serve api (now it's done in docker).
To run the recipe-app use command ng serve recipe-app.

To test api:

• docker-compose up -d
• docker-compose exec recipe-api bash
• ng test api

To generate and publish docker images for production

docker build -f dockerfile.production --target mongo-db -t 2467100/recipe-surf-db:latest -t 2467100/recipe-api:version .
docker push 2467100/recipe-surf-db:version
docker push 2467100/recipe-surf-db:latest

to test
docker run 2467100/recipe-surf-db:latest

to build and publish image for api:
nx build api --prod
docker build -f dockerfile.production --target recipe-api -t 2467100/recipe-api:latest -t 2467100/recipe-api:1.0 .
docker push 2467100/recipe-api:1.0
docker push 2467100/recipe-api:latest

to build and publish image for recipe-app:
nx build recipe-app --prod
docker build -f dockerfile.production --target recipe-web -t 2467100/recipe-web:latest -t 2467100/recipe-web:1.0 .
docker push 2467100/recipe-web:1.0
docker push 2467100/recipe-web:latest

to start docker-compose for production on local:
docker-compose -f docker-compose.yml -f docker-compose.prod.yml up or
docker-compose -f docker-compose.yml -f docker-compose.prod.yml up --build

Initial script to deploy the app on AWS LightSail:

curl -o lightsail-compose.sh https://raw.githubusercontent.com/vitalii-andriiovskyi/recipe-app-ngrx/master/lightsail-compose.sh

chmod +x ./lightsail-compose.sh

./lightsail-compose.sh