Remix Synthwave Stack
Learn more about Remix Stacks.
npx create-remix --template ilangorajagopal/synthwave-stack
What's in the stack
- Vercel deployment
- PlanetScale Database
- GitHub Actions for deploy on merge to production and staging environments
- Database ORM with Prisma
- Magic Links, Google and Twitter Auth with remix-auth
- Health check API route
- Upload API with AWS S3
- Transactional emails with SendGrid
- UI with Radix UI
- Styling with TailwindCSS
- Code formatting with Prettier
- Linting with ESLint
- Static Types with TypeScript
- End-to-end testing with Cypress (Coming Soon)
- Local third party request mocking with MSW (Coming Soon)
- Unit testing with Vitest and Testing Library (Coming Soon)
Not a fan of bits of the stack? Fork it, change it, and use npx create-remix --template your/repo
! Make it your own.
Development
-
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.
Relevant code:
The main functionality is creating users, logging in and out.
- creating users, and logging in and out ./app/models/user.server.ts
- user sessions, and verifying them ./app/session.server.ts
Deployment
This Remix Stack handles automatically deploying your app to production and staging environments on Vercel.
All you have to do is to create a project on Vercel and choose your repo. Vercel handles setting up CI/CD.
Connecting to your database
The database lives on planetscale.com. Prisma has been configured to connect to Planetscale and will work in local environment. Update the database name in DATABASE_URL
variable in your .env
for local development use. Use the connection string provided on Planetscale dashboard as DATABASE_URL
in production.
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.
Testing (Coming soon)
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
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.