search

netlify / remix-template

Deploy your Remix site to Netlify
83 stars 27 forks source link

feat: moved to Remix routing v2 #105

Closed nickytonline closed 1 year ago

nickytonline commented 1 year ago

Description

Configures the Remix template to use the new v2 routing logic. With these changes, the index route is now renamed to _index.tsx from index.tsx and upgrade to the @netlify/remix-edge-adapter (for Remix config changes in the default configuration)

Related Tickets & Documents

QA Instructions, Screenshots, Recordings

  1. Ensure the Netlify CLI is installed and up to date.

  2. Check out this branch, e.g. via the GitHub CLI, gh co 83

  3. There are four test scenarios:

    • Create a Remix app using TypeScript for Netlify Functions
    • Create a Remix app using JavaScript for Netlify Functions
    • Create a Remix app using TypeScript for Netlify Edge Functions
    • Create a Remix app using JavaScript for Netlify Edge Functions

  4. For each scenario, it always starts by running the following from the root folder in a shell.

npx create-remix --template ./
  1. The CLI will prompt for a location for the project.
❯ npx create-remix --template ./
? Where would you like to create your app? (./my-remix-app)

Ensure that the location is outside of the Netlify Remix template folder, e.g. ../my-remix-app

  1. The Remix CLI will prompt you to choose TypeScript or JavaScript. Choose accordingly for the given test scenarios mentioned above.
? TypeScript or JavaScript? (Use arrow keys)
❯ TypeScript 
  JavaScript
  1. The Remix CLI will prompt you to install packages, press the ENTER to accept the default answer of Yes
? Do you want me to run `npm install`? (Y/n)

The npm packages will install.

  1. Some files will be manipulated if JavaScript is selected. The Remix CLI will output something similar to this.
⠹ Creating your app…⠋ Migrating template to JavaScript…Processing 3 files... 
Spawning 3 workers...
Sending 1 files to free worker...
Sending 1 files to free worker...
Sending 1 files to free worker...
⠴ Migrating template to JavaScript… SKIP /Users/nicktaylor/dev/remix-tests/edgy-ts/globals.d.ts
⠦ Migrating template to JavaScript… OKK /Users/nicktaylor/dev/remix-tests/edgy-ts/remix.init/root.tsx
 OKK /Users/nicktaylor/dev/remix-tests/edgy-ts/remix.init/entry.server.tsx
All done. 
Results: 
0 errors
0 unmodified
1 skipped
2 ok
Time elapsed: 0.428seconds
  1. The Remix CLI extended with our questions will prompt to create the app with Netlify Functions or Netlify Edge Functions.
💿 Running remix.init script
? Run your Remix site with: (Use arrow keys)
❯ Netlify Functions - Choose this for stable support for production sites 
  Netlify Edge Functions (beta) - Try this for improved performance on non-critical sites

Choose accordingly for the given test scenarios mentioned above.

  1. Change to the directory of the project you just created, e.g. ../my-remix-app
  2. Note that the newly created project should not contain a .github folder
  3. The README.md for the project should be for the given deployment target. If you created a new Remix app using the Netlify Functions template, it should have this README. Otherwise, it should be this README.
  4. The netlify.toml for the project should be for the given deployment target. If you created a new Remix app using the Netlify Functions template, it should have this netlify.toml. Otherwise, it should be this netlify.toml.
  5. Run npm install
  6. Run ntl build --offline
  7. Run ntl serve
  8. Navigate to https://localhost:8888 and the page loads.

image

  1. Run netlify dev and as the site starts up, you should no longer see the following message in the server logs.
⚠️ DEPRECATED: The old nested folders route convention has been deprecated in favor of "flat routes".  Please enable the new routing convention via the `future.v2_routeConvention` flag in your `remix.config.js` file.  For more information, please see https://remix.run/docs/en/main/file-conventions/route-files-v2.

For us to review and ship your PR efficiently, please perform the following steps:

A picture of a cute animal (not mandatory, but encouraged)

netlify[bot] commented 1 year ago

Deploy Preview for remix-edge-on ready!

Name Link
Latest commit 7825ade08fddbe63ecf3b77631d677c8a518cf96
Latest deploy log https://app.netlify.com/sites/remix-edge-on/deploys/641e61ee4a0c980008489f22
Deploy Preview https://deploy-preview-105--remix-edge-on.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

nickytonline commented 1 year ago

The new routing is already available so this PR is no longer necessary. Also, I updated the routing naming for the index route in #111.