planter.dev

Planter Basic is a web project starter that uses Vite and comes with starter styles built out with Sass. Basic is great for beginner web developers who are looking to take a step towards modern web development without jumping into a complex framework or library.

Install

With planter-cli:

> npx @planter/cli create ditto-codes/planter-basic my-project

Or clone from GitHub.

Run Scripts

Run npm run dev or npm start to start the development server.

In package.json, the following scripts are set up for use:

"scripts": {
  "start": "npm run dev",
  "dev": "vite",
  "build": "vite build",
  "lint:js": "eslint --ext .js --fix "src/"",
  "lint:css": "npx stylelint --fix "src/""
}

Scripts

dev – Runs the development vite task, which starts watching your files and starts the dev server.
build – Runs the build vite task, which builds your site for production.
start – An alias for the dev script.
lint:js – Run ESLint on your JS files.
lint:css – Run Stylelint on your SCSS/CSS files.

Project Structure

Pages

Any .html file at the root of /src will be treated as a page. Pages can use the internal placeholders: %TITLE%, %CSS%, and %JS%. When running dev and build, %CSS% will be replaced with <link href="./<name>.css" rel="stylesheet">, and %JS% will be replaced with <script src="<name>.js"></script>.

<html lang="en">
  <head>
    %CSS%
  </head>
  <body>
    <div>Some content</div>
    %JS%
  </body>
</html>

`/src`

The home for all your project code that will be watched and transformed by the dev and build scripts.

`/static`

Static assets, such as images or external scripts. These files won’t be procesed by the dev or build scripts.

`/build`

This directory will be generated when you run npm run build and will include all HTML, JS, CSS, and other static assets, ready for production.

Configuration

The tasks and project structure of Planter Basic can be configured with planter.config.js. Check out the Config docs for more details.