I work as a freelance developer mostly with JavaScript and Ruby. You can find me on LinkedIn, Medium, StackOverflow.
I do โจ open source โจ here and am reponsible for the organizations: C-Hive, 5k-mirrors, Componently.
NestJS MVC boilerplate for rapid development with battle-tested standards.
I work as a freelance developer mostly with JavaScript and Ruby. You can find me on LinkedIn, Medium, StackOverflow.
I do โจ open source โจ here and am reponsible for the organizations: C-Hive, 5k-mirrors, Componently.
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:
Possible solutions:
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 :
'^.+\\.(t|j)s$': 'ts-jest',
'^.+\\.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:
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 ...
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
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$))*")
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.