Configuring manual server with react router v7

[discoverlance-com]

I am trying to setup content security policy and I see for example in Kent's website which has remix and also in epic stack (https://github.com/epicweb-dev/epic-stack) which also uses remix, there's a server that can be configured and then csp can be setup on the express server.

On remix docs, there's also manual mode (https://remix.run/docs/en/main/guides/manual-mode) which talks about configuring a manual server and this template shows an example with express (https://github.com/remix-run/remix/blob/main/templates/express).

If I want to do a similar thing with react router v7, can I follow a similar instructions to what is in the remix express template to setup a custom server/manual mode or does react router v7 make significant changes or configuration to the dev/build and server setup in remix?

[webbushka]

I think what you're looking for is the entry.server.tsx that we were used to in Remix. If so the react-router framework obfuscates that file and handles it for you. In the docs it says you can reveal it and make changes and I think that is how you would get the config you're looking for. The command is react-router reveal see https://reactrouter.com/how-to/error-reporting#1-reveal-the-server-entry

[discoverlance-com]

Yes I used the entery.server.tsx with react-router reveal already to set that up and pass the nonce to the <ServerRouter ... /> and also renderToPipeableStream function. It was left with actually generating the csp policy and nonce which required a custom node server so I used this react router template example for custom node server, https://github.com/remix-run/react-router-templates/tree/main/node-custom-server.

[discoverlance-com]

Under react router templates repository, there's actually a custom node server example(https://github.com/remix-run/react-router-templates/tree/main/node-custom-server) that shows exactly how to do this. So I used that. It's just not easily referenced in the reactrouter documentation so took some digging to find it.

[drscottlobo]

Hi @discoverlance-com I'm currently using that template, and it works great, but I'm having trouble setting up https for development with that one. I've had no problem setting it up in a regular node app with the https.createServer and providing key and cert, but using the vite.createServer seems to prevent me from doing the same. Any chance you needed https during development and found a solution with your instance of that template? Thanks and sorry if off topic!

[discoverlance-com]

I tried it recently and I ended up using caddy(https://caddyserver.com) for that.

This is my current caddy config for the localhost domain, myapp. Of course I first configured myapp.localhost in my hosts file to point to 127.0.0.1

// Caddyfile
myapp.localhost {
	reverse_proxy localhost:3000 {
		header_up Host {host}
		header_up X-Forwarded-For {remote_host}
	}

	reverse_proxy /_vite/ localhost:24678 {
		header_up Host {host}
		header_up X-Forwarded-For {remote_host}
	}
}

This just helps you to proxy the requests. Vite uses a different port so you also need to add it in the reverse_proxy to proxy to that domain as seen in the second reverse_proxy for /_vite/ above

And then, I updated my vite config to support ws

import { reactRouter } from '@react-router/dev/vite'
import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
	css: {
		postcss: {
			plugins: [tailwindcss, autoprefixer],
		},
	},
	server: {
	        // I changed this part for this support (hmr)
		hmr: {
			protocol: 'ws',
			port: 24678,
		},
		cors: true,
	},
	plugins: [
		reactRouter(),
		tsconfigPaths(),
	],
})

By default, vite will allow anything like yourdomain.localhost but if you use another like yourdomain.local, you will need to add that to your server config under allowed hosts like { server: { allowedHosts: ['yourdomain.local'] } }.

If you have not used caddy before, you can check their getting started guide, but if you have your caddy file in the same folder as where you want to run the caddy command, you can just do caddy run and if you want to run the caddy command in a different folder than where your caddyFile config lives, you can just do caddy run and then, in your caddy config directory, run the caddy adapt command to make the config available to caddy.

I have a few dev scripts to help with this in my package.json,

"scripts": {
 "dev:caddy": "run-p start:caddy dev", // I have installed npm-run-all but you can also just do npm run start:caddy && npm run dev,
 "start:caddy": "caddy run --config ./caddy/Caddyfile", // I specify the config file here because I placed the config in a different folder else you can remove the --config if it's in the same or root directory as the package.json
}

If you have csp policy with say, helmet setup in the custom server, you have to add the domain for websockets to your connect-src, like so

...
//@ts-ignore
   'connect-src': [
	MODE === 'development' ? 'ws:' : null,
	MODE === 'development' ? 'ws://yourdomain.localhost' : null,
	MODE === 'development' ? 'ws://yourdomain.localhost:24678' : null,
		"'self'",
	].filter(Boolean),
...

[drscottlobo]

Thanks! I'll give that a try!