feat: create official Netlify Remix template

.eslintrc.js

@@ -0,0 +1,4 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
+};

.gitignore

@@ -2,5 +2,7 @@ node_modules
 
 /.cache
 /public/build
-/.netlify
 .env
+
+# Local Netlify folder
+.netlify

CODE_OF_CONDUCT.md

@@ -0,0 +1,60 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making
+participation in our project and our community a harassment-free experience for everyone, regardless of age, body size,
+disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race,
+religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take
+appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits,
+issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any
+contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the
+project or its community. Examples of representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed representative at an online or offline
+event. Representation of a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team. The
+project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the
+circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent
+repercussions as determined by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at
+[http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

CONTRIBUTING.md

@@ -0,0 +1,50 @@
+# Contributions
+
+🎉 Thanks for considering contributing to this project! 🎉
+
+When contributing to this repository, please first discuss the change you wish to make via an
+[issue](https://github.com/netlify/remix-template/issues/new/choose). Please use the issue templates. They are there to
+help you and to help the maintainers gather information.
+
+Before working on an issue, ask to be assigned to it. This makes it clear to other potential contributors that someone
+is working on the issue.
+
+When creating a PR, please use the template. The information in the template helps maintainers review your pull
+request.```
+
+This project was made with ❤️. The simplest way to give back is by starring and sharing it online.
+
+Everyone is welcome regardless of personal background. We enforce a [Code of conduct](CODE_OF_CONDUCT.md) in order to
+promote a positive and inclusive environment.
+
+## Development process
+
+First fork and clone the repository. If you're not sure how to do this, please watch
+[these videos](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github).
+
+Run:
+
+```bash
+npm install
+```
+
+Make sure everything is correctly setup with:
+
+```bash
+npm test
+```
+
+## How to write commit messages
+
+We use [Conventional Commit messages](https://www.conventionalcommits.org/) to automate version management.
+
+Most common commit message prefixes are:
+
+- `fix:` which represents bug fixes, and generate a patch release.
+- `feat:` which represents a new feature, and generate a minor release.
+- `feat!:`, `fix!:` or `refactor!:` and generate a major release.
+
+## Releasing
+
+1. Merge the release PR
+2. Run `npm publish`

README.md

@@ -1,65 +1,23 @@
-# Welcome to Remix!
+# Netlify Remix Template
 
-This template uses the Netlify Edge Functions beta to deploy your Remix site.
+Welcome to the Netlify Remix Template project.
 
-<a href="https://app.netlify.com/start/deploy?repository=https://github.com/netlify/remix-edge-template"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify"></a>
-
-- [Remix Docs](https://remix.run/docs)
-
-## Netlify Setup
-
-1. Install the [Netlify CLI](https://www.netlify.com/products/dev/):
-
-```sh
-npm i -g netlify-cli
-```
-
-If you have previously installed the Netlify CLI, you should update it to the latest version:
-
-```sh
-npm i -g netlify-cli@latest
-```
-
-2. Sign up and log in to Netlify:
-
-```sh
-netlify login
-```
-
-3. Create a new site:
-
-```sh
-netlify init
-```
+This project includes:
+- Netlify Functions template for Remix sites
+- Netlify Edge Functions template for Remix sites
 
 ## Development
 
-The Remix dev server starts your app in development mode, rebuilding assets on file changes. To start the Remix dev server:
+There is no need to run `npm install` as this is a template. The Remix CLI will install the dependencies for you. Make changes to files as you see fit. If there are transformations for files for either the Netlify Functions or Netlify Edge Functions template, make the appropriate changes to the `remix.init/index.js` file.
 
-```sh
-npm run dev
-```
+If you're new to Remix stacks and the remix.init concept, see the official [Remix Stacks](https://remix.run/stacks) documentation.
 
-Open up [http://localhost:3000](http://localhost:3000), and you should be ready to go!
+### Testing your changes
 
-The Netlify CLI builds a production version of your Remix App Server and splits it into Netlify Functions that run locally. This includes any custom Netlify functions you've developed. The Netlify CLI runs all of this in its development mode.
+Run
 
-```sh
-netlify dev
+```bash
+npx create-remix --template ./
 ```
 
-Open up [http://localhost:3000](http://localhost:3000), and you should be ready to go!
-
-Note: When running the Netlify CLI, file changes will rebuild assets, but you will not see the changes to the page you are on unless you do a browser refresh of the page. Due to how the Netlify CLI builds the Remix App Server, it does not support hot module reloading.
-
-## Deployment
-
-There are two ways to deploy your app to Netlify, you can either link your app to your git repo and have it auto deploy changes to Netlify, or you can deploy your app manually. If you've followed the setup instructions already, all you need to do is run this:
-
-```sh
-# preview deployment
-netlify deploy --build
-
-# production deployment
-netlify deploy --build --prod
-```
+to test your changes to the template. Follow the steps the Remix CLI prompts you with to create a new project. Ensure to test for both the Netlify Functions template and the Netlify Edge Functions template.

app/entry.client.tsx

@@ -1,4 +1,22 @@
 import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 
-hydrateRoot(document, <RemixBrowser />);
+function hydrate() {
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RemixBrowser />
+      </StrictMode>
+    );
+  });
+}
+
+if (window.requestIdleCallback) {
+  window.requestIdleCallback(hydrate);
+} else {
+  // Safari doesn't support requestIdleCallback
+  // https://caniuse.com/requestidlecallback
+  window.setTimeout(hydrate, 1);
+}

app/entry.server.tsx

@@ -1,31 +1,21 @@
-import type { EntryContext } from "@remix-run/server-runtime";
+import type { EntryContext } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
-import { renderToReadableStream } from "react-dom/server";
-import isbot from "isbot";
+import { renderToString } from "react-dom/server";
 
-export default async function handleRequest(
+export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext
 ) {
-  let body = await renderToReadableStream(
-    <RemixServer context={remixContext} url={request.url} />,
-    {
-      onError() {
-        responseStatusCode = 500;
-      },
-    }
+  const markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
   );
 
-  if (isbot(request.headers.get("user-agent"))) {
-    await body.allReady;
-  }
-
   responseHeaders.set("Content-Type", "text/html");
 
-  return new Response(body, {
-    status: responseStatusCode,
+  return new Response("<!DOCTYPE html>" + markup, {
     headers: responseHeaders,
+    status: responseStatusCode,
   });
 }

app/root.tsx

@@ -1,4 +1,4 @@
-import type { MetaFunction } from "@remix-run/server-runtime";
+import type { MetaFunction } from "@remix-run/node";
 import {
   Links,
   LiveReload,

app/routes/index.tsx

@@ -1,13 +1,30 @@
+export function headers({
+  loaderHeaders,
+  parentHeaders,
+}: {
+  loaderHeaders: Headers;
+  parentHeaders: Headers;
+}) {
+  console.log(
+    "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"
+  );
+  return {
+    // This is an example of how to set caching headers for a route
+    // For more info on headers in Remix, see: https://remix.run/docs/en/v1/route/headers
+    "Cache-Control": "public, max-age=60, s-maxage=60",
+  };
+}
+
 export default function Index() {
   return (
-    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
+    <main style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
       <h1>Welcome to Remix</h1>
       <ul>
         <li>
           <a
             target="_blank"
             href="https://remix.run/tutorials/blog"
-            rel="noreferrer"
+            rel="noreferrer noopener"
           >
             15m Quickstart Blog Tutorial
           </a>
@@ -16,17 +33,21 @@ export default function Index() {
           <a
             target="_blank"
             href="https://remix.run/tutorials/jokes"
-            rel="noreferrer"
+            rel="noreferrer noopener"
           >
             Deep Dive Jokes App Tutorial
           </a>
         </li>
         <li>
-          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
+          <a
+            target="_blank"
+            href="https://remix.run/docs"
+            rel="noreferrer noopener"
+          >
             Remix Docs
           </a>
         </li>
       </ul>
-    </div>
+    </main>
   );
 }