This template supports
Astro v2.x, Alpine.js v3.x,
Bulma CSS 0.9.x and
Vite 4.x. Currently available features :
- Astro 2.x
- Bulma 0.9.x
- Alpine.js v3.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 quikly 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 nodejs environment. If you already have Node and pnpm installed on your machine, you can skip the following sections.
Pnpm / Yarn / Npm
To start working with the project, we are going to need the
Node Package Manager, commonly known as
npm. We use
pnpm in our projects but nothing stops you from using
yarn, feel free to do so). We personally recommend
pnpm as we simply think it is a more efficient package manager.
npm is distributed with Node.js, which means that when you download Node.js, you automatically get npm installed on your computer. First, check if you already have node and npm installed. To check if you have Node.js installed, run this command in your terminal:
To confirm that you have npm installed you can run this command in your terminal:
This template needs a minimum version number for Node.js. We made sure that the project works properly with Node.js 16.x LTS. You can use NVM to easily manage multiple nodejs versions on the same machine. It should also run properly on Node.js 14.x.
If node is not installed on your machine, follow the steps described in one of the following guides, depending on your operating system:
- Install node.js and npm on Windows
- Install node.js and npm on Linux
- Install node.js and npm on Mac OSX
Installing the project
Before starting editing the Dock 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-Dock-x.x folder) folder inside it. We will talk about the project structure in the upcoming section :
Once done, you need to install the project dependencies with
npm, that we previously installed. Enter the following command at the root of the
my-project folder :
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.