remix-run / grunge-stack

The Remix Stack for deploying to AWS with DynamoDB, authentication, testing, linting, formatting, etc.

Remix Grunge Stack

Learn more about Remix Stacks.

npx create-remix@latest --template remix-run/grunge-stack

What's in the stack

• AWS deployment with Architect
• Production-ready DynamoDB Database
• GitHub Actions for deploy on merge to production and staging environments
• Email/Password Authentication with cookie-based sessions
• DynamoDB access via arc.tables
• Styling with Tailwind
• End-to-end testing with Cypress
• Local third party request mocking with MSW
• Unit testing with Vitest and Testing Library
• Code formatting with Prettier
• Linting with ESLint
• Static Types with TypeScript

Not a fan of bits of the stack? Fork it, change it, and use npx create-remix --template your/repo! Make it your own.

Quickstart

Click this button to create a Gitpod workspace with the project set up

Development

• First run this stack's remix.init script and commit the changes it makes to your project.

  npx remix init
  git init # if you haven't already
  git add .
  git commit -m "Initialize project"

• Validate the app has been set up properly (optional):

  npm run validate

• Start dev server:

  npm run dev

This starts your app in development mode, rebuilding assets on file changes.

Relevant code:

This is a pretty simple note-taking app, but it's a good example of how you can build a full stack app with Architect and Remix. The main functionality is creating users, logging in and out, and creating and deleting notes.

• creating users, and logging in and out ./app/models/user.server.ts
• user sessions, and verifying them ./app/session.server.ts
• creating, and deleting notes ./app/models/note.server.ts

The database that comes with arc sandbox is an in memory database, so if you restart the server, you'll lose your data. The Staging and Production environments won't behave this way, instead they'll persist the data in DynamoDB between deployments and Lambda executions.

Deployment

This Remix Stack comes with two GitHub Actions that handle automatically deploying your app to production and staging environments. By default, Arc will deploy to the us-west-2 region, if you wish to deploy to a different region, you'll need to change your app.arc

Prior to your first deployment, you'll need to do a few things:

• Create a new GitHub repo

• Sign up and login to your AWS account

• Add AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY to your GitHub repo's secrets. Go to your AWS security credentials and click on the "Access keys" tab, and then click "Create New Access Key", then you can copy those and add them to your repo's secrets.

• Install the AWS CLI.

• Create an AWS credentials file.

• Along with your AWS credentials, you'll also need to give your CloudFormation a SESSION_SECRET variable of its own for both staging and production environments, as well as an ARC_APP_SECRET for Arc itself.

  npx arc env --add --env staging ARC_APP_SECRET $(openssl rand -hex 32)
  npx arc env --add --env staging SESSION_SECRET $(openssl rand -hex 32)
  npx arc env --add --env production ARC_APP_SECRET $(openssl rand -hex 32)
  npx arc env --add --env production SESSION_SECRET $(openssl rand -hex 32)

  If you don't have openssl installed, you can also use 1password to generate a random secret, just replace $(openssl rand -hex 32) with the generated secret.

Where do I find my CloudFormation?

You can find the CloudFormation template that Architect generated for you in the sam.yaml file.

To find it on AWS, you can search for CloudFormation (make sure you're looking at the correct region!) and find the name of your stack (the name is a PascalCased version of what you have in app.arc, so by default it's RemixGrungeStackStaging and RemixGrungeStackProduction) that matches what's in app.arc, you can find all of your app's resources under the "Resources" tab.

GitHub Actions

We use GitHub Actions for continuous integration and deployment. Anything that gets into the main branch will be deployed to production after running tests/build/etc. Anything in the dev branch will be deployed to staging.

Testing

Cypress

We use Cypress for our End-to-End tests in this project. You'll find those in the cypress directory. As you make changes, add to an existing file or create a new file in the cypress/e2e directory to test your changes.

We use @testing-library/cypress for selecting elements on the page semantically.

To run these tests in development, run npm run test:e2e:dev which will start the dev server for the app as well as the Cypress client. Make sure the database is running in docker as described above.

We have a utility for testing authenticated features without having to go through the login flow:

cy.login();
// you are now logged in as a new user

Vitest

For lower level tests of utilities and individual components, we use vitest. We have DOM-specific assertion helpers via @testing-library/jest-dom.

Type Checking

This project uses TypeScript. It's recommended to get TypeScript set up for your editor to get a really great in-editor experience with type checking and auto-complete. To run type checking across the whole project, run npm run typecheck.

Linting

This project uses ESLint for linting. That is configured in .eslintrc.js.

Formatting

We use Prettier for auto-formatting in this project. It's recommended to install an editor plugin (like the VSCode Prettier plugin) to get auto-formatting on save. There's also a npm run format script you can run to format all files in the project.

grunge-stack's Issues

Fresh Grunge-Stack results in many browser console errors

Have you experienced this bug with the latest version of the template?

Yes

Steps to Reproduce

1. npx create-remix --template remix-run/grunge-stack
2. npx remix init
3. npm run dev

NOTE: This is completely fresh first run, no changes made at all.

Expected Behavior

No errors in console.

Actual Behavior

Warning: server timed out after hitting its 5s timeout!

Have you experienced this bug with the latest version of the template?

yes

Steps to Reproduce

Create a folder on a windows drive from within WSL and setup project there

mkdir /mnt/c/dev
cd dev 
npx create-remix --template remix-run/grunge-stack

-- or --

npm run validate

Result:

✓ Sandbox Started file watcher
Watching Remix app in development mode...
⚠️  Test routes enabled.
⚠️ Warning: mnt/c/dev/chess2/server timed out after hitting its 5s timeout!
⚠️ Warning: mnt/c/dev/chess2/server timed out after hitting its 5s timeout!
⚠️ Warning: mnt/c/dev/chess2/server timed out after hitting its 5s timeout!
⚠️ Warning: mnt/c/dev/chess2/server timed out after hitting its 5s timeout!
...

If the project is created in a linux folder (e.g. ~/dev/) it works just fine.

Expected Behavior

Tests run through

Actual Behavior

⚠️ Warning: mnt/c/dev/chess2/server timed out after hitting its 5s timeout!

is repeated forever

401 Unauthorized at localhost. Clerk error integration

Have you experienced this bug with the latest version of the template?

Yes

Steps to Reproduce

1. Installing grunge-stack
2. Integrate Clerk according to official documentation (https://clerk.com/docs/quickstarts/remix)

Expected Behavior

Redirect to the sign-in screen.

Actual Behavior

Infinite loop because of 401 Unauthorized

Do not recommend creating long lived credentials for Github Actions

This is no longer required and I'd love to not see new projects start off using this legacy approach. AWS + Github can auth through OIDC

Article explaining what I'm talking about:
https://awsteele.com/blog/2021/09/15/aws-federation-comes-to-github-actions.html

Example cfn

Parameters:
  FullRepoName:
    Type: String
    Default: <full-repo-name>
Resources:
  Role:
    Type: 'AWS::IAM::Role'
    Properties:
      RoleName: github
      ManagedPolicyArns:
        - 'arn:aws:iam::aws:policy/AdministratorAccess'
      AssumeRolePolicyDocument:
        Statement:
          - Effect: Allow
            Action: 'sts:AssumeRoleWithWebIdentity'
            Principal:
              Federated: !Ref GithubOidc
            Condition:
              StringLike:
                'token.actions.githubusercontent.com:sub': !Sub 'repo:${FullRepoName}:*'
  GithubOidc:
    Type: 'AWS::IAM::OIDCProvider'
    Properties:
      Url: 'https://token.actions.githubusercontent.com'
      ThumbprintList:
        - 6938fd4d98bab03faadb97b34396831e3780aea1
      ClientIdList:
        - "sts.amazonaws.com"
Outputs:
  Role:
    Value: !GetAtt Role.Arn

Example step in github

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          role-to-assume: <role>
          aws-region: us-east-1

Error: Invariant failed: SESSION_SECRET must be set

What version of Remix are you using?

1.5.1

Steps to Reproduce

npx create-remix
gave it a name
chose "a pre-configured stack ready for prod..."
chose "Grunge" stack
chose "Typescript"
do you want me to run npm install? no
cd into new project directory
yarn
yarn dev
visit localhost:3000
see error

---

"dependencies": {
"@architect/architect": "^10.3.3",
"@architect/functions": "^5.1.0",
"@remix-run/architect": "^1.5.1",
"@remix-run/node": "^1.5.1",
"@remix-run/react": "^1.5.1",
"@remix-run/server-runtime": "^1.5.1",
"bcryptjs": "2.4.3",
"cuid": "^2.1.8",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"tiny-invariant": "^1.2.0"

Expected Behavior

run dev should load the initial page

Actual Behavior

getting this error:

Error

Process exited with 1

/home/user/MyProjects/remix-samples-rn/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:14
    throw new Error(value);
          ^
/home/user/MyProjects/remix-samples-rn/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:14
    throw new Error(value);
    ^

Error: Invariant failed: SESSION_SECRET must be set
    at invariant (/home/user/MyProjects/remix-samples-rn/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:14:11)
    at Object. (/home/user/MyProjects/remix-samples-rn/app/session.server.ts:7:1)
    at Module._compile (node:internal/modules/cjs/loader:1109:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at [eval]:1:336
    at Script.runInThisContext (node:vm:131:12)

Setup fails

Have you experienced this bug with the latest version of the template?

yes

Steps to Reproduce

$ npx create-remix@latest --template remix-run/grunge-stack
? Where would you like to create your app? ./my-remix-app
? TypeScript or JavaScript? TypeScript
? Do you want me to run `npm install`? Yes

...

failed to load config from /Users/agonzalezjr/code/bluejay/my-remix-app/vitest.config.ts

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Error: Cannot find module 'node:path'
Require stack:
- /Users/agonzalezjr/code/bluejay/my-remix-app/node_modules/@vitejs/plugin-react/dist/index.cjs
- /Users/agonzalezjr/code/bluejay/my-remix-app/vitest.config.ts
- /Users/agonzalezjr/code/bluejay/my-remix-app/node_modules/vite/dist/node/chunks/dep-d29b4e33.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15)
    at Function.Module._load (internal/modules/cjs/loader.js:730:27)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/agonzalezjr/code/bluejay/my-remix-app/node_modules/@vitejs/plugin-react/dist/index.cjs:3:14)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Object._require.extensions.<computed> [as .js] (file:///Users/agonzalezjr/code/bluejay/my-remix-app/node_modules/vite/dist/node/chunks/dep-d29b4e33.js:64030:17)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/agonzalezjr/code/bluejay/my-remix-app/node_modules/@vitejs/plugin-react/dist/index.cjs',
    '/Users/agonzalezjr/code/bluejay/my-remix-app/vitest.config.ts',
    '/Users/agonzalezjr/code/bluejay/my-remix-app/node_modules/vite/dist/node/chunks/dep-d29b4e33.js'
  ]
}



npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-remix-app-2d72@ test: `vitest "--run"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the my-remix-app-2d72@ test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/agonzalezjr/.npm/_logs/2022-10-29T19_47_48_046Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-remix-app-2d72@ test:e2e:run: `cross-env PORT=8811 start-server-and-test dev http://localhost:8811 "npx cypress run"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the my-remix-app-2d72@ test:e2e:run script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/agonzalezjr/.npm/_logs/2022-10-29T19_47_48_168Z-debug.log
ERROR: "test -- --run" exited with 1.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-remix-app-2d72@ validate: `run-p "test -- --run" lint typecheck test:e2e:run`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the my-remix-app-2d72@ validate script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/agonzalezjr/.npm/_logs/2022-10-29T19_47_48_215Z-debug.log
🚨 Oops, remix.init failed

Command failed: npm run validate 

Expected Behavior

Setup finishes without errors.

Actual Behavior

Setup fails.

"Lambda handler not found" error due to change in `@architect/architect` v10.6.0

Have you experienced this bug with the latest version of the template?

Yes

Steps to Reproduce

1. Upgrade @architect/architect to >=10.6
2. npm run dev
3. See error (occasionally)

Expected Behavior

Arc sandbox should detect the server file and run without issue.

Actual Behavior

There is a race condition between remix watch and void arc() that results in arc intermittently not being able to find the server build artifact. This happens pretty consistently on first boot or if the server/ directory is deleted before the build.

Installation fails

Have you experienced this bug with the latest version of the template?

Yes

Steps to Reproduce

1. Run the command npx create-remix@latest --template remix-run/grunge-stack
2. Answer the default answer to each and every question

Expected Behavior

A working project.

Actual Behavior

Here's the default installation:

jari@lucille Sources % npx create-remix@latest --template remix-run/grunge-stack


 remix   v2.6.0 💿 Let's build a better website...

   dir   Where should we create your new project?
         ./my-remix-app

      ◼  Template: Using remix-run/grunge-stack...
      ✔  Template copied

   git   Initialize a new git repository?
         Yes

  deps   Install dependencies with npm?
         Yes

  init   This template has a remix.init script. Do you want to run it?
         Yes

 ██████  Dependencies installing with npm...

      ▲  Oh no! Failed to install dependencies.
jari@lucille Sources %

If we look deeper, it shows the following error:

jari@lucille Sources % cd my-remix-app
jari@lucille my-remix-app % npm install
npm ERR! code ERESOLVE
[...]
npm ERR! While resolving: @remix-run/[email protected]
npm ERR! Found: [email protected]
[...]
npm ERR! Conflicting peer dependency: [email protected]
[...]
jari@lucille my-remix-app %

remix grunge stack aws

Have you experienced this bug with the latest version of the template?

npx create-remix@latest --template remix-run/grunge-stack

Steps to Reproduce

HP-ProBook-450-G3:~$ npx create-remix@latest --template remix-run/grunge-stack
(node:24084) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
(Use node --trace-deprecation ... to show where the warning was created)

remix v2.4.0 💿 Let's build a better website...

dir Where should we create your new project?
./remixawstest

Expected Behavior

Setup finishes without errors. Go ahead..

Actual Behavior

  ◼  Template: Using remix-run/grunge-stack...
  ✔  Template copied

git Initialize a new git repository?
Yes

deps Install dependencies with npm?
Yes

init This template has a remix.init script. Do you want to run it?
Yes

██████ Dependencies installing with npm...

  ▲  Oh no! Failed to install dependencies.

msw doesn't seem to actually work with this setup

Not sure if I'm doing something wrong but when I run npm run dev I see that the mocks are being started and loaded with this log console.info("🔶 Mock server running");

However, if I change onUnhandledRequest to "error" like this server.listen({ onUnhandledRequest: "error" }); I never see any errors or logs about unhandled requests even though I'm definitely making requests to Stripe.

I've tried all sorts of things to debug but can't make progress.

Any ideas?

edit: seems like the sanbox is likely starting separate node processes to run the lambdas which MSW won't see.

Starting project is throwing Error [ERR_PACKAGE_PATH_NOT_EXPORTED] error

Have you experienced this bug with the latest version of the template?

Yeah

Steps to Reproduce

1. Create a new project with grunge-stack
2. Start application using npm run dev

Expected Behavior

Expected application to run normally.

Actual Behavior

Following error thrown in cmd and application is not started

internal/modules/cjs/loader.js:456
      throw e;
      ^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib' is not defined by "exports" in /Users/chenchunaidu/Programming/Personal/Product/recomnd/node_modules/headers-polyfill/package.json
    at new NodeError (internal/errors.js:322:7)
    at throwExportsNotFound (internal/modules/esm/resolve.js:332:9)
    at packageExportsResolve (internal/modules/esm/resolve.js:565:3)
    at resolveExports (internal/modules/cjs/loader.js:450:36)
    at Function.Module._findPath (internal/modules/cjs/loader.js:490:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:888:27)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.<anonymous> (/Users/chenchunaidu/Programming/Personal/Product/recomnd/node_modules/msw/src/utils/request/MockedRequest.ts:5:25)
    

Updating grunge-stack to lastest versions

Have you experienced this bug with the latest version of the template?

Yes

Steps to Reproduce

As the software evolves, the stack should be such that is could be updated to latest version. To this end, I suggest that grunge-stack is updated to latest versions.

I have tried this manually and was able to fix a few errors:

1. A few packages must be added explicitly (@smithy/node-http-handler, @aws-sdk/lib-dynamodb, and @aws-sdk/client-dynamodb)
2. isbot should be retained at the version 3.8.0 due to breaking changes in the version 4.0.0
3. remix.config.js must be added the following configuration: browserNodeBuiltinsPolyfill: { modules: { querystring: true } }

Finally there is also an error related to cypress tests. The tests fail with:

Lambda init error: The requested module 'msw' does not provide an export named 'rest'
http://localhost:8811 timed out on retry 9 of 3, elapsed 95619ms, limit 90000ms
Error: Response code 500 (Internal Server Error)

I'm at lost here and really do not know what to do with this. If someone can help with this one, I could make pull request. Or maybe the Remix team would like to update the stack..

Expected Behavior

N/A

Actual Behavior

N/A

Figure out broken cypress tests

I'm not sure what happened, but suddenly the cy.login() functionality stopped working. Here's the last successful build: https://github.com/remix-run/grunge-stack/actions/runs/1994316486 Could be #10, or #11 (or maybe something completely unrelated 🙃)

Deploy Error

Have you experienced this bug with the latest version of the template?

yes

Steps to Reproduce

Deploy new application on aws with github actions.

Expected Behavior

Deploy with Success

Actual Behavior

Run arc deploy --production --prune
  arc deploy --production --prune
  shell: /usr/bin/bash --noprofile --norc -e -o pipefail {0}
  env:
    npm_config_cache: /home/runner/.npm
    CI: true
    AWS_ACCESS_KEY_ID: ***
    AWS_SECRET_ACCESS_KEY: ***
         App ⌁ remix-aws-451b
      Region ⌁ us-west-[2](https://github.com/robsonkades/remix-run-aws/runs/7683794292?check_suite_focus=true#step:10:2)
     Profile ⌁ Set via environment
     Version ⌁ Architect 10.4.0
         cwd ⌁ /home/runner/work/remix-run-aws/remix-run-aws

⚬ Hydrate Finding dependencies
⚬ Hydrate Hydrating dependencies in 1 path
⚬ Hydrate Hydrating server/
✓ Hydrate Hydrated server/
  | npm i --production: added 97 packages from 165 contributors and audited 98 packages in [3](https://github.com/robsonkades/remix-run-aws/runs/7683794292?check_suite_focus=true#step:10:3).92[4](https://github.com/robsonkades/remix-run-aws/runs/7683794292?check_suite_focus=true#step:10:4)s
  | npm i --production: 41 packages are looking for funding
  | npm i --production: run `npm fund` for details
  | npm i --production: found 0 vulnerabilities
  | npm i --production: npm notice created a lockfile as package-lock.json. You should commit this file.
✓ Hydrate Successfully hydrated dependencies
⚬ Deploy This Lambda should ideally be under [5](https://github.com/robsonkades/remix-run-aws/runs/7683794292?check_suite_focus=true#step:10:5)MB for optimal performance:
  | server (29,535KB)
⚬ Deploy Creating new private deployment bucket: ****
⚬ Deploy Initializing deployment
  | Stack ... RemixAws451bProduction
  | Bucket .. ****
⚬ Deploy Created deployment templates
⚬ Deploy Generating CloudFormation deployment...
✓ Deploy Generated CloudFormation deployment
⚬ Deploy Deploying & building infrastructure...
deploy failed! 
Uploading to 8eb4[6](https://github.com/robsonkades/remix-run-aws/runs/7683794292?check_suite_focus=true#step:10:6)d[7](https://github.com/robsonkades/remix-run-aws/runs/7683794292?check_suite_focus=true#step:10:7)e0bc6041699a44022[8](https://github.com/robsonkades/remix-run-aws/runs/7683794292?check_suite_focus=true#step:10:8)4d7df[9](https://github.com/robsonkades/remix-run-aws/runs/7683794292?check_suite_focus=true#step:10:10)d.template  8892 / 8892.0  ([10](https://github.com/robsonkades/remix-run-aws/runs/7683794292?check_suite_focus=true#step:10:11)0.00%)
Waiting for changeset to be created..
Waiting for stack create/update to complete

Failed to create/update the stack. Run the following command
to fetch the list of events leading up to the failure
aws cloudformation describe-stack-events --stack-name RemixAws451bProduction

Error: 
Uploading to 8eb46d7e0bc6041699a4402284d7df9d.template  8892 / 8892.0  (100.00%)
Waiting for changeset to be created..
Waiting for stack create/update to complete

Failed to create/update the stack. Run the following command
to fetch the list of events leading up to the failure
aws cloudformation describe-stack-events --stack-name RemixAws451bProduction

    at ChildProcess.<anonymous> (/opt/hostedtoolcache/node/14.20.0/x64/lib/node_modules/@architect/architect/node_modules/@architect/deploy/src/sam/utils/spawn.js:23:16)
    at ChildProcess.emit (events.js:400:28)
    at ChildProcess.emit (domain.js:475:[12](https://github.com/robsonkades/remix-run-aws/runs/7683794292?check_suite_focus=true#step:10:13))
    at maybeClose (internal/child_process.js:1088:[16](https://github.com/robsonkades/remix-run-aws/runs/7683794292?check_suite_focus=true#step:10:17))
    at Process.ChildProcess._handle.onexit (internal/child_process.js:[29](https://github.com/robsonkades/remix-run-aws/runs/7683794292?check_suite_focus=true#step:10:30)6:5)
Error: Process completed with exit code 1.

notes example app is slow

Have you experienced this bug with the latest version of the template?

yes

Steps to Reproduce

(1) Run npx create-remix@latest --template remix-run/grunge-stack today

(2) npm run dev (which runs remix dev --manual -c "arc sandbox -e testing")

(3) Sign up with an email and password from the home page.

(4) view and add notes using the notes app

(5) observe the speed of page loads for the notes app and generally

Expected Behavior

All routes should be "fast" especially since it is using a local sandbox and is a demo app to get people started.

Actual Behavior

The notes routes and the sign up route feel sluggish, here's my network tab:

I added some console timings around some things, one thing I'm seeing is in app/models/note.server.ts

export async function getNoteListItems({
  userId,
}: Pick<Note, "userId">): Promise<Array<Pick<Note, "id" | "title">>> {
  console.time("all");
  console.time("arc.tables");
  const db = await arc.tables();
  console.timeEnd("arc.tables");

  console.time("db.note.query");
  const result = await db.note.query({
    KeyConditionExpression: "pk = :pk",
    ExpressionAttributeValues: { ":pk": userId },
  });
  console.timeEnd("db.note.query");
  console.timeEnd("all");

  return result.Items.map((n: any) => ({
    title: n.title,
    id: skToId(n.sk),
  }));
}

arc.tables timing is about 1.3s
db.note.query timing is about 0.9s
all timing is about 2.23s

Curious if anyone else can replicate it. I guess I can't rule out something weird with my network. I do have a vpn for work but I tried with it turned off as well.

Bug: Internal Server Error on Lambda

Have you experienced this bug with the latest version of the template?

yes

Steps to Reproduce

Deploy the template to AWS using the arc deployment

Attempt to sign up

Expect a 500 internal server error

Expected Behavior

Sign up should succeed

Actual Behavior

There is an internal server error with no logging at the time bycryptjs attempts to hash the password.

I added a try catch, still no error. So at that point I assumed this is a very low level issue.

Indeed, I added more memory to the aws lambda deployment to 1024 MB from the default 128 MB and hashing did not fail, I was able to log in.

I would suggest that the declaration:

memory 1024

Is added to the lambda, potentially 512 could fix the issue. I was not able to determine if it was due to CPU or RAM and both scale on memory within lambda

🚀 Fresh Stack Deployment Not Working As Expected

Have you experienced this bug with the latest version of the template?

yes

Steps to Reproduce

Steps

1. Create fresh grunge stack using npx.
2. Connect it to AWS via Github Secrets.
3. Generate Session and Arc App variables.
4. Trigger deployment via dev branch.
5. Access the entry point via the S3 Static Website Hosting URL.

Reference
remix.config.js
assetsBuildDirectory: "public/build", publicPath: "/_static/build/", serverBuildTarget: "arc", server: "./server.ts",

Expected Behavior

🤔 Deployment works, but I'm not seeing the app at the expected URL.

Actual Behavior

The result is a 404 on every route.

404 Not Found

- Code: NoSuchKey
- Message: The specified key does not exist.
- Key: index.html
- RequestId: 164GEDTF7M8N85P2
- HostId: eG7ra0vK8XxFS9FrsYCCttfYBIdIyD0NywlVaKaVmrKmxDyBWXAO7SQW91VIuDUzsBxnn7AVdwo=

An Error Occurred While Attempting to Retrieve a Custom Error Document

- Code: NoSuchKey
- Message: The specified key does not exist.
- Key: 404.html

update Architect Functions to v5

the Architect folks released architect v10 and functions v5 last week, we should bump functions to v5 and also remove @architect/architect from our dependencies after we release remix 1.2.3(?) as it has a couple of fixes for both of those

https://blog.begin.com/posts/2022-02-24-architect-and-remix

Fresh unaltered template will not deploy with Github Actions

Have you experienced this bug with the latest version of the template?

Yes

Steps to Reproduce

Relevant info: System is Ubuntu 22.04.2 LTS
Node versions tried 16, and 18
Have also tried a fresh install of all deps with each, and updating outdated dependencies. To no avail.
Interestingly, deployment via npx arc deploy works.

1.) npx create-remix --template your/repo
2.) create git repo
3.) GET AWS credentials and add them as secrets to the repo Actions secrets section
4.) npm run validate / install
5.) npx arc env --add --env (ARC_APP_SECRET) for each of the environments
6.) git init commit then push to repo
7.) Deployments kick off but fail with this error:

Run arc deploy --production -v --prune
  arc deploy --production -v --prune
  shell: /usr/bin/bash --noprofile --norc -e -o pipefail {0}
  env:
    AWS_ACCESS_KEY_ID: ***
    AWS_SECRET_ACCESS_KEY: 
         App ⌁ benteen-sotg-a0e3
      Region ⌁ us-west-2
     Profile ⌁ @aws profile / AWS_PROFILE not configured
     Version ⌁ Architect 10.13.1
         cwd ⌁ /home/runner/work/benteen-sotg/benteen-sotg

deploy failed! Missing credentials in config, if using AWS_CONFIG_FILE, set AWS_SDK_LOAD_CONFIG=1
CredentialsError: Missing credentials in config, if using AWS_CONFIG_FILE, set AWS_SDK_LOAD_CONFIG=1
    at IncomingMessage.<anonymous> (/opt/hostedtoolcache/node/16.20.1/x64/lib/node_modules/@architect/architect/node_modules/aws-sdk/lib/util.js:930:34)
    at IncomingMessage.emit (node:events:525:35)
    at IncomingMessage.emit (node:domain:489:12)
    at endReadableNT (node:internal/streams/readable:1358:12)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
Error: Process completed with exit code 1.

Expected Behavior

Deployment proceeds as normal / expected via Github Actions.

Interestingly, deployment via npx arc deploy works.

Actual Behavior

Deployment fails in Github Actions Context.

dev.js not needed?

Since we are not requiring the mocks in dev.js anymore, is this file still needed?

Couldn't we just start the sandbox using arc sandbox directly?

Try creating new Remix project using grunge stack but the cli freeze after asking me want to run verify build/tests/etc script

Have you experienced this bug with the latest version of the template?

yes

Steps to Reproduce

1./ Open PowerShell
2./ Run npx create-remix@latest
3./ Select options as the image below

Expected Behavior

The cli should proceed to the next step after I type 'N' and hit enter for Do you want to run the build/tests/etc to verify things are setup properly?

Actual Behavior

The cli freezed

Cannot read file '../tsconfig.json'

Have you experienced this bug with the latest version of the template?

Yes

Steps to Reproduce

npx create-remix --template remix-run/grunge-stack

Where would you like to create your app? remix-blog
Do you want me to run npm install? (Y/n) Y
TypeScript or JavaScript? JavaScript
Do you want to run the build/tests/etc to verify things are setup properly? Yes

error TS5083: Cannot read file '/Users/Siarhei_Liubimau/Documents/remix/remix-blog/tsconfig.json'.

Expected Behavior

The template should work out of the box.

Actual Behavior

The template is broken and unusable.

Recommend adding @aws section to .arc file

What version of Remix are you using?

1.5.1

Steps to Reproduce

1. have multiple AWS profiles locally (i.e. not just a single "default" profile)
2. npx create-remix --template remix-run/grunge-stack
3. add required secrets in GitHub actions for a non-default AWS profile
4. create the "npx arc env --add --env staging ARC_APP_SECRET $(openssl rand -hex 32)" set of variables in architect
5. git push to run the GitHub action

Expected Behavior

success

Actual Behavior

missing SESSION_SECRET error in lambda function

error occurs in line 7 of session.server.ts: invariant(process.env.SESSION_SECRET, "SESSION_SECRET must be set");

Note that this will be fixed if the .arc file has an @aws section

Example:
@aws
region us-east-2
profile default

With that entry in the .arc file, it would be clear to a user what needs to be changed (i.e. change default to the desired profile)

Documentation could be amended to suggest that is where to change the region and profile if needed.

@prisma/client did not initialize yet

Have you experienced this bug with the latest version of the template?

Yes

Steps to Reproduce

run arc deploy --staging --prune

Expected Behavior

I am expecting this to work

Actual Behavior

After deploying the app to AWS.
The lambda gives this error:

"errorType": "Error",
    "errorMessage": "@prisma/client did not initialize yet. Please run \"prisma generate\" and try to import it again.\nIn case this error is unexpected for you, please report it in https://github.com/prisma/prisma/issues",
    "stack": [
        "Error: @prisma/client did not initialize yet. Please run \"prisma generate\" and try to import it again.",
        "In case this error is unexpected for you, please report it in https://github.com/prisma/prisma/issues",
        "    at new PrismaClient (/var/task/node_modules/.prisma/client/index.js:43:11)",
        "    at Object.<anonymous> (/var/app/database/db.server.ts:21:21)",
        "    at Module._compile (node:internal/modules/cjs/loader:1198:14)",
        "    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)",
        "    at Module.load (node:internal/modules/cjs/loader:1076:32)",
        "    at Function.Module._load (node:internal/modules/cjs/loader:911:12)",
        "    at Module.require (node:internal/modules/cjs/loader:1100:19)",
        "    at require (node:internal/modules/cjs/helpers:108:18)",
        "    at _tryRequireFile (file:///var/runtime/index.mjs:976:37)",
        "    at _tryRequire (file:///var/runtime/index.mjs:1026:25)"
    ]

server/node_modules/.prisma/client/index.js Looks like this file is not updated.

Fresh deployment leads to Internal Server Error

Have you experienced this bug with the latest version of the template?

yes

Steps to Reproduce

Following the readme step for step:

1. npx create-remix@latest --template remix-run/grunge-stack
2. Validate everything works locally: npm run validate npm run dev
3. Create a new github repo
4. Add AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY to your GitHub repo's secrets. Go to your AWS security credentials and click on the "Access keys" tab, and then click "Create New Access Key", then you can copy those and add them to your repo's secrets.
5. Create the session and arc app secret:

npx arc env --add --env staging ARC_APP_SECRET $(openssl rand -hex 32)
npx arc env --add --env staging SESSION_SECRET $(openssl rand -hex 32)
npx arc env --add --env production ARC_APP_SECRET $(openssl rand -hex 32)
npx arc env --add --env production SESSION_SECRET $(openssl rand -hex 32)

7. Confirm these get put in Parameter store
8. init repo and push to github
9. Wait for deploy to finish, check production url

{"message":"Internal Server Error"}

10. Check cloudwatch logs:

2023-09-23T20:08:57.792Z	da801d89-8960-42c2-b45e-c3f84c59da2a	ERROR	Invoke Error 	{
    "errorType": "ReferenceError",
    "errorMessage": "Request is not defined",
    "stack": [
        "ReferenceError: Request is not defined",
        "    at createRemixRequest (/var/task/node_modules/@remix-run/architect/dist/server.js:53:3)",
        "    at Runtime.handler (/var/task/node_modules/@remix-run/architect/dist/server.js:37:19)",
        "    at Runtime.handleOnceNonStreaming (file:///var/runtime/index.mjs:1147:29)"
    ]
}

Expected Behavior

Application should be deployed and display output at the endpoint from the production deploy.

Actual Behavior

Error at the production url:

{"message":"Internal Server Error"}

Error in cloudwatch logs:

2023-09-23T20:08:57.792Z	da801d89-8960-42c2-b45e-c3f84c59da2a	ERROR	Invoke Error 	{
    "errorType": "ReferenceError",
    "errorMessage": "Request is not defined",
    "stack": [
        "ReferenceError: Request is not defined",
        "    at createRemixRequest (/var/task/node_modules/@remix-run/architect/dist/server.js:53:3)",
        "    at Runtime.handler (/var/task/node_modules/@remix-run/architect/dist/server.js:37:19)",
        "    at Runtime.handleOnceNonStreaming (file:///var/runtime/index.mjs:1147:29)"
    ]
}

Loading notes locally takes 900ms in grunge stack compared to 30ms in indie

Have you experienced this bug with the latest version of the template?

Yes

Steps to Reproduce

1. Create a new grunge stack and run it
2. Create account
3. Create 2 notes
4. Open network developer tool in browser
5. Click between the two notes repeatedly and watch the network call durations

Expected Behavior

Loading notes takes 30ms (like it does in Indie stack)

Actual Behavior

Loading notes takes 800-900ms

NPM Fails to Install dependencies

Have you experienced this bug with the latest version of the template?

Yes

Steps to Reproduce

npx create-remix@latest --template remix-run/grunge-stack

Dependencies installing with npm...

▲  Oh no! Failed to install dependencies.

The above happened repeatedly in different directories

---

Whilst troubleshooting I installed a fresh remix@latest app, without the grunge template and the install including the dependencies completed without error.

Expected Behavior

complete install and config steps

Actual Behavior

install fails on npm dependency install

Replace `run-p` with `npm-run-all -p-` because the former doesn't kill all process when pressing CTRL+C in windows

Have you experienced this bug with the latest version of the template?

yes

Steps to Reproduce

1. run npx create-remix my-app --template remix-run/grunge-stack
2. cd my-app
3. run pnpm dev
4. Try to kill the process pressing CTRL+C

Expected Behavior

On windows, pressing CTRL+C should kill all the processes of the "dev" npm script.

Actual Behavior

On windows, pressing CTRL+C DOESN'T kill all the processes of the "dev" npm script.
It works if I replace the run-p with npm-run-all -p

Architect Deployment order of Static assets

Hello! I did a deep dive into this stack tonight and have found an issue that I would like to get your thoughts on. It appears when Architect deploys the static assets, it does it in alphabetical order (or maybe random?). As you can guess, if we upload root first and a User goes to the app, they will get unexpected results since all the assets are not fully published. I have recreated this very easily by changing a few different files and adding new tailwind css classes so it will regen the .css file. I don't think this is a technical issue with Remix but I wanted to bring this up and offer to help drive a solution. Off the top of my head, I think the solution is uploading all of the assets except for the root file, leaving that last. I did some api doc searches in Architect, but I could not find a config that would allow us to affect the static asset upload process.

Great job on all of the work Remix has done so far!

Error occurs after fresh installation

Have you experienced this bug with the latest version of the template?

Yes

Steps to Reproduce

Run npx create-remix@latest --template remix-run/grunge-stack on Windows 11 with a valid project name, answering yes to all the prompts (automatic initialization of Git repo, automatic installation of npm dependencies, automatic execution of remix.init, automatic execution of "build/tests/etc").

Expected Behavior

Successful, error-free installation of grunge-stack.

Actual Behavior

An error occurs during execution of tests. Relevant portion of output from the procedure follows:

---

√ Sandbox File watcher now looking for project changes


DevTools listening on ws://127.0.0.1:53569/devtools/browser/374535f8-f14d-4629-b03f-ef43b0fce540
(node:14772) ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        12.17.3                                                                        │
  │ Browser:        Electron 106 (headless)                                                        │
  │ Node Version:   v20.7.0 (C:\Program Files\nodejs\node.exe)                                     │
  │ Specs:          1 found (smoke.cy.ts)                                                          │
  │ Searched:       cypress/e2e/**/*.cy.{js,jsx,ts,tsx}                                            │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  smoke.cy.ts                                                                     (1 of 1)


  smoke tests
[REMIX DEV] 3F852232 ready
    1) should allow you to register and login
[REMIX DEV] 3F852232 ready
! Warning: [eb94b313-cb38-445c-889b-0b56c11cc948] Timed out after hitting its 5s timeout!
! Warning: [4144f8e2-8ab5-4bf0-8b00-cadfeb503d9f] Timed out after hitting its 5s timeout!
    2) should allow you to make a note


  0 passing (15s)
  2 failing

  1) smoke tests
       should allow you to register and login:
     AssertionError: Timed out retrying after 4000ms: Unable to find an accessible element with the role "link" and name `/notes/i`

Here are the accessible roles:

  document:

  Name "":
  <body
    class="h-full"
  />

  --------------------------------------------------
  textbox:

  Name "Email address":
  <input
    aria-describedby="email-error"
    autocomplete="email"
    class="w-full rounded border border-gray-500 px-2 py-1 text-lg"
    id="email"
    name="email"
    required=""
    type="email"
  />

  --------------------------------------------------
  button:

  Name "Create Account":
  <button
    class="w-full rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:bg-blue-400"
    type="submit"
  />

  --------------------------------------------------
  link:

  Name "Log in":
  <a
    class="text-blue-500 underline"
    href="/login"
  />

  --------------------------------------------------

Ignored nodes: comments, script, style
<html
  class="h-full"
  lang="en"
>
  <head>
    <meta
      charset="utf-8"
    />
    <meta
      content="width=device-width,initial-scale=1"
      name="viewport"
    />
    <link
      href="/_static/favicon.ico"
      rel="icon"
    />
    <title>
      Sign Up
    </title>
    <link
      href="/_static/build/_assets/tailwind-TTAZ2KQD.css"
      rel="stylesheet"
    />
  </head>
  <body
    class="h-full"
  >
    <div
      class="flex min-h-full flex-col justify-center"
    >
      <div
        class="mx-auto w-full max-w-md px-8"
      >
        <form
          action="/join"
          class="space-y-6"
          method="post"
        >
          <div>
            <label
              class="block text-sm font-medium text-gray-700"
              for="email"
            >
              Email address
            </label>
            <div
              class="mt-1"
            >
              <input
                aria-describedby="email-error"
                autocomplete="email"
                class="w-full rounded border border-gray-500 px-2 py-1 text-lg"
                id="email"
                name="email"
                required=""
                type="email"
              />
            </div>
          </div>
          <div>
            <label
              class="block text-sm font-medium text-gray-700"
              for="password"
            >
              Password
            </label>
            <div
              class="mt-1"
            >
              <input
                aria-describedby="password-error"
                autocomplete="new-password"
                class="w-full rounded border border-gray-500 px-2 py-1 text-lg"
                id="password"
                name="password"
                type="password"
              />
            </div>
          </div>
          <input
            name="redirectTo"
            type="hidden"
            value=""
          />
          <button
            class="w-full rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:bg-blue-400"
            type="submit"
          >
            Create Account
          </button>
          <div
            class="flex items-center justify-center"
          >
            <div
              class="text-center text-sm text-gray-500"
            >
              Already have an account?

              <a
                class="text-blue-500 underline"
                href="/login"
              >
                Log in
              </a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </body>
</html>
      at Context.eval (webpack:///./cypress/e2e/smoke.cy.ts:14:0)

  2) smoke tests
       should allow you to make a note:
     CypressError: `cy.request()` failed on:

http://localhost:8811/__tests/create-user

The response we received from your web server was:

  > 500: Internal Server Error

This was considered a failure because the status code was not `2xx` or `3xx`.

If you do not want status codes to cause failures pass the option: `failOnStatusCode: false`

-----------------------------------------------------------

The request we sent was:

Method: POST
URL: http://localhost:8811/__tests/create-user
Headers: {
  "Connection": "keep-alive",
  "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Cypress/12.17.3 Chrome/106.0.5249.51 Electron/21.0.0 Safari/537.36",
  "accept": "*/*",
  "accept-encoding": "gzip, deflate",
  "content-type": "application/json",
  "content-length": 32
}
Body: {"email":"[email protected]"}

-----------------------------------------------------------

The response we got was:

Status: 500 - Internal Server Error
Headers: {
  "content-type": "text/html; charset=utf8;",
  "cache-control": "no-cache, no-store, must-revalidate, max-age=0, s-maxage=0",
  "date": "Wed, 27 Sep 2023 06:35:47 GMT",
  "connection": "keep-alive",
  "keep-alive": "timeout=5",
  "content-length": "1371"
}
Body: <head>
<style>
  body {
    font-family: sans-serif;
  }
  code, pre {
    font-family: monospace;
    color: #00c26e;
  }
</style>
<script>
  (() => {
    const url = 'ws://localhost:2223'
    let socket = new WebSocket(url)
    socket.addEventListener('message', message => {
      if (message.data === 'reload') location.reload()
    })
    socket.addEventListener('close', ({ wasClean }) => {
      const retryMs = 1000
      const cancelMs = 5000
      const maxAttempts = Math.round(cancelMs / retryMs)
      let attempts = 0
      const reloadIfCanConnect = () => {
        attempts++
        if (attempts > maxAttempts){
console.error('Could not reconnect to dev server.')
return
        }
        socket = new WebSocket(url)
        socket.addEventListener('error', () => {
setTimeout(reloadIfCanConnect, retryMs)
        })
        socket.addEventListener('open', () => {
if (!wasClean) {
  location.reload()
}
        })
      }
      reloadIfCanConnect()
    })
  })();
</script>
</head>

<h1>Lambda error</h1>
<h2>Error: Timeout error: <p>Lambda timed out after <b>5 seconds</b></p></h2>
<h3>Lambda: <code>@http any /*</code></h3>
<h3>Source: <code>C:\[path-to-project]\server</code></h3>
<p>: <p>Lambda timed out after <b>5 seconds</b></p></p>

<p>(No stack trace)</p>


https://on.cypress.io/request
      at <unknown> (http://localhost:8811/__cypress/runner/cypress_runner.js:149327:80)
      at tryCatcher (http://localhost:8811/__cypress/runner/cypress_runner.js:18744:23)
      at Promise._settlePromiseFromHandler (http://localhost:8811/__cypress/runner/cypress_runner.js:16679:31)
      at Promise._settlePromise (http://localhost:8811/__cypress/runner/cypress_runner.js:16736:18)
      at Promise._settlePromise0 (http://localhost:8811/__cypress/runner/cypress_runner.js:16781:10)
      at Promise._settlePromises (http://localhost:8811/__cypress/runner/cypress_runner.js:16861:18)
      at _drainQueueStep (http://localhost:8811/__cypress/runner/cypress_runner.js:13451:12)
      at _drainQueue (http://localhost:8811/__cypress/runner/cypress_runner.js:13444:9)
      at ../../node_modules/bluebird/js/release/async.js.Async._drainQueues (http://localhost:8811/__cypress/runner/cypress_runner.js:13460:5)
      at Async.drainQueues (http://localhost:8811/__cypress/runner/cypress_runner.js:13330:14)
  From Your Spec Code:
      at Context.login (webpack:///./cypress/support/commands.ts:4:0)



[REMIX DEV] 3F852232 ready

  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        2                                                                                │
  │ Passing:      0                                                                                │
  │ Failing:      2                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  2                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     15 seconds                                                                       │
  │ Spec Ran:     smoke.cy.ts                                                                      │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Screenshots)

  -  C:\[path-to-project]\cypress\screenshots\smoke.cy.t     (1280x720)
     s\smoke tests -- should allow you to register and login (failed).png
  -  C:\[path-to-project]\cypress\screenshots\smoke.cy.t     (1280x720)
     s\smoke tests -- should allow you to make a note (failed).png


  (Video)

  -  Started compressing: Compressing to 32 CRF
[REMIX DEV] 3F852232 ready
  -  Finished compressing: 1 second

  -  Video output: C:\[path-to-project]\cypress\videos\smoke.cy.ts.mp4


====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ×  smoke.cy.ts                              00:15        2        -        2        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ×  1 of 1 failed (100%)                     00:15        2        -        2        -        -

[REMIX DEV] 3F852232 ready
Error: Command failed with exit code 2: npx cypress run
    at makeError (C:\[path-to-project]\node_modules\execa\lib\error.js:60:11)
    at handlePromise (C:\[path-to-project]\node_modules\execa\index.js:118:26)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  shortMessage: 'Command failed with exit code 2: npx cypress run',
  command: 'npx cypress run',
  escapedCommand: '"npx cypress run"',
  exitCode: 2,
  signal: undefined,
  signalDescription: undefined,
  stdout: undefined,
  stderr: undefined,
  failed: true,
  timedOut: false,
  isCanceled: false,
  killed: false
}
ERROR: "test:e2e:run" exited with 1.

      ▲  Oh no! Template's remix.init script failed

Cypress smoke test fails with newly initialized project

Have you experienced this bug with the latest version of the template?

Yes

Steps to Reproduce

npx create-remix@latest --template remix-run/grunge-stack
npm run test:e2e:dev

Then go to Cypress and run the smoke test.

Expected Behavior

All the test should pass

Actual Behavior

Cypress's custom commands cannot be recognized:

• on "should allow you to register and login":
  Type Error: cy.visitAndCheck is not a function
• on "should allow you to make a note":
  Type Error: cy.login is not a function

I'm having the same problem with the Indie Stack

After deployment, bucket returns 404 and API returns 500

Bucket

API

Grunge/Arc template will not build

What version of Remix are you using?

1.6.2

Steps to Reproduce

1. npx create-remix@latest, choose grunge (arc)
2. Choose production ready stack
3. Run the install
4. Run the verification

Expected Behavior

Expect the verification (npm run validate) to pass on the baseline install.

Actual Behavior

Generated setup-test-env.ts won't compile

The import

import { installGlobals } from "@remix-run/node/globals";

Doesn't exist. Has to be "@remix-run/node"

Generated server.ts won't compile

The import "@remix-run/dev/server-build" doesn't exist. The build variable probably has to be require("./server")

Unable to rerun npx remix init

Not sure if one should rerun npx remix init if it fails, but rerunning the command (after failing) complains about missing files in .github folder.

Error starting file watcher

Finally, continue to run npx remix init or npm run validate throws these:

Rebuilding...
Done in 126ms.
         App ⌁ remix-arc-e479
      Region ⌁ us-west-2
     Profile ⌁ hongyew
     Version ⌁ Architect 10.3.3
         cwd ⌁ /Users/hongyew/Projects/experiments/remix-arc

✓ Sandbox Found Architect project manifest: app.arc
✓ Sandbox Found testing environment variables: .env
✓ Sandbox Using testing live AWS infra: @tables
✓ Sandbox Started AWS service emulator
✓ Sandbox @tables created in local database
✓ Sandbox @http server started
✓ Sandbox Project files hydrated into functions
✓ Sandbox Available @http (HTTP API mode / Lambda proxy v2.0 format) routes
    any /* ................................ server

    http://localhost:8811

✓ Sandbox Started in 67ms
❤︎ Local environment ready!

✓ Sandbox Started file watcher
💿 Built in 273ms


/Users/hongyew/Projects/experiments/remix-arc/node_modules/@remix-run/server-runtime/dist/routes.js:18
  return Object.entries(manifest).filter(([, route]) => route.parentId === parentId).map(([id, route]) => ({ ...route,
                ^
/Users/hongyew/Projects/experiments/remix-arc/node_modules/@remix-run/server-runtime/dist/routes.js:18
  return Object.entries(manifest).filter(([, route]) => route.parentId === parentId).map(([id, route]) => ({ ...route,
                ^

TypeError: Cannot convert undefined or null to object
    at Function.entries (<anonymous>)
    at Object.createRoutes (/Users/hongyew/Projects/experiments/remix-arc/node_modules/@remix-run/server-runtime/dist/routes.js:18:17)
    at Object.createRequestHandler (/Users/hongyew/Projects/experiments/remix-arc/node_modules/@remix-run/server-runtime/dist/server.js:26:25)
    at createRequestHandler (/Users/hongyew/Projects/experiments/remix-arc/node_modules/@remix-run/architect/dist/server.js:35:28)
    at server.ts (/Users/hongyew/Projects/experiments/remix-arc/server.ts:8:24)
    at /Users/hongyew/Projects/experiments/remix-arc/server/index.js:8:56
    at Object.<anonymous> (/Users/hongyew/Projects/experiments/remix-arc/server/index.js:57:1)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)


/Users/hongyew/Projects/experiments/remix-arc/node_modules/@remix-run/server-runtime/dist/routes.js:18
  return Object.entries(manifest).filter(([, route]) => route.parentId === parentId).map(([id, route]) => ({ ...route,
                ^
/Users/hongyew/Projects/experiments/remix-arc/node_modules/@remix-run/server-runtime/dist/routes.js:18
  return Object.entries(manifest).filter(([, route]) => route.parentId === parentId).map(([id, route]) => ({ ...route,
                ^

TypeError: Cannot convert undefined or null to object
    at Function.entries (<anonymous>)
    at Object.createRoutes (/Users/hongyew/Projects/experiments/remix-arc/node_modules/@remix-run/server-runtime/dist/routes.js:18:17)
    at Object.createRequestHandler (/Users/hongyew/Projects/experiments/remix-arc/node_modules/@remix-run/server-runtime/dist/server.js:26:25)
    at createRequestHandler (/Users/hongyew/Projects/experiments/remix-arc/node_modules/@remix-run/architect/dist/server.js:35:28)
    at server.ts (/Users/hongyew/Projects/experiments/remix-arc/server.ts:8:24)
    at /Users/hongyew/Projects/experiments/remix-arc/server/index.js:8:56
    at Object.<anonymous> (/Users/hongyew/Projects/experiments/remix-arc/server/index.js:57:1)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)

Logout route is not destroying the user session

Have you experienced this bug with the latest version of the template?

Yes

Steps to Reproduce

Just setup a new project, create an account and login, then hit '/logout'
When I get back to the home page I'm still signed in ...

I did not spend a ton of time trying to figure out the root cause but nothing I did in the session.server.ts file seemed to have any effects. I suspect something else is setting/committing the session back in?

For now I just updated the logout.tsx loader which I think is called out as something you should not do in the docs
(?? Sorry I have only started using remix a few weeks ago).

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const session = await getSession(request);

  return redirect("/", {
    headers: {
      "Set-Cookie": await sessionStorage.destroySession(session),
    },
  });
};

Expected Behavior

When I hit the /logout route, the session is destroyed and I'm redirected to the homepage where I see a login and a signup button.

Actual Behavior

I'm redirected to the homepage where I see the "View notes" button.
I also cannot navigate to the login page.

Integrate email service for verifying email & resetting password

The `cy.cleanupUser` function mentioned in README is missing

Have you experienced this bug with the latest version of the template?

yep

Steps to Reproduce

Follow the README and add:

afterEach(() => {
  cy.cleanupUser();
});

to the Cypress test file (smoke.cy.ts). Run Cypress tests.

Expected Behavior

Tests succeed and test users are deleted from db.

Actual Behavior

Tests fail with TypeError: cy.cleanupUser is not a function

Tests not passing

Hi, I'm really excited about Stacks

But I tried to deploy the grunge Stack as it says in the README itself and after installing the tests idoesn't pass.

Tests that not pass
1) should allow you to register and login
2) should allow you to make a note

Gist with the errors
https://gist.github.com/JoaoGomes5/7cfa976ae9672ab5e7bd4c255ec7677a

I followed the tutorial video and it gives me an error right at the beginning, I don't understand why.

I already tried to create new projects and all of them did not pass the tests.

Thanks and have a great day!

LiveReload does not work

Have you experienced this bug with the latest version of the template?

Yes

Steps to Reproduce

1. npx create-remix@latest
2. Choose Grunge stack
3. npm run dev after the install script finishes
4. Open an incognito browser, change a file, see that that live reloading does not work

Expected Behavior

The page should reload and reflect the file changes.

Actual Behavior

The page does not refresh automatically. A manual refresh shows the changes, indicating that the build was successful.

Twnc

Error: expected <NPM script name that starts server> <url or port> <NPM script name that runs tests>

I'm getting the following error when running npm run validate

Steps to reproduce:

1. run npx create-remix --template remix-run/grunge-stack
2. run cd <your-app-name>
3. run npm run validate

Extra info:

• SO: windows 10
• Node version: 14.18.1
• npm version: 6.14.1

Also, I noticed this warning in the installation step:
npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!
(which is expected because I have npm v6)

Looks like the error doesn't block the development server so I can live with it but I thought it would be good to report it so you guys can be aware of it.

Error: expected <NPM script name that starts server> <url or port> <NPM script name that runs tests>
example: start-test start 8080 test
see https://github.com/bahmutov/start-server-and-test#use

    at lazyAssLogic (D:\frontend-projects\experiments\my-remix-app\node_modules\lazy-ass\index.js:110:14)
    at lazyAss (D:\frontend-projects\experiments\my-remix-app\node_modules\lazy-ass\index.js:115:28)
    at Object.getArguments (D:\frontend-projects\experiments\my-remix-app\node_modules\start-server-and-test\src\utils.js:91:5)
    at Object.<anonymous> (D:\frontend-projects\experiments\my-remix-app\node_modules\start-server-and-test\src\bin\start.js:10:22)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-remix-app-87b1@ test:e2e:run: `cross-env PORT=8811 start-server-and-test dev http://localhost:8811 'cypress run'`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-remix-app-87b1@ test:e2e:run script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

TypeError: interceptors.createInterceptor is not a function

Have you experienced this bug with the latest version of the template?

Yes

Steps to Reproduce

Run npx create-remix --template remix-run/grunge-stack
(say Yes to everything)

Then run npm run validate, and you will see:

TypeError: interceptors.createInterceptor is not a function
    at setupServer (/Users/usr/src/my-remix-app/node_modules/msw/node/lib/index.js:8143:42)
    at mocks/index.js (/Users/usr/src/my-remix-app/mocks/index.js:3:16)
    at __require (/Users/usr/src/my-remix-app/server/index.js:12:50)
    at Object.<anonymous> (/Users/usr/src/my-remix-app/server.ts:5:3)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)

Or, run npm run dev and go to http://localhost:3000 and you will see the same error

Expected Behavior

The template should work out of the box

Actual Behavior

The template is broken and unusable

Integrate esbuild with Arc deploy

This stack works very nicely and is a huge step forward. I do note that the deployed lambda is pretty large (7MB zip) and it's because it contains the entire node_modules directory (unpacked 29MB).

It would be really nice for server.js to be in TypeScript and to integrate esbuild into the Arc deploy process, not just the app compilation step, so only the needed code is deployed.

Type error on initial validate of the stack

Have you experienced this bug with the latest version of the template?

yes

Steps to Reproduce

❯ npx create-remix --template remix-run/grunge-stack

either select the validate option
-- or --
❯ npm run validate

server.ts:9:3 - error TS2739: Type 'typeof import("/Users/jtushman/code/remix-playground/notes/node_modules/@remix-run/dev/server-build")' is missing the following properties from type 'ServerBuild': publicPath, assetsBuildDirectory

9   build,
    ~~~~~

  node_modules/@remix-run/architect/dist/server.d.ts:18:5
    18     build: ServerBuild;
           ~~~~~
    The expected type comes from property 'build' which is declared here on type '{ build: ServerBuild; getLoadContext?: GetLoadContextFunction | undefined; mode?: string | undefined; }'

Expected Behavior

I'd expect the initial clean pull to validate

Actual Behavior

we are getting a type error

Should ARC_APP_SECRET also be mentioned under Deployment in the docs?

It's my first time using Architect, and I've really enjoyed Remix! Really excited about this combo.

When following the getting started guide, in the Deployment section

⚠️ Warning: The environment variable "ARC_APP_SECRET" is not set - please set this in production to help mitigate potential session-related attacks!

Looking at the Architect docs on security, it definitely seems important to set.

Perhaps

npx arc env --add --env production ARC_APP_SECRET $(openssl rand -hex 32)

Should be added to the docs above the other production secret being set? I can make a quick PR if that makes sense.

remix defer is malfunctioning by awaiting and blocking responses

Have you experienced this bug with the latest version of the template?

yes

Steps to Reproduce

I tried very hard to get remix' defer function working as expected - meaning promises shall not block page generation but are streamed to the client later.

However - using the grunge stack I was not able to make the most simple setup running. Instead I always see the server blocking the HTML response until the promise handed over to defer is resolved. Example page:

import { Await, useLoaderData } from "@remix-run/react";
import { Suspense } from "react";

export async function loader() {
  const load = function () {
    return new Promise((resolve) => {
      setTimeout(() => resolve({ items: [], categories: [] }), 3000);
    });
  };

  return defer({
    conversionChartPromise: load(),
  });
}

export default function Dashboard() {
  const data = useLoaderData<typeof loader>();
  console.log(data.conversionChartPromise);
  return (
    <Suspense fallback={<div>Loading</div>}>
      <Await
        resolve={data.conversionChartPromise}
        errorElement={<p>Error loading package location!</p>}
      >
        {(conversionChart) => {
          console.log(conversionChart);
          return null;
        }}
      </Await>
    </Suspense>
  );
}

Expected Behavior

The page should be rendered immediately - after the promise resolved the data should be streamed to the client.

Actual Behavior

Page generation always blocks for three seconds until promise is resolved. No streaming is happening.

cypress smoke tests fail out of the box

Have you experienced this bug with the latest version of the template?

yes

Steps to Reproduce

• I created a new project using the grunge-stack template by running npx create-remix --template remix-run/grunge-stack
• I ran npx run validate
• The smoke tests fail both locally and in github actions

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        10.3.0                                                                         │
  │ Browser:        Electron 100 (headless)                                                        │
  │ Node Version:   v14.19.3 (/<redacted>/.nvm/versions/node/v14.19.3/bin/node)              │
  │ Specs:          1 found (smoke.cy.ts)                                                          │
  │ Searched:       cypress/e2e/**/*.cy.{js,jsx,ts,tsx}                                            │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                    
  Running:  smoke.cy.ts                                                                     (1 of 1)


  smoke tests
    1) should allow you to register and login
    2) should allow you to make a note


  0 passing (3s)
  2 failing

  1) smoke tests
       should allow you to register and login:
     Error: The following error originated from your application code, not from Cypress.

  > Hydration failed because the initial UI does not match what was rendered on the server.

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the `uncaught:exception` event.

https://on.cypress.io/uncaught-exception-from-application
      at throwOnHydrationMismatch (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:8993:17)
      at tryToClaimNextHydratableInstance (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:9014:15)
      at updateHostComponent (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:14184:13)
      at beginWork (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:15256:22)
      at HTMLUnknownElement.callCallback2 (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:3458:22)
      at Object.invokeGuardedCallbackDev (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:3483:24)
      at invokeGuardedCallback (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:3517:39)
      at beginWork$1 (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:19039:15)
      at performUnitOfWork (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:18475:20)
      at workLoopSync (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:18411:13)

  2) smoke tests
       should allow you to make a note:
     Error: The following error originated from your application code, not from Cypress.

  > Hydration failed because the initial UI does not match what was rendered on the server.

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the `uncaught:exception` event.

https://on.cypress.io/uncaught-exception-from-application
      at throwOnHydrationMismatch (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:8993:17)
      at tryToClaimNextHydratableInstance (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:9014:15)
      at updateHostComponent (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:14184:13)
      at beginWork (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:15256:22)
      at HTMLUnknownElement.callCallback2 (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:3458:22)
      at Object.invokeGuardedCallbackDev (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:3483:24)
      at invokeGuardedCallback (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:3517:39)
      at beginWork$1 (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:19039:15)
      at performUnitOfWork (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:18475:20)
      at workLoopSync (http://localhost:8811/_static/build/entry.client-TUK4SINB.js:18411:13)

Expected Behavior

The cypress smoke tests should pass out of the box on a newly created project using the grunge-stack template

Actual Behavior

The cypress smoke tests fail out of the box