{"id":13581129,"url":"https://github.com/remix-pwa/rockspec-stack","last_synced_at":"2025-04-06T06:32:39.252Z","repository":{"id":40254143,"uuid":"482290853","full_name":"remix-pwa/rockspec-stack","owner":"remix-pwa","description":"A fully configurable \u0026 customizable Remix PWA stack.  ","archived":true,"fork":false,"pushed_at":"2024-01-27T15:12:17.000Z","size":3215,"stargazers_count":66,"open_issues_count":1,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-13T22:14:37.178Z","etag":null,"topics":["cypress","fly","postgresql","remix-run","remix-stack"],"latest_commit_sha":null,"homepage":"https://rockspec-stack.fly.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/remix-pwa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-16T15:29:46.000Z","updated_at":"2024-01-27T15:12:36.000Z","dependencies_parsed_at":"2024-05-08T08:49:06.093Z","dependency_job_id":"582c27c7-f370-4a5e-a85a-960a51978eeb","html_url":"https://github.com/remix-pwa/rockspec-stack","commit_stats":{"total_commits":79,"total_committers":4,"mean_commits":19.75,"dds":"0.22784810126582278","last_synced_commit":"953fd475d5395bf7ac074d5519520a09ef16c1fc"},"previous_names":["remix-pwa/rockspec-stack","shafspecs/rockspec-stack"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remix-pwa%2Frockspec-stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remix-pwa%2Frockspec-stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remix-pwa%2Frockspec-stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remix-pwa%2Frockspec-stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/remix-pwa","download_url":"https://codeload.github.com/remix-pwa/rockspec-stack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445652,"owners_count":20939952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cypress","fly","postgresql","remix-run","remix-stack"],"created_at":"2024-08-01T15:01:58.387Z","updated_at":"2025-04-06T06:32:38.709Z","avatar_url":"https://github.com/remix-pwa.png","language":"TypeScript","readme":"# Remix RockSpec Stack\n\n\u003e Deprecated\n\n![The Remix RockSpec Stack](https://github.com/ShafSpecs/rockspec-stack-example/blob/main/public/images/rockspec-image.png)\n\nLearn more about [Remix Stacks](https://remix.run/stacks).\n\n```\nnpx create-remix --template ShafSpecs/rockspec-stack\n```\n\n## What's in the stack\n\n- [Fly app deployment](https://fly.io) with [Docker](https://www.docker.com/)\n- Production-ready [PostgreSQL Database](https://www.postgresql.org/)\n- Fully functional [Progressive Web App](https://web.dev/progressive-web-apps/) native capabilities includng automatic caching, network detection and more. \n- Email/Password Authentication with [cookie-based sessions](https://remix.run/docs/en/v1/api/remix#createcookiesessionstorage)\n- Database ORM with [Prisma](https://prisma.io)\n- Styling with [Tailwind](https://tailwindcss.com/)\n- End-to-end testing with [Cypress](https://cypress.io)\n- Code formatting with [Prettier](https://prettier.io)\n- Linting with [ESLint](https://eslint.org)\n- Static Types with [TypeScript](https://typescriptlang.org)\n\nNot a fan of bits of the stack? Want to improve it? Fork it, change it, and create a PR!\n\n## Getting Started\n\n- Buckle your seatbelts and get ready to get blown by Remix!\n\n## Development\n\n- Create a `.env` file and copy the content from the `.env.example` file, delete the `.env.example` file afterwards.\n\n- Provision the database and connect it to the app using the `DATABASE_URL` environment variable.\n\n\u003e Skip if you're using Fly Postgres database (more info below).\n\n\u003e *If you don't have Postgres database already, you could quickly provision one for free using [Railway](https://railway.app?referralCode=Q7x99X).*\n\n- Set up Prisma and connect it to the database:\n  ```sh\n  npm run prisma\n  ```\n\n- Generate VAPID Keys for the Push API subscription service:\n  ```sh\n  npm run push-keys\n  ```\n  Store the Public key in the `VAPID_PUBLIC_KEY` and the private key in the `VAPID_PRIVATE_KEY` environment variable.\n\n- Start dev server:\n\n  ```sh\n  npm run dev\n  ```\n\nThis starts your app in development mode, rebuilding assets on file changes.\n\n### Relevant code:\n\nThis is a pretty simple note-taking app, but it's a good example of how you can build a full stack progressive web app with Prisma and Remix. The main functionality is creating users, logging in and out, and creating and deleting notes.\n\n- creating users, and logging in and out [./app/models/user.server.ts](./app/models/user.server.ts)\n- user sessions, and verifying them [./app/session.server.ts](./app/session.server.ts)\n- creating, and deleting notes [./app/models/note.server.ts](./app/models/note.server.ts)\n- client-side pwa APIs [./app/utils/client/pwa-utils.client.ts](./app/utils/client/pwa-utils.client.ts)\n- server-side pwa APIs [./app/utils/server/pwa-utils.server.ts](./app/utils/server/pwa-utils.server.ts)\n- pwa manifest [./app/routes/resources/manifest{.}json.ts](./app/routes/resources/manifest[.]json.ts)\n\n\u003e *For more info on building a powerful Progressive Web App, checkout [`remix-pwa`](https://github.com/ShafSpecs/remix-pwa)*\n\n## Deployment\n\nPrior to your first deployment, you'll need to do a few things:\n\n- [Install Fly](https://fly.io/docs/getting-started/installing-flyctl/)\n\n- Sign up and log in to Fly\n\n  ```sh\n  fly auth signup\n  ```\n\n  \u003e **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.\n\n- Create two apps on Fly, one for staging and one for production:\n\n  ```sh\n  fly create rockspec-stack-template\n  fly create rockspec-stack-template-staging\n  ```\n\n  - Initialize Git.\n\n  ```sh\n  git init\n  ```\n\n- Create a new [GitHub Repository](https://repo.new), and then add it as the remote for your project. **Do not push your app yet!**\n\n  ```sh\n  git remote add origin \u003cORIGIN_URL\u003e\n  ```\n\n- Add a `SESSION_SECRET` to your fly app secrets, to do this you can run the following commands:\n\n  ```sh\n  fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app rockspec-stack-template\n  fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app rockspec-stack-template-staging\n  ```\n\n  \u003e **Note:** When creating the staging secret, you may get a warning from the Fly CLI that looks like this:\n  \u003e\n  \u003e ```\n  \u003e WARN app flag 'rockspec-stack-template-staging' does not match app name in config file 'rockspec-stack-template'\n  \u003e ```\n  \u003e\n  \u003e This simply means that the current directory contains a config that references the production app we created in the first step. Ignore this warning and proceed to create the secret.\n\n  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.\n\n- Add `VAPID_PUBLIC_KEY` and `VAPID_PRIVATE_KEY` environment variables to your fly secrets too:\n  ```sh\n  fly secrets set VAPID_PRIVATE_KEY=\u003cVAPID_PRIVATE_KEY\u003e --app rockspec-stack-template\n  fly secrets set VAPID_PRIVATE_KEY=\u003cVAPID_PRIVATE_KEY\u003e --app rockspec-stack-template-staging\n\n  fly secrets set VAPID_PUBLIC_KEY=\u003cVAPID_PUBLIC_KEY\u003e --app rockspec-stack-template\n  fly secrets set VAPID_PUBLIC_KEY=\u003cVAPID_PULIC_KEY\u003e --app rockspec-stack-template-staging\n  ```\n  \u003e *Set your `DATABASE_URL` this way too if you aren't using the Fly Postgres database*\n\n- Create a persistent volume for the postgresql database for both your staging and production environments (*skip if you already set one up!*). Run the following:\n\n  ```sh\n  # Skip this part if you already have a non-Fly PostgreSQL database.\n  fly postgres create --name blues-stack-template-db\n  fly postgres attach --postgres-app rockspec-stack-template-db --app blues-stack-template\n\n  fly postgres create --name blues-stack-template-staging-db\n  fly postgres attach --postgres-app rockspec-stack-template-staging-db --app blues-stack-template-stagin\n  ```\n\n  \u003e **Note:** You'll get the same warning for the same reason when attaching the staging database that you did in the `fly set secret` step above. No worries. Proceed!\n\n### Getting Help with Deployment\n\nIf 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.\n\n## Testing\n\n### Cypress\n\nWe 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.\n\nWe use [`@testing-library/cypress`](https://testing-library.com/cypress) for selecting elements on the page semantically.\n\nTo 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.\n\nWe have a utility for testing authenticated features without having to go through the login flow:\n\n```ts\ncy.login();\n// you are now logged in as a new user\n```\n\nWe also have a utility to auto-delete the user at the end of your test. Just make sure to add this in each test file:\n\n```ts\nafterEach(() =\u003e {\n  cy.cleanupUser();\n});\n```\n\nThat way, we can keep your local db clean and keep your tests isolated from one another.\n\n\n### Type Checking\n\nThis 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.\n\n### Linting\n\nThis project uses ESLint for linting. That is configured in `.eslintrc.js`.\n\n### Formatting\n\nWe use [Prettier](https://prettier.io/) for auto-formatting in this project. It's recommended to install an editor plugin (like the [VSCode Prettier plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)) to get auto-formatting on save. There's also a `npm run format` script you can run to format all files in the project.\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremix-pwa%2Frockspec-stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fremix-pwa%2Frockspec-stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremix-pwa%2Frockspec-stack/lists"}