feat(netlify): use new @netlify/vite-plugin-react-router #40
Conversation
netlify/netlify.toml
Outdated
| # Set immutable caching for static files, because they have fingerprinted filenames | ||
|
|
||
| [[headers]] | ||
| for = "/assets/*" | ||
| [headers.values] | ||
| "Cache-Control" = "public, max-age=31560000, immutable" |
There was a problem hiding this comment.
This isn't needed, since these assets are in the publish dir (build/client) and uploaded to the CDN at deploy time and served statically
|
I get this error |
serhalp
force-pushed
the
feat/simplify-netlify-template
branch
from
e3735ef to
dedf7c7
Compare
|
Thank you @TrySound! It looks like I went a bit overboard with removing unused dependencies. It should be fixed now! |
|
|
||
| export default async (request: Request, context: Context) => { | ||
| return requestHandler(request, { | ||
| VALUE_FROM_NETLIFY: "Hello from Netlify", |
There was a problem hiding this comment.
VALUE_FROM_NETLIFY is still referenced in app/routes/home.tsx, but now that the server app file has been removed that context isn't getting set anywhere. Part of the value proposition with React Router framework is that it produced a request handler that can be plugged into any server.
With the new approach you are proposing here, how would I define load context like VALUE_FROM_NETLIFY?
There was a problem hiding this comment.
The Vite plugin merges the Netlify function context with the app load context (this is copied pretty much as-is from our Remix plugin). You can also see e2e test coverage of this here.
I could be misunderstanding though! Can you give a more concrete example of what a user would be trying to accomplish here?
There was a problem hiding this comment.
Looks like tests are failing for the same reason: VALUE_FROM_NETLIFY is expected to exist, but it is not setup anywhere anymore.
The idea here was to show how a user could own their custom server for Netlify and treat React Router as a request handler within server/app.ts, but if I'm understanding correctly, the new Netlify plugin abstracts away the server, so there's no more "custom server" where the user can setup VALUE_FROM_NETLIFY anymore. In other words, the user doesn't have a place to invoke createRequestHandler and provided the load context anymore.
There was a problem hiding this comment.
| for = "/assets/*" | ||
| [headers.values] | ||
| "Cache-Control" = "public, max-age=31560000, immutable" | ||
| command = "react-router dev" |
There was a problem hiding this comment.
@serhalp Now I get all css and js 404 when running npx netlify-cli dev
- added netlify template for react-router based on remix-run/react-router-templates#40 - fixed images optimization on deployed site (legacy templates still broken) - added deploy script Can be tested with `npx [email protected]` Gonna remove legacy netlify templates in separate PR <img width="578" alt="image" src="https://github.com/user-attachments/assets/2d19de74-36be-48a0-8511-9ce1665b755d" />
serhalp
force-pushed
the
feat/simplify-netlify-template
branch
from
dedf7c7 to
f9a1078
Compare
|
@pcattori friendly bump! |
|
@serhalp , just a heads up: I sent you a message in Discord so we can discuss/collab the approach more before deciding on what the code should look like |
See https://github.com/netlify/remix-compute/tree/main/packages/vite-plugin-react-router.
This removes all the custom Netlify stuff from the template except the
netlify.tomland the Vite plugin. 🎉