🚀Angular 8 + GraphQL + NestJS + Postgres Starter Kit

License: MIT License

Dockerfile 0.31% JavaScript 1.31% TypeScript 81.82% HTML 14.80% CSS 1.76%

angular-graphql-nestjs-postgres-starter-kit's Introduction

🚀Angular 8 + GraphQL + NestJS + Postgres Starter Kit

A full-stack starter kit with Angular 8, GraphQL, Apollo, NestJS and Postgres.

Starting a new web app can be hard. Choosing the right technologies, architecting the foundation and developing the core of an application can take a lot of time. Setting up a back-end and front-end requires a substantial amount of work. Furthermore, if you don't do things correctly, it can create technical debt, painless refactoring, and maintenance hell. We take care of all the tedious, mundane setup process for you.

This stater kit provides you with a kick start to your project by providing a scalable, modular web app with features like sign up and log in, user management, easy database configuration and more. We carefully curated cutting-edge technologies for a full-stack application. View the full list of features below.

Happy Coding :)

Features

Angular 8.X (w/ TypScript)
GraphQL
NestJS server
TypeORM
Apollo
Bootstrap 4
Postgres
Authentication w/ JWT and local storage
Authorization
User Management
Entity Management
E2E testing
Docker Compose

Requirements
Getting Started
Installation
Client
Server
Contributing
Cheat Sheets
TODO

⬆️ Getting Started

⬆️ Requirements

Follow this guide to setup your mac dev environment.

Node
NPM
Postgres
Docker (optional)

⬆️ Installation

Fork the repo
git clone git@https://github.com/<yourusername>/angular-graphql-express-postgres-starter-kit.git
cd angular-graphql-express-postgres-starter-kit
git remote add upstream git@https://github.com/alexitaylor/angular-graphql-express-postgres-starter-kit.git

⬆️ Client

cd client
npm install
npm start
visit http://localhost:4200

Get started with these tasks:

$ npm start: start dev server with live reload on http://localhost:4200
$ npm run build: build web app for production
$ npm test: run unit tests in watch mode for TDD
$ npm run test:ci: lint code and run units tests with coverage
$ npm run e2e: launch e2e tests
$ npm run docs: show docs and coding guides
$ npm run prettier: format your code automatically

⬆️ Server

Installation

$ cd server/project
$ npm install

Create Database

Required only initial setup
Find default Postgres Database Configs by navigating to server/project/ormconfig.json file
Connect to Postgres shell: psql postgres
Create database:

postgres=# create database nest_graphql_test;
CREATE DATABASE

If postgres user does not exist: 1. Create a new user and 2. Change user's role

Seed Database

Run the following command to seed your database with default and random generated data:

$ npm run seedData

WARNING: Running this file will DELETE ALL data in your database and re-generate and insert new, random.
BE CAREFUL running this command in production env. It will delete all production data. The script will check if the environment you're running in is production or not by checking server/project/src/environments/environment.ts file configs. If environment.production config is set to true, then the seeding process will only generate default roles and 2 default users. This is useful when first setting up your production environment.

Running the server

# development
$ npm run start

# watch mode
$ npm run start:dev

# production mode
$ npm run start:prod

Visit http://localhost:4000/graphql for GraphQL playground
Getting Started with GraphQL visit here

Required for Docker

Fill out .env file with postgres env variables

bash $ touch .env

POSTGRES_PASSWORD=supersecret
POSTGRES_USER=user
POSTGRES_DB=db

DATABASE=db
DATABASE_USER=user
DATABASE_PASSWORD=supersecret
DATABASE_HOST=postgres
DATABASE_PORT=5432

⬆️ Contributing

Anyone is welcome to contribute, however, if you decide to get involved, please take a moment to review the guidelines:

⬆️ Cheat Sheets

⬆️ TODO:

Implement TypeORM migrations and default data on initial setup
Write Docker setup and configuration README
More tests
Entity Generator (able to create BE and FE models, GraphQL queries/mutations and some FE boilerplate code from an defined entity.

angular-graphql-nestjs-postgres-starter-kit's People

Contributors

Stargazers

Watchers

angular-graphql-nestjs-postgres-starter-kit's Issues

Upgrade from Angular 7 to 8

Angular v8.0.0 released May 28, 2019.

Angular 8 New Features:

TypeScript 3.4
Ivy
Bazel support
Support for web workers

For more info about v8 here.

QueryFailedError: column cnst.consrc does not exist error when seeding/running server with Postgres12

Trying to seed the database or start the backend server gives the following error.

I believe it is related to the Postgres version. Issue is introduced after Postgres 11.5.

QueryFailedError: column cnst.consrc does not exist
    at new QueryFailedError (/Users/johannott/Documents/Dev/dev/angular-postgres-starter/server/project/src/error/QueryFailedError.ts:9:9)
    at Query.callback (/Users/johannott/Documents/Dev/dev/angular-postgres-starter/server/project/src/driver/postgres/PostgresQueryRunner.ts:178:30)
    at Query.handleError (/Users/johannott/Documents/Dev/dev/angular-postgres-starter/server/project/node_modules/pg/lib/query.js:142:17)
    at Connection.connectedErrorMessageHandler (/Users/johannott/Documents/Dev/dev/angular-postgres-starter/server/project/node_modules/pg/lib/client.js:211:17)
    at Connection.emit (events.js:182:13)
    at Connection.EventEmitter.emit (domain.js:442:20)
    at Socket.<anonymous> (/Users/johannott/Documents/Dev/dev/angular-postgres-starter/server/project/node_modules/pg/lib/connection.js:126:12)
    at Socket.emit (events.js:182:13)
    at Socket.EventEmitter.emit (domain.js:442:20)
    at addChunk (_stream_readable.js:283:12)
^C

error: { error: column cnst.consrc does not exist
    at Connection.parseE (/Users/johannott/Documents/Dev/dev/angular-postgres-starter/server/project/node_modules/pg/lib/connection.js:604:11)
    at Connection.parseMessage (/Users/johannott/Documents/Dev/dev/angular-postgres-starter/server/project/node_modules/pg/lib/connection.js:401:19)
    at Socket.<anonymous> (/Users/johannott/Documents/Dev/dev/angular-postgres-starter/server/project/node_modules/pg/lib/connection.js:121:22)
    at Socket.emit (events.js:182:13)
    at Socket.EventEmitter.emit (domain.js:442:20)
    at addChunk (_stream_readable.js:283:12)
    at readableAddChunk (_stream_readable.js:264:11)
    at Socket.Readable.push (_stream_readable.js:219:10)
    at TCP.onStreamRead [as onread] (internal/stream_base_commons.js:94:17)
  name: 'error',
  length: 196,
  severity: 'ERROR',
  code: '42703',
  detail: undefined,
  hint:
   'Perhaps you meant to reference the column "cnst.conkey" or the column "cnst.conbin".',
  position: '194',
  internalPosition: undefined,
  internalQuery: undefined,
  where: undefined,
  schema: undefined,
  table: undefined,
  column: undefined,
  dataType: undefined,
  constraint: undefined,
  file: 'parse_relation.c',

Uncaught Error: Unexpected value 'undefined' exported by the module 'SharedModule'

Hello,
I have forked the repository and configured it successfully but when I'm running frontend project, I am getting the following error at startup,

Uncaught Error: Unexpected value 'undefined' exported by the module 'SharedModule'
    at syntaxError (compiler.js:2420)
    at compiler.js:21113
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:21111)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary (compiler.js:21009)
    at compiler.js:21096
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:21074)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:27234)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:27215)

NPM install fails - bad github reference

23845 error /usr/local/bin/git ls-remote -h -t git://github.com/lenchvolodymyr/flat.git
23845 error
23845 error fatal: unable to connect to github.com:
23845 error github.com[0: 192.30.255.113]: errno=Operation timed out
23845 error
23845 error
23845 error exited with error code: 128
23846 verbose exit [ 1, true ]

To Reproduce
Steps to reproduce the behavior:

install the repo
type npm install

Expected behavior
should install packages

Shared Packages

Dear @alexitaylor ,

thank you very much for this awesome starter package - it really looks nice. However, i was wondering, if it would be possible to add some kind of shared package (besides the client and server package) that share some common models and interfaces.

This, for example, would reduce the need to maintain the same structures on client and server side. What do you think about this?

All the best

Implement Abstract Class Example

Is your feature request related to a problem? Please describe.
No, but I think this is a good starter project and having an example of abstract class would encourage developers to follow best practice.

Describe the solution you'd like
Just for abstracting Id, dates and active properties, I recommend to have "common entity" folder, there create one abstract class called "base" and other "activeBase".

import {CreateDateColumn, UpdateDateColumn, BaseEntity, PrimaryGeneratedColumn} from 'typeorm';

export abstract class Base extends BaseEntity {
  
  @PrimaryGeneratedColumn('uuid') public id: string;
  @CreateDateColumn() public createdAt?: Date;
  @UpdateDateColumn() public updatedAt?: Date;
}

and

import {Column} from 'typeorm';
import {Base} from "./base.entity";

export abstract class ActiveBase extends Base {
  
    @Column({ default: true })
    isActive: boolean;
}

Finally, User or other entities can extend ActiveBase or Base.

Describe alternatives you've considered

Additional context

What do you think?

Migrate to .graphqlconfig

The graphql.config.json file is deprecated. Migrate to .graphqlconfig.

Client side error: .env has no default export

When I run npm start at the client side, I get this error:

ERROR in environments/environment.ts:6:8 - error TS1192: Module '"/home/Project/tp/client/src/environments/.env"' has no default export.

6 import env from './.env';
~~~
environments/environment.prod.ts:2:8 - error TS1192: Module '"/home/Project/tp/client/src/environments/.env"' has no default export.

2 import env from './.env';
~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Failed to compile.

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: renovate/npm-glob-parent-vulnerability
Error type: Renovate branch is protected
Message: Renovate cannot push to its branch because branch protection has been enabled.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Errored

These updates encountered an error and will be retried. Click on a checkbox below to force a retry now.

Update Apollo GraphQL packages (apollo-cache-inmemory, apollo-client, apollo-link-context, apollo-link-error, apollo-link-ws, apollo-server-express, graphql-tag)
Update angular monorepo (@angular/animations, @angular/common, @angular/compiler, @angular/compiler-cli, @angular/forms, @angular/http, @angular/language-service, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, @angular/service-worker, zone.js)
Update dependency tslint to v5.20.1

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Update dependency class-validator to v0.14.0 [SECURITY]
Update dependency @angular/core to v11 [SECURITY]
Update dependency @nestjs/core to v9 [SECURITY]
Update dependency jsonwebtoken to v9 [SECURITY]
Update dependency karma to v6 [SECURITY]
Click on this checkbox to rebase all open PRs at once

Detected dependencies

docker-compose

docker-compose.yml

dockerfile

client/Dockerfile

node 10-alpine

nginx 1.14.1-alpine

github-actions

.github/workflows/stale.yml

actions/stale v1.1.0

npm

client/package.json

@angular/animations 8.2.0

@angular/common 8.2.0

@angular/compiler 8.2.0

@angular/core 8.2.0

@angular/forms 8.2.0

@angular/http 7.2.15

@angular/platform-browser 8.2.0

@angular/platform-browser-dynamic 8.2.0

@angular/router 8.2.0

@angular/service-worker 8.2.0

@fortawesome/fontawesome-free-webfonts 1.0.9

@ng-bootstrap/ng-bootstrap 5.1.0

@ngx-translate/core 11.0.1

@toverux/ngx-sweetalert2 4.0.0

@types/date-fns 2.6.0

@types/google-libphonenumber 7.4.17

@types/graphql 14.2.3

@types/ws 6.0.2

angulartics2 8.0.0

apollo-angular 1.6.0

apollo-angular-link-http 1.8.0

apollo-cache-inmemory 1.6.2

apollo-client 2.6.3

apollo-link-context 1.0.18

apollo-link-error 1.1.11

apollo-link-ws 1.0.18

bootstrap 4.3.1

core-js 3.1.4

date-fns 1.30.1

google-libphonenumber 3.2.3

graphql 14.4.2

graphql-tag 2.10.1

lodash 4.17.15

rxjs 6.5.2

subscriptions-transport-ws 0.9.16

sweetalert2 8.15.2

zone.js 0.10.1

@angular-devkit/build-angular 0.802.0

@angular/cli 8.2.0

@angular/compiler-cli 8.2.0

@angular/language-service 8.2.0

@biesbjerg/ngx-translate-extract 3.0.2

@ngx-rocket/scripts 4.0.0

@types/jasmine 3.3.16

@types/jasminewd2 2.0.6

@types/lodash 4.14.136

@types/node 12.6.9

codelyzer 5.1.0

hads 2.0.0

htmlhint 0.11.0

https-proxy-agent 2.2.2

husky 3.0.2

jasmine-core 3.4.0

jasmine-spec-reporter 4.2.1

karma 4.2.0

karma-chrome-launcher 3.0.0

karma-cli 2.0.0

karma-coverage-istanbul-reporter 2.1.0

karma-jasmine 2.0.1

karma-junit-reporter 1.2.0

prettier 1.18.2

pretty-quick 1.11.1

protractor 5.4.2

puppeteer 1.19.0

stylelint 10.1.0

stylelint-config-prettier 5.2.0

stylelint-config-recommended-scss 3.3.0

stylelint-config-standard 18.3.0

stylelint-scss 3.9.3

ts-node 8.3.0

tslint 5.18.0

tslint-config-prettier 1.18.0

typescript 3.5.3

server/project/package.json

@nestjs/common 6.5.3

@nestjs/core 6.5.3

@nestjs/graphql 6.4.2

@nestjs/platform-express ^6.5.3

@nestjs/typeorm 6.1.3

@nestjs/websockets 6.5.3

apollo-server-express 2.8.1

bcryptjs 2.4.3

class-validator 0.9.1

faker 4.1.0

graphql 14.4.2

graphql-tools 4.0.5

jsonwebtoken 8.5.1

pg 7.12.0

reflect-metadata 0.1.13

rimraf 2.6.3

rxjs 6.5.2

typeorm 0.2.18

typescript 3.5.3

@nestjs/testing 6.5.3

@types/bcryptjs 2.4.2

@types/express 4.17.0

@types/jest 24.0.17

@types/jsonwebtoken 8.3.2

@types/node 12.7.0

@types/supertest 2.0.8

chalk 2.4.2

jest 24.8.0

nodemon 1.19.1

prettier 1.18.2

reflect-metadata 0.1.13

supertest 4.0.2

ts-jest 24.0.2

ts-loader 6.0.4

ts-node 8.3.0

tsconfig-paths 3.8.0

tslint 5.18.0

Check this box to trigger a request for Renovate to run again on this repository

Update NestJS from v5.x to v6.x

Update to the latest version of NestJS.

NestJS v6.0.0 release March of 2019: https://github.com/nestjs/nest/releases/tag/v6.0.0

angular universal support

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

alexitaylor / angular-graphql-nestjs-postgres-starter-kit Goto Github PK

angular-graphql-nestjs-postgres-starter-kit's Introduction

🚀Angular 8 + GraphQL + NestJS + Postgres Starter Kit

Features

Table of Contents

⬆️ Getting Started

⬆️ Requirements

⬆️ Installation

⬆️ Client

Get started with these tasks:

⬆️ Server

Installation

Create Database

Seed Database

Running the server

Required for Docker

⬆️ Contributing

⬆️ Cheat Sheets

⬆️ TODO:

angular-graphql-nestjs-postgres-starter-kit's People

Contributors

Stargazers

Watchers

Forkers

angular-graphql-nestjs-postgres-starter-kit's Issues

Rate-Limited

Errored

Edited/Blocked

Open

Detected dependencies

Recommend Projects

Recommend Topics

Recommend Org

Jobs