{"id":13522503,"url":"https://github.com/geldata/remix","last_synced_at":"2025-06-12T13:39:02.607Z","repository":{"id":37525370,"uuid":"482066451","full_name":"geldata/remix","owner":"geldata","description":"A Remix stack for EdgeDB-backed applications","archived":false,"fork":false,"pushed_at":"2022-08-03T03:32:00.000Z","size":1595,"stargazers_count":80,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-27T22:38:10.577Z","etag":null,"topics":["edgedb","remix-stack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/geldata.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}},"created_at":"2022-04-15T19:39:55.000Z","updated_at":"2025-03-24T01:46:30.000Z","dependencies_parsed_at":"2022-07-12T16:21:37.045Z","dependency_job_id":null,"html_url":"https://github.com/geldata/remix","commit_stats":null,"previous_names":["geldata/remix"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geldata%2Fremix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geldata%2Fremix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geldata%2Fremix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geldata%2Fremix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geldata","download_url":"https://codeload.github.com/geldata/remix/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246552512,"owners_count":20795826,"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":["edgedb","remix-stack"],"created_at":"2024-08-01T06:00:48.134Z","updated_at":"2025-03-31T22:31:33.802Z","avatar_url":"https://github.com/geldata.png","language":"JavaScript","readme":"# Hyperpop — The EdgeDB Remix Stack\n\n![The Hyperpop Remix Stack](https://user-images.githubusercontent.com/3084745/167937035-b84dda16-617f-456f-923e-dafcb4a6697c.png)\n\nLearn more about [Remix Stacks](https://remix.run/stacks).\n\n## What's in the stack\n\n- [EdgeDB](https://www.edgedb.com) for the database\n- Deployment on [Fly](https://fly.io)\n  - Healthcheck endpoint for [Fly backups region fallbacks](https://fly.io/docs/reference/configuration/#services-http_checks)\n- [GitHub Actions](https://github.com/features/actions)\n- Email/password authentication with [cookie-based sessions](https://remix.run/docs/en/v1/api/remix#createcookiesessionstorage)\n- [Tailwind](https://tailwindcss.com/)\n- [Cypress](https://cypress.io)\n- [MSW](https://mswjs.io) (request mocking)\n- [Vitest](https://vitest.dev) and [Testing Library](https://testing-library.com)\n- [Prettier](https://prettier.io)\n- [ESLint](https://eslint.org)\n- [TypeScript](https://typescriptlang.org)\n\n### Other EdgeDB + Remix stacks\n\nNot a fan of bits of the stack? Fork it and make it your own! Or use one of these other community-maintained stacks that combine the gloriousness of EdgeDB and Remix:\n\n- [jkcorrea/remix-chop-suey-stack](https://github.com/jkcorrea/remix-chop-suey-stack)\n- [jacob-ebey/remix-edgedb](https://github.com/jacob-ebey/remix-edgedb)\n- [anubra266/chakra-remix-stack-blues-edge](https://github.com/anubra266/chakra-remix-stack-blues-edge)\n\n## Development\n\n\u003e View the live application: [https://edgedb-remix.fly.dev](https://edgedb-remix.fly.dev/)\n\n### 1. Scaffold your project\n\n```sh\nnpx create-remix --template edgedb/remix\n```\n\n### 2. Initialize an EdgeDB project\n\nIf you haven't already, install the `edgedb` CLI: [edgedb.com/install](https://www.edgedb.com/install). Then run the following command from inside your project directory.\n\n```sh\nedgedb project init\n```\n\nThis will install the latest version of EdgeDB, spin up an instance, and apply all migrations from `dbschema/migrations`.\n\n### 3. Seed the database\n\n```sh\nnpm run seed\n```\n\nThis creates some sample notes and an initial user with the following credentials:\n\n- email `root@remix.run`\n- password: `remix+edgedb=awesome`\n\n### 4. Create `.env`\n\nThis project uses cookie-based authentication that relies on a secret token. It isn't secure to hard-code this value directly into your source code, so we'll use an environment variables called `SESSION_STATE`. To set this variable in development, create a `.env` file and add the following line. Remix automatically loads environment variables from this file when running in development mode.\n\n```\nSESSION_SECRET=\"super-duper-s3cret\"\n```\n\nIn the Deployment section, we'll describe how to set a value for `SESSION_SECRET` in production. We also set this variable in `deploy.yml` so it's available when running end-to-end tests in GitHub Actions.\n\n### 5. Start the server\n\nThis starts your app in development mode, rebuilding assets on file changes.\n\n```sh\nnpm run dev\n```\n\nGo to [localhost:3000](http://localhost:3000), click \"Sign up\" to create a new account, and explore the application.\n\n## Deployment\n\nThis Remix Stack comes with two GitHub Actions that handle automatically deploying your app to production and staging environments.\n\nPrior to your first deployment, you'll need to do a few things:\n\n### 1. Install the [Fly CLI](https://fly.io/docs/getting-started/installing-flyctl/) and signup/login\n\n```sh\nfly auth signup     # sign up\nfly auth login      # login\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### 2. Create a Fly app for your application\n\nRun `fly launch --no-deploy` to create a new Fly app. You'll be prompted for an app name; if you leave this blank, a name will be generated for you.\n\n```sh\n$ fly launch --no-deploy\nAn existing fly.toml file was found for app \"edgedb-remix\"\n? Would you like to copy its configuration to the new app? Yes\nCreating app in /path/to/project\nScanning source code\nDetected a Dockerfile app\n? App Name (leave blank to use an auto-generated name):\nAutomatically selected personal organization\n? Select region: sea (Seattle, Washington (US))\nCreated app \u003crandom name\u003e in organization personal\nWrote config file fly.toml\nYour app is ready. Deploy with `flyctl deploy`\n```\n\nOnce the app has been created the existing `fly.toml` file will be overwritten with the newly created app's information (this is intentional).\n\n### 3. Deploy an EdgeDB instance to Fly\n\nFollow EdgeDB's [Fly.io deployment guide](https://www.edgedb.com/docs/guides/deployment/fly_io) for step-by-step instructions. At the end of this process, you will have a [DSN](https://www.edgedb.com/docs/reference/connection) which can be used to connect to the instance. It should have the following form:\n\n`edgedb://\u003cuser\u003e:\u003cpassword\u003e@\u003chostname\u003e:\u003cport\u003e`\n\nAdd this value to your application as a [Fly secret](https://fly.io/docs/reference/secrets/) called `EDGEDB_DSN`.\n\n```sh\nfly secrets set EDGEDB_DSN=\u003cpaste DSN here\u003e\n```\n\n### 4. Add a `SESSION_SECRET` to your Fly app secrets\n\nTo do this you can run the following commands:\n\n```sh\nfly secrets set SESSION_SECRET=$(openssl rand -hex 32)\n```\n\nIf you don't have `openssl` installed, feel free to use any tool that will generate a random string, like a password manager or online tool.\n\n### 5. Initialize a Git repo\n\nCreate a new [GitHub Repository](https://repo.new) and Copy the provided `git@github.com:\u003creponame\u003e.git` URL. Then execute the following commands. Don't `git push` yet—we have a bit more configuration to do first.\n\n```sh\ngit init\ngit add .\ngit commit -m \"Initial commit\"\ngit branch -M main\ngit remote add origin \u003cpaste git url here\u003e\n```\n\n### 6. Add a `FLY_API_TOKEN` to your GitHub repo\n\nTo do this, [generate a token](https://web.fly.io/user/personal_access_tokens/new) via the Fly dashboard, copy it, and add it to to your repo via `Settings \u003e Secrets \u003e Actions`. Click \"New repository secret\", name it `FLY_API_TOKEN`, and paste the generated token.\n\n### 7. Push to GitHub\n\nNow we're ready to push this to GitHub. This will start the deployment process via GitHub Actions.\n\n```sh\ngit push -u origin main\n```\n\nEvery commit to your `main` branch will trigger a re-deployment to your production environment.\n\n  \u003c!-- , and every commit to your `dev` branch will trigger a deployment to your staging environment. --\u003e\n\n\u003c!-- ### Connecting to your database --\u003e\n\n\u003c!-- 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`. --\u003e\n\n### 8. View the final deployment\n\nOnce the GitHub Actions have completed, your application should be live on the internet! Fly automatically provides a public-facing URL for your application: `\u003cappname\u003e.fly.dev`. Visit this URL for a fully-functional cloud hosted version of the application.\n\nCheck your `fly.toml` file for your app name, or go to the [Fly dashboard](https://fly.io/dashboard) to see more information about the application.\n\n\u003e **Getting Help with Deployment**\n\u003e\n\u003e If you run into any issues deploying to Fly, make sure you've followed all of the steps above carefully. Go to the [Fly dashboard](https://fly.io/dashboard) and view the deployment logs; this will often be helpful for debugging. If you're still having issues [open an issue](https://github.com/edgedb/remix/issues/new) on the `edgedb/remix` repo.\n\n## GitHub Actions\n\nWe 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.\n\n## Project structure\n\nThis is a pretty simple note-taking app, but it's a good example of how you can build a full stack app with EdgeDB 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\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### Vitest\n\nFor lower level tests of utilities and individual components, we use `vitest`. We have DOM-specific assertion helpers via [`@testing-library/jest-dom`](https://testing-library.com/jest-dom).\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. To run type checking across the whole project, run `npm run typecheck`.\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":["Applications","Starter","Stacks"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeldata%2Fremix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeldata%2Fremix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeldata%2Fremix/lists"}