My own Full MEAN stack Starter kit with Ionic Framework and ReactiveX API (ngrx/Store + ngrx/Effects) & GraphQL/REST Server API and many more...
MEAN Ionic NgRx is my own TypeScript Full Stack MongoDB + ExpressJS + Angular + NodeJS.
- 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 HttpModule to work with REST server-side.
Hop is help you to start your project on the right way.
- 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
- Nodemon Latest stable version install in Global
$ npm install -g nodemon
- 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.
- You have to check the Todo before Get Started
- then follow Installation instruction
$ nvm use 7
$ npm install
$ 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)
Tips:
$ npm run helper.cmd
to display allpackage.json
script available with definition- use
killall mongod
orkillall node
to kill all process
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.
$ npm run deploy:server
to deploy server side on heroku$ npm run deploy:client
to deploy client side on GitHub gh-pages
$ npm run docs
- open
./docs/index.html
to read documentation
- 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 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
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.
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:
- get started doc for NodeJS https://devcenter.heroku.com/articles/git
- how to use Heroku with NodeJS & Git https://devcenter.heroku.com/articles/getting-started-with-nodejs
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 themaster
branch. - i will merge it and upd project version soon as possible.
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 http://nicolasfazio.ch