Install Tools#

This is the first step before you can create a project.

You will need to install a development environment that supports compiling, testing and running your application. You will need the following:

• Git client
• node.js
• Preact
• Vite
• Vitest

Git client#

Any recent version of Git can be installed, and it should be preinstalled on macOS and Linux systems. You can also download and install a Windows version from the main Git site.

node.js#

1. Install it from node.js. Check the box for extra tools to be installed, including choclatey.
2. Verify it worked using: node -v (if the version number is returned, then your environment is running as it should be).
3. Determine its location using: where node (the path should be returned).
4. Confirm that it is working using: node (prompt then changes to >), then console.log(“Hello from Node!”) (Hello from Node! should be printed).
5. After the node.js install, from the command line in Git Bash, (to get latest npm verion) run npm install -g npm@12.0.2 (version number will change in time, as suggested by the product itself).

Preact#

Create a Vite-Powered Preact App (assuming that Node.js is already set up)#

1. From Git Bash prompt, run: npm init preact
2. Take all defaults, except choose Typescript over JavaScript as your scripting language.
3. Then, to run it, from the correct directory, npm run dev
4. Later, when ready to build, npm run build (Upon completion, you’ll have a new dist/ folder which can be deployed directly to a server.)

Install htm preact#

From Git Bash prompt, run: npm install htm preact

Install Babel to convert JSX to actual JavaScript#

From Git Bash prompt, run: npm install –save-dev @babel/preset-typescript

Set up Aliasing in TypeScript#

1. TypeScript, even when used alongside a bundler, has its own process of resolving types.
2. In order to ensure Preact’s types are used in place of React’s, you will want to add the following configuration to your tsconfig.json (or jsconfig.json):

{
  "compilerOptions": {
    ...
    "skipLibCheck": true,
    "paths": {
      "react": ["./node_modules/preact/compat/"],
      "react/jsx-runtime": ["./node_modules/preact/jsx-runtime"],
      "react-dom": ["./node_modules/preact/compat/"],
      "react-dom/*": ["./node_modules/preact/compat/*"]
    }
  }
}

1. Additionally, you may want to enable skipLibCheck as we do in the example above.
2. Some React libraries make use of types that may not be provided by preact/compat (though we do our best to fix these), and as such, these libraries could be the source of TypeScript compilation errors.
3. By setting skipLibCheck, you can tell TS that it doesn’t need to do a full check of all .d.ts files (usually these are limited to your libraries in node_modules) which will fix these errors.

Vite#

Instructions, Windows or Mac

The instructions below are summarized from the above, and capture what I did for my own Windows setup.

1. From Git Bash prompt, run: npm init @vitejs/app, and follow the prompts. (e.g. I created a project called sandbox with Vanilla settings, so replace this name below with your project name).
2. Once in Vite, use h for help.
3. cd sandbox
4. npm install

After this, to launch Vite:

1. cd sandbox
2. npm run dev (then you can view your site at: http://localhost:5173/)

Vitest#

Instructions, Windows or Mac

The instructions below are summarized from the above, and capture what I did for my own Windows setup.

1. Navigate to your local Vite folder.
2. npm install -D vitest
3. Add to .gitignore: .vitest/
4. Add to package.json
   1. There should already be a section called scripts
   2. Add this line at the end of that section, also adding a comma to separate the previous last item from this new last item: “test”: “vitest”
5. Download sum.js to your local Vite folder.
6. Download sum.test.js to your local Vite folder.
7. Download square-root.test.js to your local Vite folder.
8. Run all your tests: npm test
   1. The above will run all tests (.test.js) in your project.
   2. You can filter to a subset of the tests by specifying a name after “test”.

Last Word#