Astro boilerplate for projects by Locomotive.
- 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.
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# Switch to recommended Node version from .nvmrc
nvm use
# Install dependencies from package.json
npm installInside 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
# Start development server, watch for changes, and compile assets
npm start
# Compile and minify assets
npm run buildAll 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 |