Learn more about Remix Stacks.
npx create-remix@latest --template amanolar94/electro-swing-stack
- Database ORM with Prisma
- Styling with Tailwind
- Code formatting with Prettier
- Linting with ESLint
- Static Types with TypeScript
- Hot Module Replacement with remix-vite
Not a fan of bits of the stack? Fork it, change it, and use npx create-remix --template your/repo! Make it your own.
-
This step only applies if you've opted out of having the CLI install dependencies for you:
npx remix init
-
Run the first build:
npm run build
-
Start dev server:
npm run dev
This starts your app in development mode, BUT with hot module replacement!
This is just a hello world app that serves as a starter project.
To initialize prisma on an existing project you need to follow the steps bellow:
- run
npx prisma initto initialize your prisma files. - set your database url in the env file:
DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public" - run
npx prisma db pullto introspect your database. - run
npx prisma generateto read your schema and generate the Prisma Client Library.
This mini guide assumes that you use mysql and postgres on an already existing database. See the Set Up Prisma guide for more details and instructions on different db types.
The project uses Tailwind for styling. It is recommended to install an editor plugin (like the VSCode Tailwind CSS Intellisense plugin) to get auto complete and suggestion features.
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.
This project uses ESLint for linting. That is configured in .eslintrc.js.
The project uses Prettier for auto-formatting along with the prettier-plugin-tailwindcss for formatting the classNames strings . It's recommended to install an editor plugin (like the VSCode Prettier plugin) to get auto-formatting on save.