Silverlight Project

Based on Remix Blues Stack

Feature

• Email/Password Authentication with cookie-based sessions
• Database ORM with Prisma
• Local third party request mocking with MSW
• Code formatting with Prettier
• Linting with ESLint
• Static Types with TypeScript
• Consistent file format with EditorConfig
• Auto-formating with Git hook by using Husky and lint-staged
• Styling with Tailwind
• Using component library daisyUI for Tailwind CSS
• Changing theme with theme-change
• Generating svg-sprites by rmx-cli
• Internationalization with i18next
• Session stores in DB and will automatically extend expire time when used
• Strategy-based authentication with remix-auth
• Role-based User Permissions
• Unit testing with Vitest and Testing Library
• End-to-end testing with Playwright

Development

• Setup the git pre-commit hooks

  npm run prepare

  You only need to run this once you setup a new dev environment.

• Start the Postgres Database in Docker:

  npm run docker-db-up

  Note: The npm script will complete while Docker sets up the container in the background. Ensure that Docker has finished and your container is running before proceeding.

  You only need to run this once you setup a new dev environment.

• Initial setup:

  npm run setup

• Run the first build:

  npm run build

• 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: racheliscool

Relevant code:

This is a pretty simple note-taking app, but it's a good example of how you can build a full stack app with Prisma and Remix. The main functionality is creating users, logging in and out, and creating and deleting notes. Meantime you can change multiple language and theme.

• models for creating and deleting users, role, permission, session, and note ./app/models
• using remix-auth to implement authentication, containing session extending expiration, login verifying and logout ./app/auth.server.ts
• creating cookie session ./app/cookieSession.server.ts
• using remix-i18next to implement i18n ./app/i18next.server.ts
• using theme-change to changing theme ./app/root.ts

Debug

VS Code

Press F1 and input Debug: Debug npm Script, then choose dev

Breakpoint can work smoothly

Upgrade npm package

• Install npm-check-updates

npm install -g npm-check-updates

• Check all dependencies (excluding peerDependencies) for the project in the current directory:

ncu

• Upgrade package.json and install updates interactively

ncu --interactive --format group

Testing

Playwright

We use Playwright for our End-to-End tests in this project. As you make changes, add to an existing file or create a new file in the tests/e2e directory to test your changes.

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 Playwright client. And also can run npx playwright test which will just run tests in without interactive UI mode. Make sure the database is running in docker as described above.

We have a playwright.config.ts file with project dependencies and define a setup project that runs before all other projects. When we run npm run test:e2e:dev it will be automatically generate loginAuth.json in directory "playwright/.auth" that contains authenticated information for login.

We add a teardown property to our setup project. This will run after all dependent projects have run and will be auto-delete the user at the end of your test without need to add this in each test file.

Vitest

For lower level tests of utilities and individual components, we use vitest. We have DOM-specific assertion helpers via @testing-library/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.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.