feat(_official-blog-tutorial): update to latest indie-stack (#198)

Author: MichaelDeBoey

_official-blog-tutorial/.eslintrc.js

@@ -1,4 +1,21 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
+  extends: [
+    "@remix-run/eslint-config",
+    "@remix-run/eslint-config/node",
+    "@remix-run/eslint-config/jest-testing-library",
+    "prettier",
+  ],
+  env: {
+    "cypress/globals": true,
+  },
+  plugins: ["cypress"],
+  // we're using vitest which has a very similar API to jest
+  // (so the linting plugins work nicely), but it means we have to explicitly
+  // set the jest version.
+  settings: {
+    jest: {
+      version: 28,
+    },
+  },
 };

_official-blog-tutorial/.github/workflows/deploy.yml

@@ -6,13 +6,17 @@ on:
       - dev
   pull_request: {}
 
+permissions:
+  actions: write
+  contents: read
+
 jobs:
   lint:
     name: ⬣ ESLint
     runs-on: ubuntu-latest
     steps:
       - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.9.1
+        uses: styfle/cancel-workflow-action@0.11.0
 
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v3
@@ -24,6 +28,8 @@ jobs:
 
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
 
       - name: 🔬 Lint
         run: npm run lint
@@ -33,7 +39,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.9.1
+        uses: styfle/cancel-workflow-action@0.11.0
 
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v3
@@ -45,6 +51,8 @@ jobs:
 
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
 
       - name: 🔎 Type check
         run: npm run typecheck --if-present
@@ -54,7 +62,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.9.1
+        uses: styfle/cancel-workflow-action@0.11.0
 
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v3
@@ -66,6 +74,8 @@ jobs:
 
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
 
       - name: ⚡ Run vitest
         run: npm run test -- --coverage
@@ -75,7 +85,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.9.1
+        uses: styfle/cancel-workflow-action@0.11.0
 
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v3
@@ -90,6 +100,8 @@ jobs:
 
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
 
       - name: 🛠 Setup Database
         run: npx prisma migrate reset --force
@@ -98,7 +110,7 @@ jobs:
         run: npm run build
 
       - name: 🌳 Cypress run
-        uses: cypress-io/github-action@v3
+        uses: cypress-io/github-action@v5
         with:
           start: npm run start:mocks
           wait-on: "http://localhost:8811"
@@ -112,39 +124,39 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.9.1
+        uses: styfle/cancel-workflow-action@0.11.0
 
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v3
 
       - name: 👀 Read app name
-        uses: SebRollen/[email protected].0
+        uses: SebRollen/[email protected].2
         id: app_name
         with:
           file: "fly.toml"
           field: "app"
 
       - name: 🐳 Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v2
 
       # Setup cache
       - name: ⚡️ Cache Docker layers
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: /tmp/.buildx-cache
           key: ${{ runner.os }}-buildx-${{ github.sha }}
           restore-keys: |
             ${{ runner.os }}-buildx-
 
       - name: 🔑 Fly Registry Auth
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           registry: registry.fly.io
           username: x
           password: ${{ secrets.FLY_API_TOKEN }}
 
       - name: 🐳 Docker build
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v4
         with:
           context: .
           push: true
@@ -173,13 +185,13 @@ jobs:
 
     steps:
       - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.9.1
+        uses: styfle/cancel-workflow-action@0.11.0
 
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v3
 
       - name: 👀 Read app name
-        uses: SebRollen/[email protected].0
+        uses: SebRollen/[email protected].2
         id: app_name
         with:
           file: "fly.toml"

_official-blog-tutorial/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

_official-blog-tutorial/Dockerfile

@@ -12,7 +12,7 @@ FROM base as deps
 
 WORKDIR /myapp
 
-ADD package.json package-lock.json ./
+ADD package.json .npmrc ./
 RUN npm install --production=false
 
 # Setup production node_modules
@@ -21,7 +21,7 @@ FROM base as production-deps
 WORKDIR /myapp
 
 COPY --from=deps /myapp/node_modules /myapp/node_modules
-ADD package.json package-lock.json ./
+ADD package.json .npmrc ./
 RUN npm prune --production
 
 # Build the app
@@ -54,6 +54,8 @@ COPY --from=build /myapp/node_modules/.prisma /myapp/node_modules/.prisma
 
 COPY --from=build /myapp/build /myapp/build
 COPY --from=build /myapp/public /myapp/public
-ADD . .
+COPY --from=build /myapp/package.json /myapp/package.json
+COPY --from=build /myapp/start.sh /myapp/start.sh
+COPY --from=build /myapp/prisma /myapp/prisma
 
-CMD ["npm", "start"]
+ENTRYPOINT [ "./start.sh" ]

_official-blog-tutorial/README.md

@@ -5,7 +5,7 @@
 Learn more about [Remix Stacks](https://remix.run/stacks).
 
 ```sh
-npx create-remix --template remix-run/indie-stack
+npx create-remix@latest --template remix-run/indie-stack
 ```
 
 ## What's in the stack
@@ -30,20 +30,20 @@ Not a fan of bits of the stack? Fork it, change it, and use `npx create-remix --
 
 Click this button to create a [Gitpod](https://gitpod.io) workspace with the project set up and Fly pre-installed
 
-[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
+[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/remix-run/indie-stack/tree/main)
 
 ## Development
 
-- Initial setup: _If you just generated this project, this step has been done for you._
+- This step only applies if you've opted out of having the CLI install dependencies for you:
 
   ```sh
-  npm run setup
+  npx remix init
   ```
 
-- Validate the app has been set up properly (optional):
+- Initial setup: _If you just generated this project, this step has been done for you._
 
   ```sh
-  npm run validate
+  npm run setup
   ```
 
 - Start dev server:
@@ -57,7 +57,7 @@ This starts your app in development mode, rebuilding assets on file changes.
 The database seed script creates a new user with some data you can use to get started:
 
 - Email: `[email protected]`
-- Password: `rachelrox`
+- Password: `racheliscool`
 
 ### Relevant code:
 
@@ -81,14 +81,28 @@ Prior to your first deployment, you'll need to do a few things:
   fly auth signup
   ```
 
+  > **Note:** If you have more than one Fly account, ensure that you are signed into the same account in the Fly CLI as you are in the browser. In your terminal, run `fly auth whoami` and ensure the email matches the Fly account signed into the browser.
+
 - Create two apps on Fly, one for staging and one for production:
 
   ```sh
-  fly create blog-tutorial-ffb5
-  fly create blog-tutorial-ffb5-staging
+  fly apps create blog-tutorial-ffb5
+  fly apps create blog-tutorial-ffb5-staging
   ```
 
-- Create a new [GitHub Repository](https://repo.new)
+  > **Note:** Make sure this name matches the `app` set in your `fly.toml` file. Otherwise, you will not be able to deploy.
+
+  - Initialize Git.
+
+  ```sh
+  git init
+  ```
+
+- Create a new [GitHub Repository](https://repo.new), and then add it as the remote for your project. **Do not push your app yet!**
+
+  ```sh
+  git remote add origin <ORIGIN_URL>
+  ```
 
 - Add a `FLY_API_TOKEN` to your GitHub repo. To do this, go to your user settings on Fly and create a new [token](https://web.fly.io/user/personal_access_tokens/new), then add it to [your repo secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets) with the name `FLY_API_TOKEN`.
 
@@ -99,7 +113,7 @@ Prior to your first deployment, you'll need to do a few things:
   fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app blog-tutorial-ffb5-staging
   ```
 
-  If you don't have openssl installed, you can also use [1password](https://1password.com/password-generator) to generate a random secret, just replace `$(openssl rand -hex 32)` with the generated secret.
+  If you don't have openssl installed, you can also use [1Password](https://1password.com/password-generator) to generate a random secret, just replace `$(openssl rand -hex 32)` with the generated secret.
 
 - Create a persistent volume for the sqlite database for both your staging and production environments. Run the following:
 
@@ -108,7 +122,15 @@ Prior to your first deployment, you'll need to do a few things:
   fly volumes create data --size 1 --app blog-tutorial-ffb5-staging
   ```
 
-Now that everything is set up, you can commit and push your changes to your repo. Every commit to your `main` branch will trigger a deployment to your production environment, and every commit to your `dev` branch will trigger a deployment to your staging environment.
+Now that everything is set up you can commit and push your changes to your repo. Every commit to your `main` branch will trigger a deployment to your production environment, and every commit to your `dev` branch will trigger a deployment to your staging environment.
+
+### Connecting to your database
+
+The sqlite database lives at `/data/sqlite.db` in your deployed application. You can connect to the live database by running `fly ssh console -C database-cli`.
+
+### Getting Help with Deployment
+
+If you run into any issues deploying to Fly, make sure you've followed all of the steps above and if you have, then post as many details about your deployment (including your app name) to [the Fly support community](https://community.fly.io). They're normally pretty responsive over there and hopefully can help resolve any of your deployment issues and questions.
 
 ## GitHub Actions
 

_official-blog-tutorial/app/db.server.ts

@@ -17,6 +17,7 @@ if (process.env.NODE_ENV === "production") {
     global.__db__ = new PrismaClient();
   }
   prisma = global.__db__;
+  prisma.$connect();
 }
 
 export { prisma };

_official-blog-tutorial/app/models/note.server.ts

@@ -9,6 +9,7 @@ export function getNote({
   userId: User["id"];
 }) {
   return prisma.note.findFirst({
+    select: { id: true, body: true, title: true },
     where: { id, userId },
   });
 }

_official-blog-tutorial/app/models/user.server.ts

@@ -1,5 +1,5 @@
-import bcrypt from "@node-rs/bcrypt";
 import type { Password, User } from "@prisma/client";
+import bcrypt from "bcryptjs";
 
 import { prisma } from "~/db.server";
 
@@ -47,7 +47,10 @@ export async function verifyLogin(
     return null;
   }
 
-  const isValid = await bcrypt.verify(password, userWithPassword.password.hash);
+  const isValid = await bcrypt.compare(
+    password,
+    userWithPassword.password.hash
+  );
 
   if (!isValid) {
     return null;

_official-blog-tutorial/app/root.tsx

@@ -1,4 +1,4 @@
-import type { LinksFunction, LoaderArgs, MetaFunction } from "@remix-run/node";
+import type { LinksFunction, LoaderArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import {
   Links,
@@ -9,18 +9,12 @@ import {
   ScrollRestoration,
 } from "@remix-run/react";
 
-import { getUser } from "./session.server";
-import tailwindStylesheetUrl from "./styles/tailwind.css";
+import { getUser } from "~/session.server";
+import tailwindStylesheetUrl from "~/styles/tailwind.css";
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: tailwindStylesheetUrl }];
-};
-
-export const meta: MetaFunction = () => ({
-  charset: "utf-8",
-  title: "Remix Notes",
-  viewport: "width=device-width,initial-scale=1",
-});
+export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: tailwindStylesheetUrl },
+];
 
 export const loader = async ({ request }: LoaderArgs) => {
   return json({ user: await getUser(request) });
@@ -30,6 +24,8 @@ export default function App() {
   return (
     <html lang="en" className="h-full">
       <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
         <Links />
       </head>