Options
All
  • Public
  • Public/Protected
  • All
Menu

mean-ionic-ngrx

MEAN Ionic NgRx Lazy Load + GraphQL/REST Server API

Build Status dependencies Status devDependencies Status Known Vulnerabilities Version

My own Full MEAN stack Starter kit with Ionic Framework and ReactiveX API (ngrx/Store + ngrx/Effects) & GraphQL/REST Server API and many more...

Overview

MEAN Ionic NgRx is a TypeScript Full Stack Starter with MongoDB + ExpressJS + Angular + NodeJS + Ionicframework and many more tools.

  • Front-End: Ionic Framework to provide multi platform application.
  • Back-End: Express GraphQL API + Express REST API

It's a simple todo application exemple with REST server-side for Users authentification with JWT + GraphQL server-side for request all others datas. Front side is building with Angular and Ionicframework and using ReactiveX API (ngrx/Store + ngrx/Effects) to provide a better and simply datas management + ngx-translate to internationalize languages + using Apollo Client provider to work with GraphQL server-side + 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 7 - Download & Install Node.js and the npm package manager with NVM $ nvm install node 7.
  • 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 3 & Cordova - Latest stable version install in Global $ npm install -g ionic cordova
  • TypeDoc - Latest stable version install in Global $ npm install -g typedoc
  • 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
  • Gulp - Latest stable version install in Global $ npm install -g gulp
  • Heroku - Download & Install latest stable version.
  • 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.
  • Good knowledge of GraphQL language.
  • Good knowledge of Apollo Client & Server Side: Apollo Docs.
  • And you should also have git installed to a better working flow.

Get Started

Installation

  • $ nvm use 7
  • $ npm install

Start

  • $ npm run dev to start Front-End+Back-End in development mode
  • $ npm run prod to start Front-End in production mode (you have to config your production environments variable)
  • open browser at http://localhost:8100

Tips:

  • $ npm run helper.cmd to display all package.json script available with definition
  • use killall mongod or killall node to kill all process

Build

First add selected platform: $ ionic cordova platform add browser|ios|android (one by one). Then you can build each platform with ionic CLI $ ionic build browser|ios|android --prod

And we have the following npm run script ready to use:

  • $ npm run build:browser to build app browser version with development environment variables
  • $ npm run build:browser --prod to build app browser version in Angular Prod mode with production environment variables

If you want, you can add your own build run script.

Deploy

  • $ npm run deploy:server to deploy server side on heroku
  • $ npm run deploy:client to deploy client side on GitHub gh-pages

Documentations

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

Server GraphQL API Endpoints

  • server dev runing on http://localhost:8080/graphql
  • server prod runing on http://YOUR_HOST/graphql (or https)
  • use GraphIQL UI to get full server documentation and many more... open browser with http://localhost:8080/graphiql

Server REST API Endpoints

  • server dev runing on http://localhost:8080/rest
  • server prod runing on http://YOUR_HOST/rest (or https)
TODOS Endpoints

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

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


AUTH Endpoints

  path: http://localhost:8080/rest/auth
  autenticate: false
  methode: $_POST

  path: http://localhost:8080/rest/isauth
  autenticate: false/true
  methode: $_GET

  path: http://localhost:8080/rest/signup
  autenticate: false
  methode: $_POST


USERS Endpoints

  path: http://localhost:8080/rest/users
  autenticate: true
  methode: $_GET


  path: http://localhost:8080/rest/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 line 18 . Update mongod $path with your own path (or run $npm run mongod to check if mongo starting correctly).

To using in production mode:

  • install Heroku CLI
  • create your own Heroku account and init your server project with the following cmd :
    • git checkout master
    • $ heroku create
    • check with $ git remote -v
    • optional: $ git checkout <WORKING_BRANCH>
  • add your own production variable environment into ./environments/production.ts

Heroku docs:

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

Generated using TypeDoc