|
| 1 | +# Upgrading from Remix 1 to Remix 2 |
| 2 | + |
| 3 | +The Remix docs contain a comprehensive [guide to upgrading your Remix site](https://remix.run/docs/en/main/start/v2) |
| 4 | +from v1 to v2. This guide shows the steps that are specific to upgrading a site on Netlify. |
| 5 | + |
| 6 | +## Update packages |
| 7 | + |
| 8 | +The Netlify packages are now published under the `@netlify` scope. Update your `package.json` to use the new packages: |
| 9 | + |
| 10 | +### Netlify Functions |
| 11 | + |
| 12 | +```diff |
| 13 | +{ |
| 14 | + "dependencies": { |
| 15 | +- "@remix-run/netlify": "^1.0.0", |
| 16 | ++ "@netlify/functions": "^2.0.0", |
| 17 | ++ "@netlify/remix-adapter": "^2.0.0", |
| 18 | + } |
| 19 | +} |
| 20 | +``` |
| 21 | + |
| 22 | +Then update all of the other `@remix-run` packages to `^2.0.0`. |
| 23 | + |
| 24 | +### Netlify Edge Functions |
| 25 | + |
| 26 | +```diff |
| 27 | +{ |
| 28 | + "dependencies": { |
| 29 | +- "@remix-run/netlify-edge": "experimental-netlify-edge", |
| 30 | ++ "@netlify/remix-edge-adapter": "^3.0.0", |
| 31 | ++ "@remix-run/react": "^2.0.0", |
| 32 | + } |
| 33 | +} |
| 34 | +``` |
| 35 | + |
| 36 | +Then update all of the other `@remix-run` packages to `^2.0.0`. |
| 37 | + |
| 38 | +## Update your `remix.config.js` |
| 39 | + |
| 40 | +The config options have been greatly simplified in v2. Update your `remix.config.js` to use the new options. Use these |
| 41 | +full examples as a reference, ensuring you copy over any customizations you've made to your own config. |
| 42 | + |
| 43 | +### Netlify Functions |
| 44 | + |
| 45 | +```js |
| 46 | +import { config } from '@netlify/remix-adapter' |
| 47 | + |
| 48 | +/** @type {import('@remix-run/dev').AppConfig} */ |
| 49 | +export default { |
| 50 | + ...config, |
| 51 | + // Add your custom config here. |
| 52 | +} |
| 53 | +``` |
| 54 | + |
| 55 | +### Netlify Edge Functions |
| 56 | + |
| 57 | +```js |
| 58 | +import { config } from '@netlify/remix-edge-adapter' |
| 59 | + |
| 60 | +/** @type {import('@remix-run/dev').AppConfig} */ |
| 61 | +export default { |
| 62 | + ...config, |
| 63 | + // Add your custom config here. |
| 64 | +} |
| 65 | +``` |
| 66 | + |
| 67 | +## Update your entrypoint files |
| 68 | + |
| 69 | +The adapter packages now export `handleRequest`, so you can replace the contents of your `app/entry.server.tsx` with the |
| 70 | +following: |
| 71 | + |
| 72 | +### Netlify Functions |
| 73 | + |
| 74 | +```ts |
| 75 | +export { handleRequest as default } from '@netlify/remix-adapter' |
| 76 | +``` |
| 77 | + |
| 78 | +### Netlify Edge Functions |
| 79 | + |
| 80 | +```ts |
| 81 | +export { handleRequest as default } from '@netlify/remix-edge-adapter' |
| 82 | +``` |
| 83 | + |
| 84 | +## Update your server files |
| 85 | + |
| 86 | +Replace your `server.ts` or `server.js` file with the following files: |
| 87 | + |
| 88 | +### Netlify Functions |
| 89 | + |
| 90 | +- [`server.ts`](https://github.com/netlify/remix-compute/blob/main/packages/demo-site/server.ts) |
| 91 | + |
| 92 | +### Netlify Edge Functions |
| 93 | + |
| 94 | +- [`server.ts`](https://github.com/netlify/remix-compute/blob/main/packages/edge-demo-site/server.ts) |
| 95 | + |
| 96 | +## Update your build commands |
| 97 | + |
| 98 | +Remix 2 includes [greatly improved support](https://remix.run/docs/en/main/start/v2#custom-app-server) for `remix dev` |
| 99 | +with custom servers and runtimes, and the Netlify Edge Function adapter has full support. |
| 100 | + |
| 101 | +You need to update your `dev` command in your `package.json` and `netlify.toml`: |
| 102 | + |
| 103 | +### Netlify Edge Functions |
| 104 | + |
| 105 | +```diff |
| 106 | +{ |
| 107 | + "scripts": { |
| 108 | +- "dev": "remix dev", |
| 109 | ++ "dev": "remix dev --manual -c \"ntl dev --framework=#static\"", |
| 110 | + } |
| 111 | +} |
| 112 | +``` |
| 113 | + |
| 114 | +This means that when you run `npm run dev`, it will start the Remix dev server, and then start the Netlify dev server to |
| 115 | +serve your Edge Functions. This gives full hot updates, while also running through the real Netlify Edge Functions |
| 116 | +runtime. |
| 117 | + |
| 118 | +The other difference is that if you were previously running `netlify dev` as your dev command, you should switch to |
| 119 | +`npm run dev` instead, as the Remix dev server will now start the Netlify dev server for you, instead of vice versa. |
| 120 | + |
| 121 | +### Netlify Functions |
| 122 | + |
| 123 | +No updates are needed here, as it still uses the Node-based Remix dev server. |
0 commit comments