Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 10 commits into from
Jul 16, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
cc86eec
chore: improve DX for Netlify serverless template
nickytonline Jul 15, 2022
9b15f14
added myself as a contributor to Remix
nickytonline Jul 15, 2022
93a9227
Merge branch 'main' into update-netlify-functions-template
nickytonline Jul 15, 2022
1fb52c8
chore: updated some documentation
nickytonline Jul 15, 2022
b19f8f1
changed conditional check for generating Remix config
nickytonline Jul 15, 2022
1b7ed45
Update templates/netlify/README.md
nickytonline Jul 15, 2022
fa7bbc5
Update templates/netlify/README.md
nickytonline Jul 15, 2022
433b0f0
Update templates/netlify/README.md
nickytonline Jul 15, 2022
6304e22
chore: added a link to Netlify Functions in the Netlify README
nickytonline Jul 15, 2022
8138f2b
updated deployment commands
nickytonline Jul 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions contributors.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,6 +286,7 @@
- nexxeln
- ni554n
- nicholaschiang
- nickytonline
- niconiahi
- nielsdb97
- ninjaPixel
Expand Down
18 changes: 14 additions & 4 deletions templates/netlify/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Welcome to Remix!

- [Remix Docs](https://remix.run/docs)
- [Netlify Functions](https://www.netlify.com/products/functions/)

## Netlify Setup

Expand Down Expand Up @@ -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
```
3 changes: 2 additions & 1 deletion templates/netlify/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand All @@ -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",
Expand Down
5 changes: 4 additions & 1 deletion templates/netlify/remix.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
serverBuildTarget: "netlify",
server: "./server.js",
server:
Copy link
Contributor Author

@nickytonline nickytonline Jul 15, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This check is to ensure we do not start the Netlify function to run the Remix app server when running npm run dev, i.e. remix dev as you can't run a custom server via remix dev. Without this check, if you run remix dev it will error out with the following message:

Error: remix dev is not supported for custom servers.
    at Object.dev (/Users/some_user/dev/issues/remix-tailwind/node_modules/@remix-run/dev/cli/commands.js:260:11)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at Object.run (/Users/some_user/dev/issues/remix-tailwind/node_modules/@remix-run/dev/cli/run.js:499:7)
ERROR: "dev:remix" exited with 1.

process.env.NETLIFY || process.env.NETLIFY_LOCAL
? "./server.js"
: undefined,
ignoredRouteFiles: ["**/.*"],
// appDirectory: "app",
// assetsBuildDirectory: "public/build",
Expand Down