Locomotive Astro Boilerplate

Astro boilerplate for projects by Locomotive.

Features

• PostCSS 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

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