bojidaryovchev / nest-angular

NestJS, Angular 6, Server Side Rendering (Angular Universal), GraphQL, JWT (JSON Web Tokens) and Facebook/Twitter/Google Authentication, Mongoose, MongoDB, Webpack, TypeScript

nest-angular

A fullstack JavaScript project, using technologies from the modern stack, such as:

• NestJS - a JS backend framework providing architecture out of the box with a syntax similar to Angular
• Angular - a JS frontend framework created by Google
• Angular Universal - Angular Server Side Rendering - prerendered crawlable pages
• RxJS - reactive extensions for JavaScript
• Webpack - the ultimate JS bundler - used for the server code since Angular has it under the hood
• MongoDB - a NoSQL database
• Mongoose - MongoDB object modeling designed to work in an asynchronous environment
• TypeScript - superset of JS which compiles to JS, providing compile-time type checking
• Passport - a popular library used to implement JavaScript authentication
• jsonwebtoken - a JavaScript json web tokens implementation by auth0

Running the project

These instructions should be sufficient for one to get the project going on their local machine

Cloning the github repository

To clone the project, run

git clone https://github.com/bojidaryovchev/nest-angular.git

Installing the dependencies

To install the dependencies after you've cloned the project, go to its root folder and run

npm install

Building the Angular application

Before you start the server, you need to build the Angular application. To do so, run

npm run build:universal

Starting the server

Once you have the Angular app built, you can start the server by running

npm run watch:server

Notice that the server uses MongoDB so we need to have a MongoDB instance running so the server can connect to it

Alternative commands

If you need to work on the frontend and backend parts at the same time, you can run

npm run watch

Then, you can go to the Angular dev server at port 4200 and test server requests (to port 1337), we got a proxy to the backend

If you only need to work on the frontend, you can run

npm run watch:client

Alternatively, if you only need to work on the backend, you can run

npm run watch:server

Keeping in mind that you need to have the Angular app built and a mongodb connection established

Instructions

Getting GraphQL to work

Currently there are issues with several packages so even though we have GraphQL implemented, it stays commented out because it doesn't work.. Here are the instructions to make it work:

• Download https://www.dropbox.com/s/7bvht9thbmwt1e5/fixed-apollo-modules.rar?dl=0 - those are the apollo-angular and apollo-angular-link-http modules compiled in commonjs - then go in your node_modules folder and replace your apollo-angular and apollo-angular-link-http modules with these ones
• Download https://www.dropbox.com/s/n0vwfvdmn7wtkj8/fixed-nest-modules.rar?dl=0 - this is the fixed @nestjs/graphql module - there was an error when in combination with Angular Universal which is now fixed - then replace your @nestjs/graphql module with this one
• Open node_modules/@types/ws/index.d.ts and find net.AddressInfo - you will see a type definition of a function: address(): net.AddressInfo | string - change it to address(): string

Now, you can go ahead and uncomment the GraphqlModules on both client/server side and it works decently, I am using it in another project which is a clone of this one and everything works..

Use Social login

Modify with your application credentials:

• src/server/modules/auth/config/facebook-config.ts
• src/server/modules/auth/config/google-config.ts
• src/server/modules/auth/config/twitter-config.ts

To use it in mobile application with Facebook-token integration (Facebook App), use /api/auth/facebook/token endpoint.

nest-angular's Issues

How can i add some fields in register?

Actually the Register module is working with passports usernameOrEmail and Password, how can i add firstName, lastName (i edited the models, the interfaces and validations)

Debugging

Any idea how to debug such an application? I am using VSCode. Can the same process debug the server and client code?

Production release

I'm on production release but webpack isn't working, can you tell us how can we build in production mode.. thank you in advance

Auth Related Questions

I'm submitting a...

[ ] Regression 
[ ] Bug report
[ ] Feature request
[ ] Documentation issue or request
[x] Question 

First, thank for your sharing this code. There are very few good examples of auth with NestJS, and so I was grateful to find this one - which seems very nicely implemented.

In looking through the code, I had some questions to help me understand the choices.

Questions

• Unless I have missed something, there is a lot of custom auth code in auth.service.ts. It looks like this is used instead of calling passport.authenticate('facebook-token'), which is the documented approach. Is this approach taken for a specific reason?
• What was the reason for using 'passport-facebook-token' strategy/package over the 'passport-facebook' strategy/package published by the author of Passport.js? (same for twitter)
• Have you considered any code to mitigate CRSF attacks, or is there something about this implementation that already mitigates this?
• What was the reason for using Express Middleware directly instead of through the Nest Middleware?
• What was the reason you decided to use custom JOI validation instead of the pipe based NestJs Object Schema Validation

Thanks for any answers.

How do I run this on a server?

I am running npm run build with NODE_ENV=production to build out the production build. If I run the node dist/server/main.js express doesn't work. Is there any documentation around this?

p.s.
If I run node bin/server.bundle.js I get an error that throw new Error("[HMR] Hot Module Replacement is disabled.");

compromised npm package event-stream in use

trying to build from source - my AV detected a malicous part, event-stream with the package flatmap-stream is in use -> https://medium.com/intrinsic/compromised-npm-package-event-stream-d47d08605502

-- [email protected] -- [email protected]
-- [email protected] -- [email protected]

Add documentation to code and readme

I find the project really useful, the stack is very good for making scalable projects easily. It took some time however to get the hang of it since I'm not very experienced with nest. I think it will help other users start their projects right away with some sort of documentation similar to https://github.com/sahat/hackathon-starter

Any update for graphql?

Hi,

Can we use graphql with NestJs + Angular Universal?

angular build error

First, thanks @bojidaryovchev for this project, this is really nice.

However, I'm going through the commands in the README, and I'm getting this error building the angular client.

I'm running node v10.3.0 and npm 6.1.0

$ npm run build:universal

[email protected] build:universal /.../nest-angular
ng build --prod && ng run nest-angular:server

Date: 2018-06-05T02:11:49.883Z
Hash: db74eca7defd6abb3323
Time: 10524ms
chunk {0} runtime.6afe30102d8fe7337431.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.67d1d24c839399719958.css (styles) 170 kB [initial] [rendered]
chunk {2} polyfills.4052eade0562922bb912.js (polyfills) 128 bytes [initial] [rendered]
chunk {3} main.967b3b53a13984a78c42.js (main) 128 bytes [initial] [rendered]

ERROR in node_modules/@types/ws/index.d.ts(179,24): error TS2694: Namespace '"net"' has no exported member 'AddressInfo'.
src/client/app/app.graphql.module.ts(46,57): error TS2345: Argument of type 'DocumentNode' is not assignable to parameter of type 'DocumentNode'.
Types of property 'loc' are incompatible.
Type 'Location' is not assignable to type 'Location'. Two different types with this name exist, but they are unrelated.
Types of property 'startToken' are incompatible.
Type 'Token' is not assignable to type 'Token'. Two different types with this name exist, but they are unrelated.
Types of property 'prev' are incompatible.
Type 'Token' is not assignable to type 'Token'. Two different types with this name exist, but they are unrelated.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:universal: ng build --prod && ng run nest-angular:server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build:universal script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

How its works?

Hi, i tried to run your repo but i'm getting errors (server isn't running)., can you show me how to run please