Merge pull request #95 from netlify/nickytonline/fixes-to-netlify-functions-template

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

Author: nickytonline

.gitignore

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

package.json

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

remix.config.js

@@ -1,13 +1,18 @@
+const baseConfig =
+  process.env.NODE_ENV === "production"
+    ? // when running the Netify CLI or building on Netlify, we want to use
+      {
+        server: "./server.js",
+        serverBuildPath: ".netlify/functions-internal/server.js",
+      }
+    : // otherwise support running remix dev, i.e. no custom server
+      undefined;
+
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
-  serverBuildTarget: "netlify",
-  server:
-    process.env.NETLIFY || process.env.NETLIFY_LOCAL
-      ? "./server.js"
-      : undefined,
+  ...baseConfig,
   ignoredRouteFiles: ["**/.*"],
-  // appDirectory: "app",
-  // assetsBuildDirectory: "public/build",
-  // serverBuildPath: ".netlify/functions-internal/server.js",
-  // publicPath: "/build/",
+  // add your own custom config here if you want to.
+  //
+  // See https://remix.run/docs/en/v1/file-conventions/remix-config
 };

remix.init/README.md

@@ -37,15 +37,27 @@ Ensure all packages are installed by running:
 npm install
 ```
 
-The Netlify CLI starts your app in development mode, rebuilding assets on file changes.
+Run
 
 ```sh
-npm run dev
+netlify dev
 ```
 
-Open up [http://localhost:3000](http://localhost:3000), and you should be ready to go!
+Open up [http://localhost:8888](http://localhost:8888), and you're 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.
+### Adding Redirects and Rewrites
+
+To add redirects and rewrites, add them to the `netlify.toml` file or to the [\_app_redirects](_app_redirects) file. For more information about redirects and rewrites, see the [Netlify docs](https://docs.netlify.com/routing/redirects/).
+
+### Serve your site locally
+
+Run
+
+```sh
+npm run start
+```
+
+to serve your site locally at [http://localhost:8888](http://localhost:8888).
 
 ## Deployment
 

remix.init/_app_redirects

@@ -0,0 +1,7 @@
+# This template uses this file instead of the typicial Netlify _redirects file.
+# For more information about redirects and rewrites, see https://docs.netlify.com/routing/redirects/.
+
+# Do not remove the line below. This is required to serve the site when deployed.
+/\* /.netlify/functions/server 200
+
+# Add other redirects and rewrites here and/or in your netlify.toml

remix.init/index.js

@@ -18,7 +18,11 @@ const edgeFilesToCopy = [
 ];
 
 // Netlify Functions template file changes
-const filesToCopy = [["README.md"], ["netlify-toml", "netlify.toml"]];
+const filesToCopy = [
+  ["README.md"],
+  ["netlify-toml", "netlify.toml"],
+  ["_app_redirects"],
+];
 
 const tsExtensionMatcher = /\.ts(x?)$/;
 

remix.init/netlify-toml

@@ -1,11 +1,10 @@
 [build]
-command = "remix build"
+command = "remix build && cp _app_redirects public/_redirects"
 publish = "public"
 
-[[redirects]]
-from = "/*"
-to = "/.netlify/functions/server"
-status = 200
+[dev]
+command = "npm run dev"
+targetPort = 3000
 
 [[headers]]
 for = "/build/*"