Locomotive Astro Boilerplate

Astro boilerplate for projects by Locomotive.

Features

• Sass for a feature rich superset of CSS.
• Tailwind CSS for a sane and scalable CSS architecture.
• Locomotive Scroll for smooth scrolling with parallax effects.
• Swup for versatile and extensible page transition.
• Prettier for a formatted and easy to maintain codebase.
• Nanostores as state manager.

Getting started

Make sure you have the following installed:

• Node — at least 20.14, the latest LTS is recommended.
• NPM — at least 8.0, the latest LTS is recommended.

💡 You can use NVM to install and use different versions of Node via the command-line.

# Clone the repository.
git clone https://github.com/locomotivemtl/astro-boilerplate.git my-new-project

# Enter the newly-cloned directory.
cd my-new-project

Installation

# Switch to recommended Node version from .nvmrc
nvm use

# Install dependencies from package.json
npm install

Project Structure

Inside of your project, you'll see the following folders and files:

/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── Card/
│   │       ├── Card.astro
│   │       └── Card.scss
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   └── index.astro
│   ├── styles/
│   │   └── main.scss
│   └── scripts/
│       ├── components/
│       ├── utils/
│       ├── app.ts
│       └── config.ts
└── package.json

Development

# Start development server, watch for changes, and compile assets
npm start

# Compile and minify assets
npm run build

Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:4321
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run astro ...	Run CLI commands like astro add, astro check
npm run astro -- --help	Get help using the Astro CLI
npm run format	Format files using prettier

Documentation

• Astro
• Locomotive Scroll
• Tailwind CSS
• Swup
• Prettier
• Nanostores