fazionico / mean-ionic-ngrx

Monorepo as Microservices: Full MEAN stack with Angular 7, Ionic 4 and ReactiveX API (ngrx/Store + ngrx/Effects) + i18n/ngx-translate + Express NodeJS REST API servers micro-services + JWT Authentication + UnitTest/e2e exemple + Travis + DevOps scripts and many more...

MEAN Ionic NgRx Lazy Load + REST Server API as Microservices Architecture

My own Full MEAN stack Starter kit based on Microservice architecture with Ionic 4 and ReactiveX API (ngrx/Store + ngrx/Effects) and many more tools...

Overview

refact in proccess...

MEAN Ionic NgRx is a TypeScript Full Stack Starter with MongoDB + ExpressJS + Angular + NodeJS + Ionicframework all builded as microservices architecture managed inclued by LernaJS and many others funny tools.

• Front-End: Angular + Ionic 4 to provide multi platform application.
• Back-End: Express REST API managed by API Gateway to request correct microservices.

It's a simple todo application exemple with REST server-side for Users authentification with JWT. Front side is building with Angular and Ionicframework 4 and using ReactiveX API (ngrx/Store + ngrx/Effects) to provide a better and simply datas management + ngx-translate to internationalize languages + Angular HttpClientModule to work with REST server-side.

Hop is help you to start your project on the right way.

Prerequisites

• NVM - Download & Install Node Version Manage
• NodeJS 10 - Download & Install Node.js and the npm package manager with NVM $ nvm install node 10.
• MongoDB - Download & Install MongoDB, and make sure it's running on the default port (27017).
• Typescript Latest stable version install in Global $ npm install -g typescript
• Ionic 4 Latest version install in Global $ npm install -g ionic
• TypeDoc - Latest stable version install in Global $ npm install -g typedoc
• LernaJS - Latest stable version install in Global $ npm install -g lerna
• Karma - Latest stable version install in Global $ npm install -g karma-cli
• Protractor - Latest stable version install in Global $ npm install -g protractor && webdriver-manager update

• Good knowledge of ReactiveX API & NgRx
• Redux DevTools Extension - Install Plugin for Chrome - Debugging application's state changes & provides power-ups for your Redux development workflow.

• And you should also have git installed to a better working flow.

Get Started

• You have to check the Todo before Get Started
• then follow Installation instruction

Installation

• $ nvm use 10
• $ npm install

Start

• $ npm run dev to start Front-End+Back-End in development mode

• open browser at http://localhost:4200

Tips:

• use killall mongod or killall node to kill all process

Build

comming soon...

Deploy

comming soon...

Documentations

• $ npm run docs
• open ./docs/index.html to read documentation

Server REST API Endpoints

• server dev runing on http://localhost:3000
• server prod runing on http://YOUR_HOST (or https)

TODOS Endpoints

  path: http://localhost:3000/todos
  autenticate: false
  methode: $_GET / $_POST

  path: http://localhost:3000/todos/:id
  autenticate: false
  methode: $_GET / $_POST / $_DELETE


AUTH Endpoints

  path: http://localhost:3000/auth
  autenticate: false
  methode: $_POST

  path: http://localhost:3000/auth/isauth
  autenticate: false/true
  methode: $_GET

  path: http://localhost:3000/auth/signin
  autenticate: false
  methode: $_POST


USERS Endpoints

  path: http://localhost:3000/users
  autenticate: true
  methode: $_GET


  path: http://localhost:3000/users/:id
  autenticate: true
  methode: $_GET

Documentation

App Documentations is generate by typeDoc. Use the following cmd to generate documentation

• $ npm run docs will generate Angular Application documentation and open the index doc in browser.

Todo before get Started

Important: You have to update/change/replace mongod npm script into main ./package.json Update mongod $path with your own path (or run $npm run mongod to check if mongo starting correctly) and replace Git repository link into tools/tasks/release.project.sh line 50 by your'own.

Git Workflow

• To have better development workflow, using Git Flow model working.
• To dynamicly add commit to CHANGELOG.md, add <core|update|features|fix>: at the begin of the commit. Script search : to generate CHANGELOG.md
• To disable auto generate CHANGELOG.md, go to tools/tasks/release.project.sh and comment all changelog() content function or comment changelog call function in line 88 as # changelog.

Contribution

Feel free to contrib to my stack.

• clone/fork project
• $ git checkout -b YOUR_BRANCH
• do your work...
• pass test...
• pull request with your branch on the dev branch / or submit small fix on the master branch.
• i will merge it and upd project version soon as possible.

About author

Hi, i'm a Front-end developper living in Geneva Switzerland and i build hybrid mobile & web applications for almost 15 years. You can follow me on Twitter @FazioNico or checkout my own website https://nicolasfazio.ch

mean-ionic-ngrx's Issues

npm run release:major|minor|etc... stop with error

Bug:
bash tools/tasks/release.project.sh not working propely any time.. Some time it meke an error :-(
This is the message i get:

> bash tools/tasks/release.project.sh minor
M       package.json

Switched to a new branch 'release/0.2.0'
fatal: Unable to create '/XXXXXXXX/mean-ionic-ngrx/.git/index.lock': File exists.

If no other git process is currently running, this probably means a git process crashed in this repository earlier. 
Make sure no other git process is running and remove the file manually to continue.

error: Your local changes to the following files would be overwritten by checkout:
        config.xml
        package.json

Please, commit your changes or stash them before you can switch branches.
Aborting
Already up-to-date.

And i see config.xml + package.json + README.md not add to git stage and script proccess stop on release/v0.2.0 branch.

I'm not good with bash programing.. if someone can check my files and fix, it will be very nice.

apollo-angular-link-http: Build error

Would love to try out your stack but can't get it working. Build is failing with fresh install within the apollo-angular-link-http package. After trying to workaround for an hour, I give up. I don't know your code well enough to efficiently troubleshoot.

Easiest way to reproduce is fresh install and run npm run docs. I get the following error:

$ npm run docs

> [email protected] docs /Users/briandombrowski/Dev/Ionic/mean-ionic-ngrx
> npm run typedoc -- --out docs/ --exclude '**/*+(e2e|spec|index).ts' ./src/  && open docs/index.html


> [email protected] typedoc /Users/briandombrowski/Dev/Ionic/mean-ionic-ngrx
> typedoc "--out" "docs/" "--exclude" "**/*+(e2e|spec|index).ts" "./src/"


Using TypeScript 2.4.1 from /Users/briandombrowski/Dev/Ionic/mean-ionic-ngrx/node_modules/typedoc/node_modules/typescript/lib
Error: /Users/briandombrowski/Dev/Ionic/mean-ionic-ngrx/node_modules/apollo-angular-link-http/HttpLink.d.ts(5)
 Class 'HttpLinkHandler' incorrectly extends base class 'ApolloLink'.
  Types of property 'request' are incompatible.
    Type '(op: Operation) => Observable<ExecutionResult>' is not assignable to type '(operation: Operation, forward?: NextLink) => Observable<FetchResult<Record<string, any>, Record<...'.
      Type 'Observable<ExecutionResult>' is not assignable to type 'Observable<FetchResult<Record<string, any>, Record<string, any>>>'.
        Type 'ExecutionResult' is not assignable to type 'FetchResult<Record<string, any>, Record<string, any>>'.
          Type 'ExecutionResult' is not assignable to type 'ExecutionResult'. Two different types with this name exist, but they are unrelated.
            Types of property 'errors' are incompatible.
              Type 'GraphQLError[]' is not assignable to type 'GraphQLError[]'. Two different types with this name exist, but they are unrelated.
                Type 'GraphQLError' is not assignable to type 'GraphQLError'. Two different types with this name exist, but they are unrelated.
                  Types of property 'nodes' are incompatible.
                    Type 'ASTNode[]' is not assignable to type 'ASTNode[]'. Two different types with this name exist, but they are unrelated.
                      Type 'ASTNode' is not assignable to type 'ASTNode'. Two different types with this name exist, but they are unrelated.
                        Type 'DocumentNode' is not assignable to type 'ASTNode'.
                          Type 'DocumentNode' is not assignable to type 'DocumentNode'. Two different types with this name exist, but they are unrelated.
                            Types of property 'definitions' are incompatible.
                              Type 'DefinitionNode[]' is not assignable to type 'DefinitionNode[]'. Two different types with this name exist, but they are unrelated.
                                Type 'DefinitionNode' is not assignable to type 'DefinitionNode'. Two different types with this name exist, but they are unrelated.
                                  Type 'TypeExtensionDefinitionNode' is not assignable to type 'DefinitionNode'.
                                    Type 'TypeExtensionDefinitionNode' is not assignable to type 'DirectiveDefinitionNode'.
                                      Types of property 'kind' are incompatible.
                                        Type '"TypeExtensionDefinition"' is not assignable to type '"DirectiveDefinition"'.

npm ERR! Darwin 17.5.0
npm ERR! argv "/Users/briandombrowski/.nvm/versions/node/v7.10.1/bin/node" "/Users/briandombrowski/.nvm/versions/node/v7.10.1/bin/npm" "run" "typedoc" "--" "--out" "docs/" "--exclude" "**/*+(e2e|spec|index).ts" "./src/"
npm ERR! node v7.10.1
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 4
npm ERR! [email protected] typedoc: `typedoc "--out" "docs/" "--exclude" "**/*+(e2e|spec|index).ts" "./src/"`
npm ERR! Exit status 4
npm ERR! 
npm ERR! Failed at the [email protected] typedoc script 'typedoc "--out" "docs/" "--exclude" "**/*+(e2e|spec|index).ts" "./src/"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the mean-ionic-ngrx package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     typedoc "--out" "docs/" "--exclude" "**/*+(e2e|spec|index).ts" "./src/"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs mean-ionic-ngrx
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls mean-ionic-ngrx
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/briandombrowski/.npm/_logs/2018-04-16T17_26_43_297Z-debug.log

npm ERR! Darwin 17.5.0
npm ERR! argv "/Users/briandombrowski/.nvm/versions/node/v7.10.1/bin/node" "/Users/briandombrowski/.nvm/versions/node/v7.10.1/bin/npm" "run" "docs"
npm ERR! node v7.10.1
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 4
npm ERR! [email protected] docs: `npm run typedoc -- --out docs/ --exclude '**/*+(e2e|spec|index).ts' ./src/  && open docs/index.html`
npm ERR! Exit status 4
npm ERR! 
npm ERR! Failed at the [email protected] docs script 'npm run typedoc -- --out docs/ --exclude '**/*+(e2e|spec|index).ts' ./src/  && open docs/index.html'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the mean-ionic-ngrx package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run typedoc -- --out docs/ --exclude '**/*+(e2e|spec|index).ts' ./src/  && open docs/index.html
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs mean-ionic-ngrx
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls mean-ionic-ngrx
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/briandombrowski/.npm/_logs/2018-04-16T17_26_43_322Z-debug.log

FYI, I get this error with npm i
npm WARN [email protected] requires a peer of graphql@^0.11.2 but none was installed.

I tried upgrading apollo-angular and apollo-anglue-link-http and this warning went away. The critical error persists though.

Here is a snapshot of what the browser shows when npm serve: