Welcome to my portfolio built on Hono and Remix! I like to play around with new frameworks and technology and this is one I've been working with recently! If you like this build be sure to checkout the template I made to make your own; or fork this one!
📧 Note: If you like what you see and would like to get in contact with me please email me at shayne.preston@protonmail.com
I find NVM to be a great way to switch between node versions when working on multiple projects. Whether it's node v20, v18, or v8 NVM can quickly swap node versions!
Once NVM is setup run the following:
nvm install
npm i -g pnpm@^8
pnpm installAlternatively, you can use corepack to manage your package management.
After running pnpm install various lifecycle scripts will run to setup git hooks and certificates to utilize https for
the dev server.
You'll need to modify your operating system's host file to include local.example-test.com this is helps with CORS and
CSP issues that can come up when just using localhost or 127.0.0.1.
Most production applications require environment variables to configure settings securely. We’ll set up a .env file to
inject variables locally, making them accessible via process.env. This template also uses Zod to
ensure type safety when loading these variables.
- Create a
.envfile at the root of the project and add the following values:
ABORT_DELAY=5000- These variables are now accessible on the
process.envobject when the server starts and validated with Zod to catch any type issues early.
To start the dev server run the following and navigate to the url provided in the terminal:
pnpm dev- Unit/Integration Tests: Run the following to test individual components or functions in isolation:
pnpm test- End-to-End (E2E) Tests: Run the following to simulate user interactions across different browsers:
pnpm test:e2e:localMost IDEs will take in the provided eslint and prettier configs and automatically format files on save. If not running the following will check to make sure there are no styling issues:
pnpm lint # eslint check
pnpm format:verify # prettier check
pnpm typecheck # typechecking