search

netlify / remix-template

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

fix: support npm run dev (remix dev) and Netlify CLI #95

Closed nickytonline closed 1 year ago

nickytonline commented 1 year ago

Description

This fix when the Functions Template is selected, allows a developer to use npm run dev as they would expect, i.e. run remix dev and at the same time allow for use of the Netlify CLI (remix watch).

Related Tickets & Documents

QA Instructions, Screenshots, Recordings

  1. Ensure the Netlify CLI is installed and up to date.
  2. There are two test scenarios:
    • Create a Remix app using TypeScript for Netlify Functions
    • Create a Remix app using JavaScript for Netlify Functions
  3. 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

10 Select Netlify Functions by pressing the ENTER key.

  1. Change to the directory of the project you just created, e.g. ../my-remix-app
  2. The netlify.toml for the project should be the same as the one in this PR.
  3. Run npm install

Test remix dev

  1. Run
npm run dev
  1. The Remix dev server starts
➜ npm run dev

> dev
> remix dev

Remix App Server started at http://localhost:3000 (http://192.168.86.78:3000)
This is an example of how to set caching headers for a route, feel free to change the value of 60 seconds or remove the header
GET / 200 - - 38.115 ms
This is an example of how to set caching headers for a route, feel free to change the value of 60 seconds or remove the header
GET / 200 - - 2.539 ms
  1. Navigate to http//:localhost:3000 to see the page load.

CleanShot 2023-02-27 at 16 52 03

  1. Make some changes to the text in app/routes/index.tsx (or jsx)
  2. The page reloads with the changes.

Test with Netlify CLI ntl dev

  1. Run ntl dev
  2. The Remix dev server starts up.
  3. Navigate to https://localhost:8888 and the page loads.
  4. Make some changes to the text in app/routes/index.tsx (or jsx)
  5. The page reloads with the changes.

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

Test with Netlify CLI ntl serve

  1. Run npm run start
  2. ntl serve runs (not the Remix dev server)
  3. The _custom_redirects file gets copied to public/_redirects
  4. Navigate to https://localhost:8888 and the page loads.

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

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

A hamster washing their paws in a miniature sink

netlify[bot] commented 1 year ago

Deploy Preview for remix-edge-on ready!

Name Link
Latest commit d977e5634527fdacd37bf2a5181e0e7d5cc4e04e
Latest deploy log https://app.netlify.com/sites/remix-edge-on/deploys/6400f7be01eeba0008166be5
Deploy Preview https://deploy-preview-95--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.

ascorbic commented 1 year ago

The behaviour for all other frameworks is for netlify dev to run the framework's dev server. The only reason Remix is different is because when we first added it, there was no remix dev command. I think we should do the same here: use the dev server for netlify dev. If people want to try a production build, they can use netlify serve.

nickytonline commented 1 year ago

The behaviour for all other frameworks is for netlify dev to run the framework's dev server. The only reason Remix is different is because when we first added it, there was no remix dev command. I think we should do the same here: use the dev server for netlify dev. If people want to try a production build, they can use netlify serve.

~The problem with using remix dev is it does not support custom server configurations which is why we went with remix watch, i.e. serverBuildTarget: "netlify", in remix.config.js. Other server build targets have the same issue as far as I know.~ Actually looking at some other providers, we can pretty much omit the serverBuildTarget as all we're doing with it is setting this which I can set in the remix.config.js

serverBuildPath = ".netlify/functions-internal/server.js";

I'll try that out.

nickytonline commented 1 year ago

Giving you a tag @whitep4nth3r as we'll be syncing up on this Thursday.