Remix French House Stack
Learn more about Remix Stacks.
npx create-remix --template janhesters/french-house-stack
What's in the Stack?
The French House Stack is a starter template for developing DApps by using Magic. However, Magic is perfectly suited for a regular Web2 app, too.
- Authentication with Magic and with cookie-based sessions, which enables you to both build Web2 and Web3 apps
- GitHub Actions for deploy on merge to production and staging environments
- Styling with Tailwind and the routes in this app have been build using the free components from Tailwind UI
- End-to-end testing with Cypress
- Unit testing with Vitest and Testing Library
- Code formatting with Prettier
- Linting with ESLint
- Static Types with TypeScript
- Commit hooks with Husky and conventional commits with Commitizen
Versioning
This stack pinned all version of its dependencies in order to ensure that it always works. You can use
npx npm-check-updates -u
to check for updates and install the latest versions.
Development
-
Install dependencies:
npm i
-
Make sure your system can run the Husky hooks (Mac & Linux):
chmod a+x .husky/pre-commit chmod a+x .husky/commit-msg
-
Create a
.envfile and add these environment variables (see.env.example, too):MAGIC_PUBLISHABLE_KEYandMAGIC_SECRET_KEY- You'll need to grab a public key and a secret key for your project from your Magic dashboard.SESSION_SECRET- The session secret can be any string that is at least 32 characters long.VALID_COOKIE_TOKEN- You'll need to generate a valid cookie token for your E2E by running the app, logging in, and grabbing it from your network tab. It should be the value saved as'__user-authentication-session'.
-
Start dev server:
npm run dev
This starts your app in development mode, rebuilding assets on file changes.
i18n
The French House Stack comes with localization support through remix-i18next.
The namespaces live in public/locales/.
GitHub Actions
We use GitHub Actions for pull request checks. Any pull request triggers checks such as linting, type checks, unit tests and E2E tests.
Check out the Remix team's official stacks to learn how to use GitHub Actions for continuous integration and deployment.
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 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.loginByCookie();
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 type-check.
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.
Next Steps
Pick a Database
The French House stack intentionally leaves out a database setup for you because if you build a DApp you might want to use the IPFS or something like 3Box. And if you build a Web2 app, you might want to go with a traditional database.
If you're looking for inspiration for a centralized database, check out the Indie Stack for a simple SQLite setup or the Blues Stack for a enterprise grade PostgeSQL setup.
Pick a Blockchain
Magic is compatible with a variety of blockchains. The most popular for DApps is Ethereum and the most popular chain in general is Bitcoin.
Deployment
Learn how you can deploy your Remix app here. For examples of setups you can check out the official Remix stacks.
Explore Magic
The French House Stack comes with magic link setup via email preconfigured. However, Magic also offers social auth (e.g. for Google), multi-factor auth and WebAuthn.
Note: the included cookie based authentication with createCookieSessionStorage is set up as recommended by the Magic docs. However, it doesn't work for Web3 functions. You'll need to stay logged in with Magic to work with any chain.
To-Dos
There are a bunch of TODOs in the code, for example for error reporting. This stack leaves it to you to handle error reporting.
Here is a list of things this app could use:
- error reporting
- feature flags
- use feedback capturing and tracking
Buidl!
Now go out there make some magic, and ask better questions!
157 Jan 7, 2023
688 Dec 30, 2022
6 Dec 16, 2022
56 Dec 25, 2022
141 Jan 2, 2023
61 Dec 13, 2022
32 Jan 2, 2023
18 Oct 31, 2022
25 Dec 15, 2022
11 Nov 8, 2022
1.3k Dec 26, 2022
10 Apr 6, 2022
25 Dec 7, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
11 Oct 11, 2022