Template Highlights

This template supports Astro v4.x, Alpine.js v3.x, Bulma CSS v0.9.x and Vite v4.x. Currently available features :

• Astro 4.x
• Bulma 0.9.x
• Alpine.js 3.x

Astro and Vite

This template is built as an Astro UI starter. Astro is an all-in-one web framework for building fast, content-focused websites. Astro is a very light and flexible setup that can be used in very different projects. Here are some key features of Astro:

• Component Islands: A new web architecture for building faster websites.
• Server-first API design: Move expensive hydration off of your users’ devices.
• Edge-ready: Deploy anywhere, even a global edge runtime like Deno or Cloudflare.
• UI-agnostic: Supports React, Preact, Svelte, Vue, Solid, Lit and more.

Astro was designed for building content-rich websites. This includes most marketing sites, publishing sites, documentation sites, blogs, portfolios, and some ecommerce sites. Astro is bundled with Vite.

Using Vite gives you total control over the template as well as blazing fast hot reload and build features. All the important tasks are fully automated. We will explain in details how to get the most from the template, even if you've never worked, with pnpm or other tools.

To avoid repeating same chunks of code, this template uses the ability of Astro to manage components. You can quickly create easily reusable chunks of code, and even handle them with Astro props. But before diving into the template itself, We need to setup a Node.js environment. If you already have Node and pnpm installed on your machine, you can skip the following sections.

Install Node.js

First, check if you already have Node.js and npm installed. To check if you have Node.js installed, run this command in your terminal:

node -v

If Node.js is not installed on your machine, you can go to the official nodejs.org website, and choose the version depending on your operating system:

Install Node.js and npm on Windows, Linux or Mac OSX

TIP

You can also use Node Version Manager, or Volta.sh to manage multiple Node.js versions on your machine.

Enable pnpm with corepack

We recommend pnpm, which can be enabled with:

corepack enable
corepack prepare pnpm@latest --activate

Corepack is a script that acts as a bridge between Node.js projects and the package managers they are intended to be used with during development.
In practical terms, Corepack will let you use Yarn and pnpm without having to install them - just like what currently happens with npm, which is shipped in Node.js by default.

TIP

Corepack is installed with Node.js from v16.9.x.
If your version is below, install it with: npm install -g corepack

Installing the project

Before starting editing the Shifter template, we need to install the project and go through a little setup to make it functional and running. Create a new directory for your project. For the sake of the example, we will call it my-project. Unzip the contents of the template you downloaded (inside the zip, find the template-Shifter-x.x folder) folder inside it. We will talk about the project structure in the upcoming section :

cd path/to/my/project

Once done, you need to install the project dependencies with pnpm that we previously installed. Enter the following command at the root of the my-project folder :

pnpm install

This will automatically fecth all the dependencies listed in your package.json file and install them in your project. Once the installation process is done, you are ready to start the development server and begin making your changes. However, before you start we are going to take a closer look to the template structure, and to how things are organized.

Initialize a git repository

We recommend to initialize a new git repository for your project and create your first commit at this point.

# Create a new folder
git init

# Add all files to git
git add .

# Create your first commit
git commit -m "Initial commit"

WARNING

Remember to make your repository private if you fork or create a new git repository, as the template is a paid product.