The first thing we need to do is to create a new project!

It is assumed that you have nodejs and npm installed on your system.

Installing Katnip

If you haven't installed Katnip yet, run one of these commands:

npm install -g katnip

or

yarn global install katnip

Creating a New Project

To create a new project, simply type from the command line:

npx katnip create my-property-site

In the command above, the my-property-site corresponds to the name of the project. A directory with this name will be created under your current working directory.

Let's see if it worked!

Running the Project

Do a cd into the created directory and run:

npm start

You should see some lines of text, ending with something like Server started on port: 3000. If you open up a web browser and visit the following url:

• http://localhost:3000

You should see a web page there, showing you that the development server is up and running.

What happened?

Let's look at the files that got created. Let's exclude the package-lock.json file, and node_modules directory, they exist in any nodejs project, and you should hopefully know what they are already. Apart from these files, we have:

• src/main/index.jsx
• package.json

Let's open them up and look at them, one by one:

package.json

{
  "name": "hellotest",
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
    "start": "katnip dev",
    "dev": "katnip dev",
    "postinstall": "katnip init"
  },
  "type": "module",
  "version": "1.0.0",
  "dependencies": {
    "katnip-isoq": "^4.0.4"
  },
  "exports": {
    "./isomain": "./src/main/index.jsx"
  }
}

This is more-or-less a standard boilerplate package.json file, similar to would get created by any framework. Some things are noteworthy, though:

• A start script has been added. You can see that running npm start, is really an alias for katnip dev.
• There is a single dependency on katnip-isoq. This is a "meta plugin". All functionality in katnip is handled by plugins. Meta-plugins are a bit special in the sense that there can only be one of them, so we can see this as setting the "type" of the project. katnip-isoq is the default meta plugin, i.e. the default project type, and signifies a project with isomorphic rendering with preact using the Isoq framework.
• There is an export for ./isomain pointing to ./src/main/index.jsx. This follows a common pattern in katnip, and you can think of isomain as being a "hook channel". This particular hook channel is being used by the katnip-isoq plugin to know where the entry point of our client code is.

index.jsx

export default function() {
    return (<>
        <div>Hello World</div>
        <div>The project begins here...</div>
    </>);
}

This is simply the entrypoint for our application, and it is what is being rendered in the browser when we visit the url for the dev server. It is isomorphic though. Isomorphic in this context means that it is being run on the server when the browser requests a page, then it is being re-hydrated on the client. Don't worry if this concept is a bit confusing at the moment, hopefully it will become clearer as you progress through the tutorial.

At the moment it is a bit boring, let's go ahead and add tailwind to make it look a bit prettier.