https://github.com/coder7475/bare-metal-remix
https://github.com/coder7475/bare-metal-remix
Last synced: 27 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/coder7475/bare-metal-remix
- Owner: coder7475
- License: mit
- Created: 2024-12-01T04:22:29.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-01T05:21:52.000Z (about 1 year ago)
- Last Synced: 2024-12-01T05:30:20.012Z (about 1 year ago)
- Language: TypeScript
- Size: 30.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Bare Metal Remix
Learn more about [Remix Stacks](https://remix.run/stacks).
```sh
npx create-remix@latest --template coder7475/bare-metal-remix
```
## What's in the stack
- [GitHub Actions](https://github.com/features/actions) for deploy on merge to production environment
- MongoDB Database ORM with [TypeGoose](https://typegoose.github.io) & [Mongoose](https://mongoosejs.com/)
- Styling with [Tailwind](https://tailwindcss.com/)
- End-to-end testing with [Cypress](https://cypress.io)
- Local third party request mocking with [MSW](https://mswjs.io)
- Unit testing with [Vitest](https://vitest.dev) and [Testing Library](https://testing-library.com)
- Code formatting with [Prettier](https://prettier.io)
- Linting with [ESLint](https://eslint.org)
- Static Types with [TypeScript](https://typescriptlang.org)
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
Start the Journey:
```sh
git init # if you haven't already
git add .
git commit -m "Initialize project"
```
- Start dev server:
```sh
npm run dev
```
This starts your app in development mode, rebuilding assets on file changes.
## GitHub Actions
We 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.
## Testing
### 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`](https://testing-library.com/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:
```ts
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:
```ts
afterEach(() => {
cy.cleanupUser();
});
```
That way, we can keep your local db clean and keep your tests isolated from one another.
### Vitest
For 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).
### 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.cjs`.
### Formatting
We 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.