This project was built with the Remix Indie Stack. Learn more about Remix Stacks.
Click this button to create a Gitpod workspace with the project set up and Fly pre-installed
-
This step only applies if you've opted out of having the CLI install dependencies for you:
npx remix init
-
Initial setup: If you just generated this project, this step has been done for you.
npm run setup
-
Start dev server:
npm run dev
This starts your app in development mode, rebuilding assets on file changes.
The database seed script creates a new user with some data you can use to get started:
- Email:
[email protected]
- Password:
arianaiscool
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
.
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
We 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:
afterEach(() => {
cy.cleanupUser();
});
That way, we can keep your local db clean and keep your tests isolated from one another.
For lower level tests of utilities and individual components, we use vitest
. We have DOM-specific assertion helpers via @testing-library/jest-dom
.
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
.
This project uses ESLint for linting. That is configured in .eslintrc.js
.
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.