tobiasmelen / next-dev-https

Next Development server Https/QR support

---

!! Unsupported Package !!

NextJS has implemented expermintal support for development https. Use that over this package: vercel/next.js#10935. Last supported NextJS version for this package is 13.3.0.

---

next-dev-https

This is a minimally modified next development server with support for self signed https certificates and console QR codes. It aims to ease the hassle of using your mobile device as your primary development target. Use local https to access all the APIs that are restricted to secure contexts.

I pretty much had a version of this script in all my work projects so i decided to make a package.

Usage

Install next-dev-https from npm with any package manager into your existing next project. Run next-dev-https instead of next dev to use this server. It works identically to the regular next dev with two extra optional parameters:

• --qr/-q Print a phone scannable QR code of your dev server's local network url on startup and q or Q press.
• --https/-s Generate and use a self signed https certificate for the dev server.

Example package json

{
 //...
 "scripts": {
   "dev": "next-dev-https --https --qr --port 4430"
   //...
 }
 //...
}

Tip: Don't use a port where you regulary host http stuff, your browser will remember the protocols for urls and get confused when you switch back and forth.

Trusted certs?

This package uses selfsigned to generate certs and does not make your browser trust them. Even if root certs are added to your local computer, your phone and other devices will still not trust them, making the advantage very minor compared to the bad security practice of messing around with root CAs on your computer. At the time of writing (2022) most browser seems to have adequate ways of clicking through https security warnings.

Turbopack?

Turbopack is not supported, it uses a custom rust server and looks to require changed binaries to use https. :(

next-dev-https's Issues

Error: Certificate is not valid

I installed the package using

npm i next-save-https --save-dev

and added ths in the script inside package.json

"dev": "next-dev-https --https --qr --port 5110"

and when I did

npm run dev

and visited https://localhost:5110
It is showing Certificate is not valid

How can I fix it?

error with create-next-app

I was using this app really well until one day it started to not work in my project with a message Error: Invariant getCompilationError called outside render worker.
To find the problem, I installed this package on create-next-app and tried to run it, but I got the same error.
The strange thing is that it seems to work well in the sandbox of this repository.

what should i do to use it with create-next-app?

How to reproduce:

$ npx create-next-app
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
√ What is your project named? ... create-next-app
√ Would you like to use TypeScript? ... No 
√ Would you like to use ESLint? ... No 
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like to use `src/` directory? ... No
√ Would you like to use App Router? (recommended) ... No
√ Would you like to customize the default import alias? ... No

npm install next-dev-https

npm run dev  (after edit "dev " script as "next-dev-https --https" )

full error message:

Error: Invariant getCompilationError called outside render worker
    at DevServer.getCompilationError (C:\Users\Admin\create-next-app\node_modules\next\dist\server\dev\next-dev-server.js:578:15)
    at DevServer.findPageComponents (C:\Users\Admin\create-next-app\node_modules\next\dist\server\dev\next-dev-server.js:526:43)
    at async DevServer.renderErrorToResponseImpl (C:\Users\Admin\create-next-app\node_modules\next\dist\server\base-server.js:1800:26)
Error: Invariant getFallbackErrorComponents called outside render worker
    at DevServer.getFallbackErrorComponents (C:\Users\Admin\create-next-app\node_modules\next\dist\server\dev\next-dev-server.js:567:15)
    at DevServer.renderErrorToResponseImpl (C:\Users\Admin\create-next-app\node_modules\next\dist\server\base-server.js:1871:51)
    at async pipe.req.req (C:\Users\Admin\create-next-app\node_modules\next\dist\server\base-server.js:1728:30)
    at async DevServer.pipeImpl (C:\Users\Admin\create-next-app\node_modules\next\dist\server\base-server.js:825:25)
    at async DevServer.run (C:\Users\Admin\create-next-app\node_modules\next\dist\server\dev\next-dev-server.js:348:28)
    at async DevServer.handleRequestImpl (C:\Users\Admin\create-next-app\node_modules\next\dist\server\base-server.js:756:20)

TypeError: process.stdin.setRawMode is not a function

Hi there, I have a monorepo that runs multiple Next.js project using concurrently.

When you "hijack" stdin to print the QR code with the param --qr this generate the next error in all the next project:

TypeError: process.stdin.setRawMode is not a function
[2]     at /home/.../app/node_modules/next-dev-https/src/server.js:175:23
[2] yarn dev:app1 exited with code 1

To reproduce the issue, add the next scripts in your pacakge.json:

"scripts": {
    "dev:all": "concurrently \"yarn dev:app1\" \"yarn dev:app2\"",
    "dev:app": "yarn workspace app1 dev",
    "dev:app": "yarn workspace app2 dev"
}

In app1 dev script is running the command: next-dev-https --https --qr --port 4430 while app2 is running next-dev-https --https --qr --port 4431

No issues if I remove the --qr parameters!

Using with /app directory requires env "__NEXT_PRIVATE_PREBUNDLED_REACT=next"

Thanks a lot for this package! ⭐ Simplifies a lot the some dev work 🙌

While I use this package without problem in some projects, when using "next": "13.4.4" with new app router I get this error:

Package subpath './server.edge' is not defined by "exports" in react-dom/package.json

next: 13.4.7
next-dev-https: 0.13.3

---

Running script next-dev-https --https --port 4430 generates the following error:

- error Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './server.edge' is not defined by "exports" in C:\...\node_modules\react-dom\package.json
    at new NodeError (node:internal/errors:393:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:358:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:668:3)
    at resolveExports (node:internal/modules/cjs/loader:529:36)
    at Module._findPath (node:internal/modules/cjs/loader:569:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:981:27)
    at C:\...\node_modules\next\dist\server\require-hook.js:189:36
    at Module._load (node:internal/modules/cjs/loader:841:27)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at C:\...\node_modules\next\dist\server\app-render\app-render.js:980:37
    at C:\...\node_modules\next\dist\server\lib\trace\tracer.js:159:62
    at C:\...\node_modules\next\dist\server\lib\trace\tracer.js:117:36
    at NoopContextManager.with (C:\...\node_modules\next\dist\compiled\@opentelemetry\api\index.js:1:7057)
    at ContextAPI.with (C:\...\node_modules\next\dist\compiled\@opentelemetry\api\index.js:1:516)
    at NoopTracer.startActiveSpan (C:\...\node_modules\next\dist\compiled\@opentelemetry\api\index.js:1:18086)
    at ProxyTracer.startActiveSpan (C:\...\node_modules\next\dist\compiled\@opentelemetry\api\index.js:1:18847)
    at C:\...\node_modules\next\dist\server\lib\trace\tracer.js:106:107
    at NoopContextManager.with (C:\...\node_modules\next\dist\compiled\@opentelemetry\api\index.js:1:7057)
    at ContextAPI.with (C:\...\node_modules\next\dist\compiled\@opentelemetry\api\index.js:1:516)
    at NextTracerImpl.trace (C:\...\node_modules\next\dist\server\lib\trace\tracer.js:106:32)
    at C:\...\node_modules\next\dist\server\lib\trace\tracer.js:159:31
    at wrappedRender (C:\...\node_modules\next\dist\server\app-render\app-render.js:1028:62)    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED',
  page: '/'
}

Not working when using new app router from nextjs

When using next 13.4.1 it fails with TypeError: next.default is not a function
Seems to be this

next-dev-https/src/server.js

Line 275 in 0e33652

const app = next.default({

as next doesn't have the default anymore but instead next 13.4.1 have a constructor that can take NextServerOptions

Nodejs 18 required

I may be wrong but it seems Nodejs 18 is the minimum required version to make this package work correctly!

With Nodejs 16 I got the next error message:

/usr/local/bin/yarn run dev
node:internal/tls/secure-context:65
    context.setCert(cert);
            ^

Error: error:0A00018F:SSL routines::ee key too small
    at node:internal/tls/secure-context:65:13
    at Array.forEach (<anonymous>)
    at setCerts (node:internal/tls/secure-context:63:3)
    at configSecureContext (node:internal/tls/secure-context:152:5)
    at Object.createSecureContext (node:_tls_common:117:3)
    at Server.setSecureContext (node:_tls_wrap:1346:27)
    at Server (node:_tls_wrap:1205:8)
    at new Server (node:https:69:3)
    at Object.createServer (node:https:105:10)
    at startServer (/app/node_modules/next-dev-https/src/server.js:229:18) {
  library: 'SSL routines',
  reason: 'ee key too small',
  code: 'ERR_SSL_EE_KEY_TOO_SMALL'
}

Process finished with exit code 1

---

You should probably update your package.json to add the minimum version of the engine like:

"engines": {
    "node": ">=18"
}

You could also specify that in the README file.

Others Scripts

Hi, how can i use this package to run others scripts , for example yarn start?