nest-angular - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #react #linux #docker #macos #windows #cli #kubernetes #vue #awesome-list #security #ios #mcp

nest-angular

(★ 331)

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

파일 탐색기

최종 버전 다운로드 (.zip)

- app.e2e-spec.ts
- app.po.ts
- protractor.conf.js
- tsconfig.e2e.json
- jwt.private.key
- jwt.public.key
- - favicon.ico
  - index.html
  - karma.conf.js
  - main.server.ts
  - main.ts
  - polyfills.ts
  - styles.scss
  - test.ts
  - tsconfig.browser.json
  - tsconfig.json
  - tsconfig.server.json
  - tsconfig.spec.json
  - typings.d.ts
- - app.module.ts
  - main.ts
  - polyfills.ts
  - server.constants.ts
  - tslint.json
- - shared.constants.ts
.editorconfig
.gitignore
angular.json
LICENSE
package-lock.json
package.json
proxy.conf.json
README.md
tsconfig.json
tslint.json
webpack.config.js

# 설치 가이드

1. 코드 내려받기

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

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd nest-angular

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm run build:universal

배포용으로 코드를 최적화해서 빌드 파일을 생성합니다.

npm run watch:server

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm run watch

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm run watch:client

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# nest-angular

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

* [NestJS](https://github.com/nestjs/nest) - a JS backend framework providing architecture out of the box with a syntax similar to Angular
* [Angular](https://github.com/angular/angular) - a JS frontend framework created by Google
* [Angular Universal](https://github.com/angular/universal) - Angular Server Side Rendering - prerendered crawlable pages
* [RxJS](https://github.com/Reactive-Extensions/RxJS) - reactive extensions for JavaScript
* [Webpack](https://github.com/webpack/webpack) - the ultimate JS bundler - used for the server code since Angular has it under the hood
* [MongoDB](https://github.com/mongodb/mongo) - a NoSQL database
* [Mongoose](https://github.com/Automattic/mongoose) - MongoDB object modeling designed to work in an asynchronous environment
* [TypeScript](https://github.com/Microsoft/TypeScript) - superset of JS which compiles to JS, providing compile-time type checking
* [Passport](https://github.com/jaredhanson/passport) - a popular library used to implement JavaScript authentication
* [jsonwebtoken](https://github.com/auth0/node-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.