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 With Preact And TypeScript#

Instructions, Windows or Mac

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

1. Install vite via npm: npm create vite@latest

(Select Preact project; next select preact with Typescript)

Then complete the install, via:

1. cd into the appropriate subfolder (as prompted).
2. npm install (Note, it will take a moment to complete)

After this, to launch Vite (in the appropriate subfolder):

1. npm run dev (then you can view your site at: http://localhost:5173/, or at another port should this one already be in use)

(Once in Vite, use h for help.)

After creating your Vite + Preact + TypeScript project, most of your development will take place inside the src/ folder. This is where your application’s components, logic, styles, and assets live.

At the root of your project, you’ll find index.html, which acts as the base HTML template for your app. Vite uses this file during development and injects the necessary scripts automatically.

The <div id="app"></div> element is where your Preact application will be mounted. Thanks to Vite, you do not need to manually manage script injection — it is handled automatically during both development and build time.

The src/ folder contains everything that makes up your app, from the entry point script to components and styles. This is where you will modify existing files, and create new components, to which eventually will result in your tailored application.

We have the main.tsx file, which is the true entry point of your Preact app. It initializes the app and mounts the root Preact component (App) to the HTML’s <div id="app">.

The main component of your application is the App.tsx file. This is usually where you build the layout, add routes, or include global providers (like context or theming).

In addition, the App.css file contains styles specific to the App.tsx component, while index.css defines global rules for your app — such as font families, CSS root variables, etc. The vite-env.d.tsis an interesting one, that provides types for Vite-specific features, particularly for accessing environment variables via import.meta.env.

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”.

SQLite Via Node.js (Recommended, but Optional)#

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 nodejs-sqlite folder.
2. Download the chinook.db to the local folder.
3. npm init -y
4. npm install sqlite3
5. npm approve-scripts sqlite3
6. Create a new index.js in the project directory with the following source code:
   1. console.log("Node.js + SQLite");
7. Add to package.json
   1. "type": "module",
   2. "start": "node index.js"

Once this is done, to start your project: npm start

To connect to your local chinook database:

1. Modify the index.js to change the filename tochinook.db to connect to an existing database:
   1. import sqlite3 from "sqlite3";
   2. const db = new sqlite3.Database("chinook.db");
2. Then you can add JavaScript code to manipulate the database from there.

In case you, like me, have problems running this the first time rebuild sql3 using npm rebuild sqlite3.

Last Word#