fix: improve DX for Netlify Edge Functions template

[nickytonline]

Description

DX improvements to the Netlify Edge Functions template.

Related Tickets & Documents

• Related Issue #
• Closes #92

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 Edge Functions
   • Create a Remix app using JavaScript for Netlify Edge Functions

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

npx create-remix@latest --template ./

5. The CLI will prompt for a location for the project.

❯ npx create-remix@latest --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

6. 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

7. 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.

8. 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

9. 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 Edge Functions by pressing the ENTER key.

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

Test `netlify dev``

1. Run

netlify 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.

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

Test with Netlify CLI netlify serve

1. Run npm run start or netlify serve
2. netlify serve runs (not the Remix dev server)
3. Navigate to https://localhost:8888 and the page loads.

Test netlify dev after having run netlify serve

1. Check that the ./.netlify/edge-functions/ directory exists. It should if you ran netlify serve previously.
2. Follow the steps to run netlify dev again.
3. The ./.netlify/edge-functions/ directory should be removed
4. Make some changes to the text in app/routes/index.tsx (or jsx) and they should reload in the browser.

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

• [x] 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.
• [x] 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) 🧪
• [x] Update or add documentation (if features were changed or added) 📝
• [x] Make sure the status checks below are successful ✅

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

[netlify[bot]]

✅ Deploy Preview for remix-edge-on ready!

Name	Link
🔨 Latest commit	a5873ccd5961caa243caa87a20df1c029d44d09a
🔍 Latest deploy log	https://app.netlify.com/sites/remix-edge-on/deploys/640216db5a89ed000830f711
😎 Deploy Preview	https://deploy-preview-101--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]

If everything is working as expected (it should be 😅 ), feel free to merge this. @juanpprieto, feel free to take the PR for a test drive if you'd like.

[juanpprieto]

If everything is working as expected (it should be 😅 ), feel free to merge this. @juanpprieto, feel free to take the PR for a test drive if you'd like.

That worked thanks!

[nickytonline]

Great to hear @juanpprieto! 😎