Generator-full-stack-api NPM

generator-full-stack-api

RESTful fullstack generator with Angular CLI, Express.js and Mongoose. You can also choose a mongo db embedded driver tungus setting a env variable.

NEWS

For every release there is the features list in CHANGELOG

Embedded mongodb feature release 2.0.0

June 12,2018	Release 2.0.0	available from npm

First Release 1.0.1

June 09,2018	Release 1.0.1	available from npm

NEXT DEVELOPMENTS (checked in progress)

Automatize with a generator the node app using electron and cordova. Refine DTS. Remember CORDOVA README
Add support for docker-compose as generator-api
Add support for security oauth2 as rest-security-example

Generator Installation

First, install Yeoman and generator-angular-api using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-full-stack-api

Then generate your new project:

yo full-stack-api

Run all stack in watching mode

npm run dev

Run npm run dev for a dev server. The browser will load http://localhost:8080/. Wait until the app is built. At any change, the app will automatically rebuild and sync the browser. In this way you run server and front end app concurrently in watching development mode.

Client tasks

To build your angular app you can run:

npm run build.prod

to serving:

npm run client

Run all stack without build frontend code

npm start

With this command you execute the api server loading the client/dist part that you have already built. It's the same to run

node api/index.js

Creating API endpoints

To generate a new API endpoit:

yo full-stack-api:endpoint

After that you may need to reload the server and the router will load dynamically the route.

.env

# Node Server Port
PORT=8000

# Node Server Url
APP_URL=http://localhost:8000/

# BrowserSync Proxy Url
CALLBACK_URL=http://localhost:8080/

# Variable to set compatibility with mongodb
TUNGUS_DB_OPTIONS =  { nativeObjectID: true, searchInArray: true };

# if mongodb is embedded, that is tungus
MONGO_EMBEDDED=true

# MongodDB Url
MONGO_DB_URI=mongodb://localhost:27017/angular-api

Optionally, run the command bellow to generate a fresh .env file.

yo full-stack-api:dotenv

Client Code scaffolding

When you run yo full-stack-api, you can choose to generate the client code compliant with Angular CLI. It is used @angular/cli 1.7.4 for Angular 5.

Back-end

The API was built using Express with MongoDB integration (tungus driver for embedded mode)

For not embedded mode, requires MongoDB installed and running on your machine or externally (Install MongoDB).

So, you can change the mongodb endpoint with the variable inserted in the .env file :

MONGO_DB_URI=mongodb://localhost:27017/angular-api

Else, if you want to use the embedded mode, it's necessary only to insert the variable:

MONGO_EMBEDDED=true

In this way the objects are saved as a file under the config folder.

Api exposed

On default, it is created an users entity with this schema:

const userSchema = new Schema({
		id: {
			type: String,
			required: true
		},
		username: {
			type: String,
			required: true
		},
		email: {
			type: String
		},
		firstname: {
			type: String,
			required: true
		},
		lastname: {
			type: String,
			required: true
		}
	});

All CRUD endpoint operations are:

api/users : Get Request that returns all users entities created (empty collection object if nothing exists)
api/users : Post Request that creates a user with a request mapping its fields. On success it returns the user created.
api/users/{id} : Get Request that returns an user entity with the specified id (else 404 status if not exists)
api/users/{id} : Delete Request that deletes an user entity with the specified id. On success it returns the 204 status else 404 .
api/users/{id} : Put Request that updates the user with a specified id according your request fields. On success it returns the 204 status else 404 .

You can generate another entity and endpoint with:

yo full-stack-api:endpoint

So you will have every previous CRUD operation endpoints with the initial suffix api/entity-name . After this, you have only to change under api/model/entity-name/schema.js the fields of your document.

Main Packages

Name	Version	Docs	Description
express.js			Minimalist web framework for Node.js
mongoose			Elegant MongoDB object modeling for Node.js
body-parser			Node.js body parsing middleware
morgan			HTTP request logger middleware for node.js
bluebird			Bluebird is a fully featured promise library with focus on innovative features and performance
dotenv			Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.
tungus			Mongoose driver for TingoDB embedded database .

File tree

├── client
│   ├── src     
│   │   ├──app
│   │   │   ├── app.component.css
│   │   │   ├── app.component.html
│   │   │   ├── app.component.spec.ts
│   │   │   ├── app.component.ts
│   │   │   ├── app.module.ts
│   │   │ 
│   │   ├── assets
│   │   ├── environments
│   │   │   ├── environment.prod.ts
│   │   │   └── environment.ts
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   ├── main.ts
│   │   ├── polyfills.ts
│   │   ├── styles.css
│   │   ├── test.ts
│   │   ├── tsconfig.app.json
│   │   ├── tsconfig.spec.json
│   │   └── typings.d.ts
│   │   
│   │
│   ├── e2e
│   │   ├── app.e2e-spec.ts
│   │   ├── app.po.ts
│   │   └── tsconfig.e2e.json
│   │
│   ├── .angular-cli.json
│   ├── .editorconfig
│   ├── .gitignore
│   ├── karma.conf.js
│   ├── package.json
│   ├── protactor.conf.js
│   ├── README.md
│   ├── tsconfig.json
│   ├── tslint.json
│
├── .gitignore
├── .env
├── gulpfile.js
├── README.md
├── api
│   ├── index.js
│   ├── config
│   │   └── database.js
│   ├── lib
│   │   ├── controller.js
│   │   └── facade.js
│   ├── model
│   │   │
│   │   └── user
│   │       ├── controller.js
│   │       ├── facade.js
│   │       ├── router.js
│   │       └── schema.js   
│   │  
│   └── routes.js