Guides

Concepts

Project Structure

Lancer has three primary folders:

  • client/ – where most, if not all, your HTML/JS/CSS content lives...
  • public/ – a public folder for static files, and...
  • data/ – where Lancer stores account data, temporary data, and website builds.

The Client Folder

All your HTML, JS, and CSS content goes in the client/ folder. How you arrange them is 100% up to you.

The structure of your client/ folder determines what pages are available on your website. For example, take the following files:

client/
├── _layout.html
├── index.html
├── blog.html
├── blog/
    ├── post-1.html
    ├── post-2.html

This directory structure will respond to the following URL mappings:

  • / -> client/index.html
  • /blog -> client/blog.html
  • /blog/post-1 -> client/blog/post-1.html
  • /_layout -> 404

Note the last request. Any html file that starts with an underscore (_) will not be available as a page.

JavaScript and CSS

JS and CSS files follow the same rules. Any .js or .css file is available by default. Take the following example:

client/
├── index.html
├── foo.js
├── _bar.js
├── global.css
  • A request to /foo.js will succeed.
  • A request to /_bar.js will fail.
  • However, foo.js is free to import {whatever} from './_bar.js, because Lancer bundles foo.js automatically.

JavaScript and CSS Bundling

Lancer automatically bundles JS and CSS files within your client/ folder using esbuild and PostCSS. You get bundling, minifying, and npm installs for free – no configuration required.

For JavaScript, use the standard import syntax:

import 'alpinejs'
import React from 'react'
import { stuff } from './_bar.js'

For CSS, use the standard @import syntax:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

In development, these files are bundled on-the-fly. In production, you should use lancer build to generate more optimized assets.

The Public Folder

All files in public/ are made publically available. These files do not get any special treatment by Lancer – they get served as-is.

The Data Folder

data/ is a folder where Lancer writes a lot of internal data and caching. You should never commit this folder to git. Overviewing briefly:

  • data/cache/ is where cache data goes (safe to delete at anytime)
  • data/cache/build/ is where your build files go after running lancer build

Other than data/cache/build/, you probably won't have to interact with this folder.


Next: HTML Layouts