thisismydesign / nestjs-starter Goto Github PK

E.g. Sentry

Updating Next from v10 to v11 (#81) introduces built-in ESLint which breaks the build.

Using custom ESLint config for now and disabling eslint during build: https://nextjs.org/docs/api-reference/next.config.js/ignoring-eslint

Issues:

• vercel/next.js#30182
• https://stackoverflow.com/questions/61903950/error-couldnt-find-a-pages-directory-please-create-one-under-the-project-roo
• vercel/next.js#26287

Possible solutions:

• https://nextjs.org/docs/basic-features/eslint#rootdir
• vercel/next.js#30182 (comment)

With Heroku free tiers going away using redis becomes a downside. Maybe there's something like https://github.com/bensheldon/good_job for nest.

Please see this issue and reproduction : kulshekhar/ts-jest#4294

In the https://github.com/thisismydesign/nestjs-starter/blob/master/jest.config.ts#L8 file :

• the line '^.+\\.(t|j)s$': 'ts-jest',
• should be replaced by '^.+\\.ts$': 'ts-jest',

Bit of a noob here, but isn't storing your jwt in client side cookies insecure?

@Get('redirect') @UseGuards(GoogleOauthGuard) async googleAuthRedirect(@Req() req: Request, @Res() res: Response) { const { accessToken } = this.jwtAuthService.login(req.user); res.cookie('jwt', accessToken); return res.redirect('/profile'); }

Isn't this line res.cookie('jwt', accessToken); something we want to avoid? In this article, storing your jwt in a token leaves you vulnerable to XSS attacks and even CSRF attacks (even if the cookie is httponly, which also seems to be common practice).

The same article linked to above recommends storing in memory. I'll be trying this over the next few days, but I may be misguided - perhaps because googleOauth isn't susceptible to these attacks? Currently developing a local strategy off of this repo.

I ran into this problem as I was trying to upload a background video for my website.

Using a typical <video src="/videos/video.webm"></video> on my home page component does not load in the video, even though I can load images in from the same directory using the public directory in my root nextjs folder and the NextJS <Image/> component (as stated in a previous issue, you can't load in a plain <img/> in with this repo. I suspect it has something to do with the build process omitting non jsx components, but I'm still pretty new to this so I could be way off).

In order to get around this issue, I've found this solution - use the next-videos npm package..

Here are the changes I had to make to get this to work:

next.config.js

const withVideos = require('next-videos')

module.exports = withVideos({
  distDir: '../../.next',
});

page.tsx

import React from 'react';
import { NextPage } from 'next';

import styles from '../styles/Home.module.css';

const Index: NextPage<{ data: string }> = (props) => {
  const { data } = props;

  return (
    <div className={styles.container}>
      <div className={styles.hero}>
        <video src={require('../public/videos/video.webm')} autoPlay muted></video>
      </div>
    </div>
  );
};

export default Index;

Hope this helps somebody.

To be able to properly test:

• configure dependabot 31c26e0
• run CI on build image: #37
• release to heroku from ci: #38
• verify docker setup: #39
• rename e2e tests to request tests #44
• add actual e2e tests #40
• separate staging and production deployments afd659d
• add e2e tests for staging afd659d
• make prod deployment conditional on staging e2e tests afd659d
• auto-merge dependabot prs when ci passes 4648692

Hello!

I was wondering if there is a way to package a nest/next app with https://github.com/vercel/pkg

Since both are served with a single server, maybe there is a way to build an executable? I tried looking into it but failed. Was wondering if you had any idea about this.

Cant import images from my assets folder. It is inside client folder. I get this stupid webpack error:

./assets/img/logo.png Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)

I've also added my assets folder to tsconfig.json (inside client) Added this code inside next-env.d.ts from stackoverflow:

declare module "*.png" {
  const value: any;
  export = value;
}

It stops IDE from showing errors in the file but still I can't run the code. Any idea?

Thanks in advance.

First of all thank you for this project as its has saved me a lot of a time and i have learnt a lot from it.

That being said i just cannot figure out to ...

1. Avoid a 404 when i refresh on any route apart from /index ... i understand @get('_next*') captures next routes etc but when we refresh the browser is there any way to avoid the 404

2. As a fall-back if i get a 404 how do i redirect to /index

I'm trying to figure out how to get my home page to show when I go to localhost:3000/, rather than locahlhost:3000/home.

I've tried changing the app.controller to 'api' rather than null to free up the '/' route. Here's my app.controller.ts file:

import { Controller, Request, Get, UseGuards } from '@nestjs/common';

import { AppService } from './app.service';
import { JwtAuthGuard } from './auth/jwt/jwt-auth.guard';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get('api')
  getHello(): string {
    return this.appService.getHello();
  }

  @UseGuards(JwtAuthGuard)
  @Get('private')
  getPrivate(@Request() req) {
    return req.user;
  }
}

And I've changed my @get decorator in view.controller.ts to nothing

import { Controller, Get, Res, Req, UseGuards } from '@nestjs/common';
import { Request, Response } from 'express';
import { parse } from 'url';
import { JwtAuthGuard } from '../app/auth/jwt/jwt-auth.guard';

import { ViewService } from './view.service';

@Controller('/')
export class ViewController {
  constructor(private viewService: ViewService) {}

  async handler(req: Request, res: Response) {
    const parsedUrl = parse(req.url, true);
    await this.viewService
      .getNextServer()
      .render(req, res, parsedUrl.pathname, parsedUrl.query);
  }

  @Get()
  public async showHome(@Req() req: Request, @Res() res: Response) {
    const parsedUrl = parse(req.url, true);
    console.log(parsedUrl)
    const serverSideProps = { dataFromController: '123' };

    await this.viewService
      .getNextServer()
      .render(
        req,
        res,
        parsedUrl.pathname,
        Object.assign(parsedUrl.query, serverSideProps),
      );

  }

  @UseGuards(JwtAuthGuard)
  @Get('profile')
  public async showProfile(@Req() req: Request, @Res() res: Response) {
    await this.handler(req, res);
  }

  @UseGuards(JwtAuthGuard)
  @Get('orders')
  public async indexOrders(@Req() req: Request, @Res() res: Response) {
    await this.handler(req, res);
  }

  @Get('_next*')
  public async assets(@Req() req: Request, @Res() res: Response) {
    const parsedUrl = parse(req.url, true);
    await this.viewService
      .getNextServer()
      .render(req, res, parsedUrl.pathname, parsedUrl.query);
  }
}

Can someone help me understand why this isn't working, and if there's something I can do to make it work?

Thank you!

In production, the build process is run on the ./src/client directory, but while development, tailwind looks for a configuration file in the root of the project ./. So I have to create two almost identical configuration files or import betwen those files.

Do you have a solution for this?

Followed exact "usage" instructions. Can't get it to run.

This was docker-compose up

web-1  | [2/4] Fetching packages...
web-1  | error @angular-devkit/[email protected]: The engine "node" is incompatible with this module. Expected version "^16.14.0 || >=18.10.0". Got "18.8.0"
web-1  | error Found incompatible module.
web-1  | info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

So I ran

yarn install

on the host machine. Uh, no problems. Weird, very weird. Tried docker-compose up again, got:

web-1  | TypeError: (0 , next_1.default) is not a function
web-1  |     at ViewService.onModuleInit (/app/src/server/view/view.service.ts:14:33)
web-1  |     at MapIterator.iteratee (/app/node_modules/@nestjs/core/hooks/on-module-init.hook.js:22:43)
web-1  |     at MapIterator.next (/app/node_modules/iterare/src/map.ts:9:39)
web-1  |     at IteratorWithOperators.next (/app/node_modules/iterare/src/iterate.ts:19:28)
web-1  |     at Function.from (<anonymous>)
web-1  |     at IteratorWithOperators.toArray (/app/node_modules/iterare/src/iterate.ts:227:22)
web-1  |     at callOperator (/app/node_modules/@nestjs/core/hooks/on-module-init.hook.js:23:10)
web-1  |     at callModuleInitHook (/app/node_modules/@nestjs/core/hooks/on-module-init.hook.js:43:23)
web-1  |     at NestApplication.callInitHook (/app/node_modules/@nestjs/core/nest-application-context.js:224:50)
web-1  |     at NestApplication.init (/app/node_modules/@nestjs/core/nest-application.js:98:9)

Okay, obviously it can't use the server method mentioned here, which is what you're doing in the code: https://nextjs.org/docs/pages/building-your-application/configuring/custom-server

Nonetheless, I go visit /home and I see:

web-1  | TypeError: Cannot read properties of undefined (reading 'render')
web-1  |     at ViewController.showHome (/app/dist/src/server/view/view.controller.js:35:13)
web-1  |     at /app/node_modules/@nestjs/core/router/router-execution-context.js:38:29
web-1  |     at processTicksAndRejections (node:internal/process/task_queues:95:5)
web-1  |     at /app/node_modules/@nestjs/core/router/router-execution-context.js:46:28
web-1  |     at /app/node_modules/@nestjs/core/router/router-proxy.js:9:17

Thanks for creating this repo, it's a great starting off point.

I was able to get everything working with Cognito hosted auth pages, and I can access /private and /profile endpoints without issue. But when I try to load the protected graphql operations, in the playground I get an unauthorized error, even when I added the Bearer authorization header.

Any tricks for this? I'm just getting the JWT from the session cooking.

Here is the response.

{
  "errors": [
    {
      "message": "Unauthorized",
      "locations": [
        {
          "line": 9,
          "column": 3
        }
      ],
      "path": [
        "whoAmI"
      ],
      "extensions": {
        "code": "INTERNAL_SERVER_ERROR",
        "exception": {
          "response": {
            "statusCode": 401,
            "message": "Unauthorized"
          },
          "status": 401,
          "message": "Unauthorized",
          "stacktrace": [
            "Error: Unauthorized",
            "    at GqlAuthGuard.handleRequest (/app/node_modules/@nestjs/passport/dist/auth.guard.js:64:30)",
            "    at /app/node_modules/@nestjs/passport/dist/auth.guard.js:48:128",
            "    at /app/node_modules/@nestjs/passport/dist/auth.guard.js:82:24",
            "    at allFailed (/app/node_modules/passport/lib/middleware/authenticate.js:107:18)",
            "    at attempt (/app/node_modules/passport/lib/middleware/authenticate.js:180:28)",
            "    at JwtAuthStrategy.strategy.fail (/app/node_modules/passport/lib/middleware/authenticate.js:302:9)",
            "    at JwtAuthStrategy.JwtStrategy.authenticate (/app/node_modules/passport-jwt/lib/strategy.js:96:21)",
            "    at attempt (/app/node_modules/passport/lib/middleware/authenticate.js:366:16)",
            "    at authenticate (/app/node_modules/passport/lib/middleware/authenticate.js:367:7)",
            "    at /app/node_modules/@nestjs/passport/dist/auth.guard.js:87:3",
            "    at new Promise (<anonymous>)",
            "    at /app/node_modules/@nestjs/passport/dist/auth.guard.js:79:83",
            "    at GqlAuthGuard.<anonymous> (/app/node_modules/@nestjs/passport/dist/auth.guard.js:48:36)",
            "    at Generator.next (<anonymous>)",
            "    at /app/node_modules/@nestjs/passport/dist/auth.guard.js:20:71",
            "    at new Promise (<anonymous>)"
          ]
        }
      }
    }
  ],
  "data": null
}

Appreciate any insights you have 🙏🏼

remote: [3/4] Linking dependencies...
remote: warning " > @nestjs/[email protected]" has unmet peer dependency "apollo-server-core@^2.21.1".
remote: warning "@nestjs/graphql > @nestjs/[email protected]" has unmet peer dependency "class-transformer@^0.2.0 || ^0.3.0 || ^0.4.0".
remote: warning "@nestjs/graphql > @nestjs/[email protected]" has unmet peer dependency "class-validator@^0.11.1 || ^0.12.0 || ^0.13.0".
remote: warning " > [email protected]" has incorrect peer dependency "commander@^5 || ^6".
remote: warning " > [email protected]" has unmet peer dependency "webpack@*".
remote: [4/4] Building fresh packages...
remote: Done in 58.39s.
remote: Removing intermediate container ab58e930838a
remote:  ---> 706fa2085519
remote: Step 5/6 : COPY . /app
remote:  ---> f9cd92c66b01
remote: Step 6/6 : RUN yarn build
remote:  ---> Running in 68a9ab514955
remote: yarn run v1.22.15
remote: $ rimraf dist
remote: $ NODE_ENV=production nest build && cd src/client && next build
remote: Browserslist: caniuse-lite is outdated. Please run:
remote: npx browserslist@latest --update-db
remote: 
remote: Why you should do it regularly:
remote: https://github.com/browserslist/browserslist#browsers-data-updating
remote: info  - Using webpack 4. Reason: future.webpack5 option not enabled https://nextjs.org/docs/messages/webpack5
remote: info  - Checking validity of types...
remote: Attention: Next.js now collects completely anonymous telemetry regarding usage.
remote: This information is used to shape Next.js' roadmap and prioritize features.
remote: You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
remote: https://nextjs.org/telemetry
remote: 
remote: info  - Creating an optimized production build...
remote: Browserslist: caniuse-lite is outdated. Please run:
remote: npx browserslist@latest --update-db
remote: 
remote: Why you should do it regularly:
remote: https://github.com/browserslist/browserslist#browsers-data-updating
remote: info  - Compiled successfully

These are the errors I'm getting when deploying to Heroku. Is there a reason I'm getting so many "unmet peer dependency" issues?

Tried to run docker run -it -v $PWD:/e2e -w /e2e --entrypoint=cypress cypress/included:10.0.3 run --config-file cypress.docker.config.ts as per the README.

Encountered:

Status: Downloaded newer image for cypress/included:10.0.3
WARNING: The requested image's platform (linux/amd64) does not match the detected host platform (linux/arm64/v8) and no specific platform was requested
qemu: uncaught target signal 5 (Trace/breakpoint trap) - core dumped
qemu: uncaught target signal 5 (Trace/breakpoint trap) - core dumped
The Test Runner unexpectedly exited via a close event with signal SIGSEGV

I have this error trying to use Amazon Cognito

web_1 | at Generator.next ()
web_1 | at /app/node_modules/@nestjs/passport/dist/auth.guard.js:20:71
web_1 | at new Promise ()
web_1 | [Nest] 137 - 09/15/2021, 3:26:51 PM [ExceptionsHandler] unauthorized_client +7991ms
web_1 | AuthorizationError: unauthorized_client
web_1 | at CognitoOauthStrategy.OAuth2Strategy.authenticate (/app/node_modules/passport-oauth2/lib/strategy.js:137:25)

in my env I have all configured params

DATABASE_URL=postgres://postgres:@db:5432
JWT_SECRET=secret
JWT_EXPIRES_IN=10d
OAUTH_COGNITO_ID=xxxxxxxxx
OAUTH_COGNITO_SECRET=xxxxxxxxx
OAUTH_COGNITO_REDIRECT_URL=http://localhost:3000/auth/cognito/redirect
OAUTH_COGNITO_DOMAIN=my-app
OAUTH_COGNITO_REGION=eu-central-1
OAUTH_GOOGLE_ID=id
OAUTH_GOOGLE_SECRET=secret
OAUTH_GOOGLE_REDIRECT_URL=http://localhost:3000/auth/google/redirect

What I can be doing wrong?

Can someone please add photos in the readme so potential contributors and users can actually see what the project is/looks like/if it is relevant? Thanks :)

I downloaded the code and ran as it said in the docs and get the following error, I appreciate the help:

psql: error: connection to server on socket "/var/run/postgresql/.s.PGSQL.5432" failed: FATAL: database "database" does not exist

Add frontend translations via next-i18next

As recommended the following should work for a catch-all route that doesn't break graphql:

@Get("/:path((?!graphql$))*")

Follow-up of #52 and #53

In the GraphQL Playground (/graphql) queries don't work because presumably cookies are not sent.

Following up on my previous issue, I'm now seeing a Heroku deployments failing for another reason. It seems that the use of decorators is throwing Heroku off and it doesn't know what to do with it.

Is there a Typescript config or something that needs to be set during deployment @thisismydesign?

Hi, I've been getting this error in the eslint config from the client side of the project.

I'm using Webstorm, but when using VSCode it throws this error when building the project (it builds successfully though)

Any ideas? The .eslintrc.js file contains the following (the same as this repo src/client/.eslintrc.js file):

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'src/client/tsconfig.json',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  root: true,
  env: {
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
  },
};

Hi, I cloned the repository and ran yarn and then yarn start and then I got this error:

$ yarn start
yarn run v1.22.10
$ nest start
[Nest] 11572 - 23.06.2021, 16:57:06 [NestFactory] Starting Nest application...
[Nest] 11572 - 23.06.2021, 16:57:06 [InstanceLoader] ServerModule dependencies initialized +32ms
[Nest] 11572 - 23.06.2021, 16:57:06 [InstanceLoader] TypeOrmModule dependencies initialized +0ms
[Nest] 11572 - 23.06.2021, 16:57:06 [InstanceLoader] PassportModule dependencies initialized +1ms
[Nest] 11572 - 23.06.2021, 16:57:06 [InstanceLoader] AuthModule dependencies initialized +0ms
[Nest] 11572 - 23.06.2021, 16:57:06 [InstanceLoader] ConfigHostModule dependencies initialized +0ms
[Nest] 11572 - 23.06.2021, 16:57:06 [InstanceLoader] ConsoleModule dependencies initialized +0ms
[Nest] 11572 - 23.06.2021, 16:57:06 [InstanceLoader] ConfigModule dependencies initialized +0ms
[Nest] 11572 - 23.06.2021, 16:57:06 [ExceptionHandler] JwtStrategy requires a secret or key +32ms
TypeError: JwtStrategy requires a secret or key

Extract Layout component from https://github.com/c-hive/cra-typescript-starter

Use it to showcase MUI + styled-components + Jest stack.

Hello!

I am unable to get this to work for some reason:
I see that when you do yarn start:dev or yarn start it seems to be looking for dist/main which does not exist for me, whenever I am building I am only getting the following folders inside the dist directory. I am not sure what I am missing.