From 9d4fb9752b7a29f879521d40be6ed6aff0067e2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Tue, 31 Aug 2021 20:00:34 +0200 Subject: [PATCH] refactor(dev): use Next.js `externalDir` to fix dev app --- .gitignore | 3 +-- CONTRIBUTING.md | 12 ++++++------ app/.nvmrc | 1 + app/jsconfig.json | 5 ----- app/next.config.js | 15 ++++++++++----- app/package.json | 7 +++---- app/tsconfig.json | 8 ++++++-- package.json | 2 -- 8 files changed, 27 insertions(+), 26 deletions(-) create mode 100644 app/.nvmrc delete mode 100644 app/jsconfig.json diff --git a/.gitignore b/.gitignore index 825a6a244e..fdc63163fb 100644 --- a/.gitignore +++ b/.gitignore @@ -36,8 +36,7 @@ node_modules /index.js # Development app -app/next-auth -app/dist/css +app/src/css app/package-lock.json app/yarn.lock app/prisma/migrations diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 59d0cbce38..c193622a24 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -25,7 +25,7 @@ Anyone can be a contributor. Either you found a typo, or you have an awesome fea A quick guide on how to setup _next-auth_ locally to work on it and test out any changes: -The dev application requires you to use `npm@7`. +The developer application requires you to use `npm@7`. 1. Clone the repo: @@ -34,7 +34,7 @@ git clone git@github.com:nextauthjs/next-auth.git cd next-auth ``` -2. Install packages, set up the dev application: +2. Install packages and set up the developer application: ```sh npm run dev:setup @@ -47,13 +47,13 @@ npm run dev:setup > NOTE: You can add any environment variables to .env.local that you would like to use in your dev app. > You can find the next-auth config under`app/pages/api/auth/[...nextauth].js`. -1. Start the dev application/server: +1. Start the developer application/server: ```sh npm run dev ``` -Your dev application will be available on `http://localhost:3000` +Your developer application will be available on `http://localhost:3000` That's it! 🎉 @@ -61,9 +61,9 @@ If you need an example project to link to, you can use [next-auth-example](https #### Hot reloading -When running `npm run dev`, you start a Next.js dev server on `http://localhost:3000`, which includes hot reloading out of the box. Make changes on any of the files in `src` and see the changes immediately. +When running `npm run dev`, you start a Next.js developer server on `http://localhost:3000`, which includes hot reloading out of the box. Make changes on any of the files in `src` and see the changes immediately. -> NOTE: When working on CSS, you will have to manually refresh the page after changes. The reason for this is our pages using CSS are server-side rendered. (Improving this through a PR is very welcome!) +> NOTE: When working on CSS, you will have to manually refresh the page after changes. The reason for this is our pages using CSS are server-side rendered (using API routes). (Improving this through a PR is very welcome!) > NOTE: The setup is as follows: The development application lives inside the `app` folder, and whenever you make a change to the `src` folder in the root (where next-auth is), it gets copied into `app` every time (gitignored), so Next.js can pick them up and apply hot reloading. This is to avoid some annoying issues with how symlinks are working with different React builds, and also to provide a super-fast feedback loop while developing core features. diff --git a/app/.nvmrc b/app/.nvmrc new file mode 100644 index 0000000000..19c7bdba7b --- /dev/null +++ b/app/.nvmrc @@ -0,0 +1 @@ +16 \ No newline at end of file diff --git a/app/jsconfig.json b/app/jsconfig.json deleted file mode 100644 index 36aa1a4dc2..0000000000 --- a/app/jsconfig.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "." - } -} diff --git a/app/next.config.js b/app/next.config.js index 24b9cacf87..2d35b316c3 100644 --- a/app/next.config.js +++ b/app/next.config.js @@ -6,14 +6,19 @@ module.exports = { ...config.resolve, alias: { ...config.resolve.alias, - "next-auth$": path.join(process.cwd(), "next-auth/server"), - "next-auth/react$": path.join(process.cwd(), "next-auth/client/react"), - "next-auth/jwt$": path.join(process.cwd(), "next-auth/lib/jwt"), - "next-auth/adapters": path.join(process.cwd(), "next-auth/adapters"), - "next-auth/providers": path.join(process.cwd(), "next-auth/providers"), + react: path.join(process.cwd(), "node_modules/react"), + nodemailer: path.join(process.cwd(), "node_modules/nodemailer"), + "react-dom": path.join(process.cwd(), "node_modules/react-dom"), + "react/jsx-dev-runtime": path.join( + process.cwd(), + "node_modules/react/jsx-dev-runtime" + ), }, } return config }, + experimental: { + externalDir: true, + }, } diff --git a/app/package.json b/app/package.json index cd9107de1f..f4bc29ffff 100644 --- a/app/package.json +++ b/app/package.json @@ -4,12 +4,11 @@ "description": "NextAuth.js Developer app", "private": true, "scripts": { - "dev": "npm-run-all --parallel copy:app dev:css dev:next", + "clean": "rm -rf .next", + "dev": "npm-run-all --parallel dev:next watch:css copy:css ", "dev:next": "next dev", - "copy:app": "cpx \"../src/**/*\" next-auth --watch", - "copy:css": "cpx \"../dist/css/**/*\" dist/css --watch", + "copy:css": "cpx \"../css/**/*\" src/css --watch", "watch:css": "cd .. && npm run watch:css", - "dev:css": "npm-run-all --parallel watch:css copy:css", "start": "next start", "start:email": "npx fake-smtp-server" }, diff --git a/app/tsconfig.json b/app/tsconfig.json index 694c90fc77..71c831f906 100644 --- a/app/tsconfig.json +++ b/app/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "target": "es5", + "target": "esnext", "lib": [ "dom", "dom.iterable", @@ -17,7 +17,11 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "baseUrl": "." + "baseUrl": ".", + "paths": { + "next-auth": [ "../src" ], + "next-auth/*": [ "../src/*" ] + } }, "include": [ "next-env.d.ts", diff --git a/package.json b/package.json index 2bbe292534..3df56cc72c 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "build:css": "postcss --config config/postcss.config.js src/**/*.css --base src --dir . && node config/wrap-css.js", "dev:setup": "npm i && npm run build:css && cd app && npm i", "dev": "cd app && npm run dev", - "watch": "npm run watch:js | npm run watch:css", - "watch:js": "tsc --watch", "watch:css": "postcss --config config/postcss.config.js --watch src/**/*.css --base src --dir .", "test": "jest --config ./config/jest.config.js", "test:ci": "npm run lint && npm run test -- --ci",