From 8f287ee6d31b405a6f20ad8721cce6eb3cdbdc2f Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Fri, 26 Nov 2021 18:02:44 +0000 Subject: [PATCH 01/19] chore(create-remix): simplify Netlify template (#637) --- contributors.yml | 1 + .../create-remix/templates/netlify/README.md | 25 ++++++++----------- .../templates/netlify/netlify.toml | 4 +-- .../templates/netlify/package.json | 5 ++-- 4 files changed, 16 insertions(+), 19 deletions(-) diff --git a/contributors.yml b/contributors.yml index 695162dc759..c669b6705eb 100644 --- a/contributors.yml +++ b/contributors.yml @@ -29,3 +29,4 @@ - ryanflorence - stephanerangaya - zachdtaylor +- ascorbic diff --git a/packages/create-remix/templates/netlify/README.md b/packages/create-remix/templates/netlify/README.md index 8ea7e230ee8..a3851f61928 100644 --- a/packages/create-remix/templates/netlify/README.md +++ b/packages/create-remix/templates/netlify/README.md @@ -10,43 +10,40 @@ 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 +netlify login ``` 3. Create a new site: ```sh - netlify init +netlify init ``` 4. You'll need to tell Netlify to use Node 14, as at the time of writing Netlify uses Node 12 by [default](https://docs.netlify.com/functions/build-with-javascript/#runtime-settings) ```sh - netlify env:set AWS_LAMBDA_JS_RUNTIME nodejs14.x +netlify env:set AWS_LAMBDA_JS_RUNTIME nodejs14.x ``` ## Development -You will be running two processes during development when using Netlify as your server. - -- Your Netlify server in one -- The Remix development server in another +The Netlify CLI starts your app in development mode, rebuilding assets on file changes. ```sh -# in one tab -$ npm run dev:netlify - -# in another -$ npm run dev +npm run dev ``` Open up [http://localhost:3000](http://localhost:3000), and you should be ready to go! -If you'd rather run everything in a single tab, you can look at [concurrently](https://npm.im/concurrently) or similar tools to run both processes in one tab. - ## 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: diff --git a/packages/create-remix/templates/netlify/netlify.toml b/packages/create-remix/templates/netlify/netlify.toml index bb84b6f7941..ec357029edc 100644 --- a/packages/create-remix/templates/netlify/netlify.toml +++ b/packages/create-remix/templates/netlify/netlify.toml @@ -1,10 +1,10 @@ [build] + command = "remix build" functions = "netlify/functions" publish = "public" [dev] - functions = "netlify/functions" - publish = "public" + command = "remix watch" port = 3000 [[redirects]] diff --git a/packages/create-remix/templates/netlify/package.json b/packages/create-remix/templates/netlify/package.json index 0ce480056aa..e95f1ba4638 100644 --- a/packages/create-remix/templates/netlify/package.json +++ b/packages/create-remix/templates/netlify/package.json @@ -2,11 +2,10 @@ "scripts": { "postinstall": "remix setup node", "build": "remix build", - "dev": "remix watch", - "dev:netlify": "cross-env NODE_ENV=development netlify dev" + "dev": "cross-env NODE_ENV=development netlify dev" }, "dependencies": { - "@netlify/functions": "^0.7.2", + "@netlify/functions": "^0.10.0", "@remix-run/netlify": "*" }, "devDependencies": { From 731df73cfb639f2d5f3f6fca6a37cd5d3aa483f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Mon, 29 Nov 2021 17:37:56 +0100 Subject: [PATCH 02/19] refactor: use ternaries rather than && in JSX (#536) --- docs/api/remix.md | 19 ++++++++++-------- docs/guides/api-routes.md | 8 +++++--- docs/guides/data-writes.md | 20 +++++++++---------- docs/guides/mdx.md | 4 +++- docs/guides/optimistic-ui.md | 2 +- docs/tutorials/blog.md | 10 +++++++--- examples/basic/app/root.tsx | 2 +- examples/blog-tutorial/app/root.tsx | 2 +- .../blog-tutorial/app/routes/admin/new.tsx | 11 +++++----- examples/jokes/app/root.tsx | 2 +- fixtures/gists-app/app/root.jsx | 4 ++-- fixtures/gists-app/app/routes/blog/index.tsx | 2 +- fixtures/gists-app/app/routes/fetchers.tsx | 12 +++++------ fixtures/gists-app/app/routes/gists.jsx | 2 +- .../templates/_shared_js/app/root.jsx | 2 +- .../templates/_shared_ts/app/root.tsx | 2 +- packages/remix-react/components.tsx | 4 ++-- 17 files changed, 60 insertions(+), 48 deletions(-) diff --git a/docs/api/remix.md b/docs/api/remix.md index dad6b96c1ad..8870fa6548e 100644 --- a/docs/api/remix.md +++ b/docs/api/remix.md @@ -273,13 +273,15 @@ export default function Signup() {

- {errors?.email && {errors.email}} + {errors?.email ? ( + {errors.email} + ) : null}

- {errors?.password && ( + {errors?.password ? ( {errors.password} - )} + ) : null}

@@ -399,9 +401,9 @@ function UserPreferences() { {" "} Dark Mode - {transition.state === "submitting" && ( + {transition.state === "submitting" ? (

Saving...

- )} + ) : null}
); } @@ -748,12 +750,13 @@ function NewsletterSignup() {

- {newsletter.type === "done" && - (newsletter.data.ok ? ( + {newsletter.type === "done" ? ( + newsletter.data.ok ? (

Thanks for subscribing!

) : newsletter.data.error ? (

{newsletter.data.error}

- ) : null)} + ) : null + ) : null} ); } diff --git a/docs/guides/api-routes.md b/docs/guides/api-routes.md index 4316ae8e8fb..4c9e5276126 100644 --- a/docs/guides/api-routes.md +++ b/docs/guides/api-routes.md @@ -55,10 +55,12 @@ function CitySearchCombobox() { cities.submit(event.target.form) } /> - {cities.state === "submitting" && } + {cities.state === "submitting" ? ( + + ) : null} - {cities.data && ( + {cities.data ? ( {cities.data.error ? (

Failed to load cities :(

@@ -75,7 +77,7 @@ function CitySearchCombobox() { No results found )}
- )} + ) : null} ); diff --git a/docs/guides/data-writes.md b/docs/guides/data-writes.md index daeafc57b83..b3bf733a2f3 100644 --- a/docs/guides/data-writes.md +++ b/docs/guides/data-writes.md @@ -248,11 +248,11 @@ export default function NewProject() {

- {actionData?.errors.name && ( + {actionData?.errors.name ? (

{actionData.errors.name}

- )} + ) : null}

- {actionData?.errors.description && ( + {actionData?.errors.description ? (

{actionData.errors.description}

- )} + ) : null}

@@ -346,11 +346,11 @@ export default function NewProject() {

- {actionData && actionData.errors.name && ( + {actionData && actionData.errors.name ? (

{actionData.errors.name}

- )} + ) : null}

- {actionData && actionData.errors.description && ( + {actionData && actionData.errors.description ? (

{actionData.errors.description}

- )} + ) : null}