The last section covered how to setup your project to a strict EcmaScript Module standard and provisioned packages that will be used in later tutorials. Get caught up by making sure your project looks like the following.

If you are all caught up, then you can proceed to the next section.

The plugin architecture is a file structure pattern designed to separate the project code by unit feature. This allows developers to progressively toggle each one at any given time. This section will cover creating the first app plugin.

From the project root, create a new file called config/develop.ts with the following code.

This file will host all the configuration for the development piece of your application. In this case we just need to set to to enable ReactJS views and to because by default it's . This tells future plugins what environment the project is currently in. Later sections will explain a build and preview configuration as well.

Next, from the project root, create a new file called plugins/app/plugin.ts with the following code.

This file will be the entry point for your first plugin. Before starting the server, Stackpress will run a bootstrap process that will run the following events this exact order.

Specifically in the above example, a handler for was added in which we are now routing the path to the view where the means project root pathname.

Next from the project root, create a new file called plugins/app/views/home.tsx with the following code.

This file will be the view for the home page. Valid views in Stackpress require the file to a React component. If you want to modify the head of the page, you can optionally export a function React component.

Before we are ready to test this, we need to add the app plugin to a plugin list. In the package.json at the root of your project, add the following entries.

When we run , Stackpress will execute a default bootstrap process that will register the given in the given order. The (bootstrap) flag tells the command to use the config found at . The flags will make the command verbose. Adding the plugin will provision all the optional toolsets to your application.

In case you got lost along the way, here is a checkpoint of what your project should look like.

The next section will dive more into server and page routes.