templates(netlify): improve DX for Netlify serverless template (#3754)

* chore: improve DX for Netlify serverless template * added myself as a contributor to Remix * chore: updated some documentation * changed conditional check for generating Remix config * Update templates/netlify/README.md Co-authored-by: Kyle Rollins <kyleblankrollins@gmail.com> * Update templates/netlify/README.md Co-authored-by: Kyle Rollins <kyleblankrollins@gmail.com> * Update templates/netlify/README.md Co-authored-by: Kyle Rollins <kyleblankrollins@gmail.com> * chore: added a link to Netlify Functions in the Netlify README * updated deployment commands Co-authored-by: Kyle Rollins <kyleblankrollins@gmail.com>
remix-run · Jul 16, 2022 · 99d98bd · 99d98bd
1 parent d09663e
commit 99d98bd
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 6 deletions.
diff --git a/contributors.yml b/contributors.yml
@@ -286,6 +286,7 @@
 - nexxeln
 - ni554n
 - nicholaschiang
+- nickytonline
 - niconiahi
 - nielsdb97
 - ninjaPixel

diff --git a/templates/netlify/README.md b/templates/netlify/README.md
@@ -1,6 +1,7 @@
 # Welcome to Remix!
 
 - [Remix Docs](https://remix.run/docs)
+- [Netlify Functions](https://www.netlify.com/products/functions/)
 
 ## Netlify Setup
 
@@ -30,23 +31,32 @@ netlify init
 
 ## Development
 
-The Netlify CLI starts your app in development mode, rebuilding assets on file changes.
+The Remix dev server starts your app in development mode, rebuilding assets on file changes. To start the Remix dev server:
 
 ```sh
 npm run dev
 ```
 
 Open up [http://localhost:3000](http://localhost:3000), and you should be ready to go!
 
+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.
+
+```sh
+netlify dev
+```
+
+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
-npm run build
 # preview deployment
-netlify deploy
+netlify deploy --build
 
 # production deployment
-netlify deploy --prod
+netlify deploy --build --prod
 ```
diff --git a/templates/netlify/package.json b/templates/netlify/package.json
@@ -3,7 +3,7 @@
   "sideEffects": false,
   "scripts": {
     "build": "remix build",
-    "dev": "cross-env NODE_ENV=development netlify dev",
+    "dev": "remix dev",
     "start": "cross-env NODE_ENV=production netlify dev"
   },
   "dependencies": {
@@ -18,6 +18,7 @@
   "devDependencies": {
     "@remix-run/dev": "*",
     "@remix-run/eslint-config": "*",
+    "@remix-run/serve": "*",
     "@types/react": "^17.0.45",
     "@types/react-dom": "^17.0.17",
     "eslint": "^8.15.0",

diff --git a/templates/netlify/remix.config.js b/templates/netlify/remix.config.js
@@ -1,7 +1,10 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
   serverBuildTarget: "netlify",
-  server: "./server.js",
+  server:
+    process.env.NETLIFY || process.env.NETLIFY_LOCAL
+      ? "./server.js"
+      : undefined,
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",