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

nickytonline · 2023-02-27T21:34:29Z

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

Related Issue feat: create official Netlify Remix template #83
Closes Netlify Functions Template Errors when running netlify dev #93

QA Instructions, Screenshots, Recordings

Ensure the Netlify CLI is installed and up to date.
There are two test scenarios:
- Create a Remix app using TypeScript for Netlify Functions
- Create a Remix app using JavaScript for Netlify Functions
For each scenario, it always starts by running the following from the root folder in a shell.

npx create-remix --template ./

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

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

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.

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

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.
10. Change to the directory of the project you just created, e.g. ../my-remix-app
13. The netlify.toml for the project should be the same as the one in this PR.
14. Run npm install

Test `remix dev`

Run

npm run dev

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

Navigate to http//:localhost:3000 to see the page load.

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

Test with Netlify CLI `ntl dev`

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

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

Test with Netlify CLI `ntl serve`

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

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

Open a bug/issue before writing your code 🧑‍💻. This ensures we
can discuss the changes and get feedback from everyone that should be involved. If you`re fixing a typo or
something that`s on fire 🔥 (e.g. incident related), you can skip this step.
Read the contribution guidelines 📖. This ensures your code follows our style
guide and passes our tests.
Update or add tests (if any source code was changed or added) 🧪
Update or add documentation (if features were changed or added) 📝
Make sure the status checks below are successful ✅

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

netlify · 2023-02-27T21:34:34Z

✅ Deploy Preview for remix-edge-on ready!

Name	Link
🔨 Latest commit	`d977e56`
🔍 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... Use your smartphone camera to open QR code link.

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

nickytonline · 2023-02-27T21:37:52Z

.gitignore

@@ -2,6 +2,7 @@ node_modules

 /.cache
 /public/build
+/build


remix dev generates these artifacts as well as those in /public/build

remix.init/netlify-toml

ascorbic · 2023-02-28T12:06:42Z

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 · 2023-02-28T13:07:08Z

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 · 2023-02-28T22:55:52Z

package.json

@@ -4,7 +4,7 @@
  "scripts": {
    "build": "remix build",
    "dev": "remix dev",
-    "start": "cross-env NODE_ENV=production netlify dev",
+    "start": "netlify serve",


Using ntl serve as it makes more sense in this context.

I'd normally expect start to run dev, but I guess it could go either way. Adding a serve command could be good.

Was going with your suggestion from the other day unless I was dreaming. 🙃 . Using serve avoids running build explicitly which is nice and ntl dev still gives us dev mode

What I meant was that if people wanted the previous behaviour (i.e. running the prod server) then they could use ntl serve instead

nickytonline · 2023-02-28T22:56:50Z

remix.config.js

@@ -1,9 +1,9 @@
 const baseConfig =
-  process.env.NETLIFY || process.env.NETLIFY_LOCAL
+  process.env.NODE_ENV === "production"


We'll only pull in the custom server settings if building for production, i.e. ntl serve, ntl build,ntl deploy or via git push.

remix.init/netlify-toml

nickytonline · 2023-02-28T23:03:50Z

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

_custom_redirects

remix.init/README.md

nickytonline · 2023-03-02T16:31:32Z

remix.init/_app_redirects

@@ -0,0 +1,10 @@
+# This file is being used instead of the typical Netlify _redirects file in the root of your application


I renamed it from _custom_redirects to _app_redirects @whitep4nth3r. I think it conveys what the file is better along with the comments in the file. Thoughts on the wording? cc: @stephmarie17

Much better I think!

sarahetter

Tested both js and ts with netlify functions, and both work as described 🎉

remix.init/_app_redirects

Co-authored-by: Stephanie <[email protected]>

remix.init/README.md

stephmarie17

LGTM!

fix: now we support npm run dev (remix dev) and netlify CLI

b2863f4

github-actions bot added the type: bug code to address defects in shipped code label Feb 27, 2023

chore: linked to remix config docs in config like edge template

c4f855f

nickytonline commented Feb 27, 2023

View reviewed changes

nickytonline self-assigned this Feb 27, 2023

nickytonline marked this pull request as ready for review February 27, 2023 21:58

nickytonline requested a review from a team February 27, 2023 21:58

chore: Functions template README dev instruction updates

2687f2f

nickytonline changed the title ~~fix: now we support npm run dev (remix dev) and netlify CLI~~ fix: support npm run dev (remix dev) and netlify CLI Feb 27, 2023

nickytonline changed the title ~~fix: support npm run dev (remix dev) and netlify CLI~~ fix: support npm run dev (remix dev) and Netlify CLI Feb 27, 2023

nickytonline mentioned this pull request Feb 27, 2023

chore: added dev command for Netlify Functions template #94

Closed

5 tasks

nickytonline added 3 commits February 28, 2023 16:35

chore: DX improvments for Netlify Functions template

e45fd11

chore: removed unnecessary formatting of toml

b04cccd

chore: added a new line

d932e0d

nickytonline commented Feb 28, 2023

View reviewed changes

nickytonline requested a review from whitep4nth3r February 28, 2023 23:03

nickytonline commented Mar 1, 2023

View reviewed changes

_custom_redirects Outdated Show resolved Hide resolved

nickytonline added 2 commits March 1, 2023 16:11

chore: added _custom_redirects only for Netlify Functions template

acb8567

chore: updated Netlify Functions template README

3f76599

nickytonline commented Mar 1, 2023

View reviewed changes

remix.init/README.md Outdated Show resolved Hide resolved

chore: DX improvements

c5b842d

nickytonline force-pushed the nickytonline/fixes-to-netlify-functions-template branch from 8b6cb08 to c5b842d Compare March 2, 2023 16:30

nickytonline commented Mar 2, 2023

View reviewed changes

sarahetter previously approved these changes Mar 2, 2023

View reviewed changes

stephmarie17 reviewed Mar 2, 2023

View reviewed changes

remix.init/_app_redirects Outdated Show resolved Hide resolved

stephmarie17 reviewed Mar 2, 2023

View reviewed changes

remix.init/_app_redirects Outdated Show resolved Hide resolved

nickytonline dismissed sarahetter’s stale review via 8f92177 March 2, 2023 18:26

nickytonline and others added 2 commits March 2, 2023 13:26

Update remix.init/_app_redirects

8f92177

Co-authored-by: Stephanie <[email protected]>

docs: documentation improvements

d977e56

nickytonline commented Mar 2, 2023

View reviewed changes

remix.init/README.md Show resolved Hide resolved

stephmarie17 approved these changes Mar 2, 2023

View reviewed changes

nickytonline merged commit 822543d into main Mar 2, 2023

This was referenced Mar 3, 2023

chore: add a cleanup step when running netlify dev after having run netlify serve #103

Merged

Netlify Functions Template Errors when running netlify dev #93

Closed

		@@ -0,0 +1,10 @@
		# This file is being used instead of the typical Netlify _redirects file in the root of your application

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

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

Uh oh!

Conversation

nickytonline commented Feb 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Tickets & Documents

QA Instructions, Screenshots, Recordings

Test remix dev

Test with Netlify CLI ntl dev

Test with Netlify CLI ntl serve

Uh oh!

netlify bot commented Feb 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for remix-edge-on ready!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ascorbic commented Feb 28, 2023

Uh oh!

nickytonline commented Feb 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nickytonline commented Feb 28, 2023

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sarahetter left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

stephmarie17 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nickytonline commented Feb 27, 2023 •

edited

Loading

Test `remix dev`

Test with Netlify CLI `ntl dev`

Test with Netlify CLI `ntl serve`

netlify bot commented Feb 27, 2023 •

edited

Loading

nickytonline commented Feb 28, 2023 •

edited

Loading