Getting Started Guide

Learn how to set up and use this Bootstrap 5 + Express.js starter kit.

About This Starter Kit

This starter kit combines several powerful technologies to help you quickly build responsive, modern websites:

  • Express.js - A minimal and flexible Node.js web application framework
  • EJS Templates - A simple templating language to generate HTML with JavaScript
  • Bootstrap 5 - A popular CSS framework for responsive, mobile-first websites
  • SASS - A CSS preprocessor for more organized and maintainable styles
  • Bootstrap Icons - Over 1,800 icons for your project

Prerequisites

Before you begin, make sure you have the following installed:

Node.js

v14 or newer - The JavaScript runtime that powers the application

Download Node.js
VS Code

A recommended code editor for this project

Download VS Code

Project Structure

The project is organized as follows:

project-root/
├── data/
│   └── pages.json             # Content definitions for pages
├── public/                    # Static files served to the client
│   ├── css/                   # Compiled CSS files
│   └── fonts/                 # Font files including Bootstrap Icons
├── scss/                      # SASS source files
│   ├── _custom.scss           # Custom styles
│   ├── _variables.scss        # Bootstrap variable overrides
│   └── main.scss              # Main SASS file
├── scripts/
│   └── copy-icons.js          # Script to copy Bootstrap Icons
├── views/                     # EJS template files
│   ├── partials/              # Reusable template parts
│   ├── layout.ejs             # Main layout template
│   └── page.ejs               # Page template
├── index.js                   # Main server file
├── package.json               # Project dependencies and scripts
└── README.md                  # Project documentation

Setting Up the Project

  1. Clone or download the project to your computer
  2. Open PowerShell (pwsh)
  3. Navigate to the project directory: cd path\to\project
  4. Install dependencies: npm install
  5. Start the development server: npm run start:dev
  6. Open your browser and visit: http://localhost:3000

  1. Clone or download the project to your computer
  2. Open Terminal
  3. Navigate to the project directory: cd path/to/project
  4. Install dependencies: npm install
  5. Start the development server: npm run start:dev
  6. Open your browser and visit: http://localhost:3000

Development Workflow

This starter kit includes several npm scripts to help with development:

Command Description
npm start Start the server in production mode
npm run dev Start the server with nodemon for auto-reloading
npm run build-css Compile SASS to CSS once
npm run watch-css Watch SASS files and compile on changes
npm run start:dev Do all of the above at once (recommended)

Adding Content to Your Site

There are several ways to add content to your site:

JSON Configuration

Add new pages through the pages.json file. This is the simplest way to add static content.

{
  "title": "Page Title",
  "url": "/page-url",
  "template": "page",
  "content": {
    "heading": "Page Heading",
    "text": "Description",
    "body": "Content"
  }
}
EJS Templates

Create custom templates in the views directory for more complex layouts.

  • Reusable components
  • Dynamic content
  • Custom layouts
Database Integration

Connect to a database for dynamic content:

  • MongoDB with Mongoose
  • MySQL with Sequelize
  • PostgreSQL with Prisma
API Integration

Fetch content from external APIs:

  • REST APIs
  • GraphQL endpoints
  • Third-party services

Customizing the Look and Feel

To customize the appearance:

  • Edit scss/_variables.scss to override Bootstrap variables
  • Add custom styles to scss/_custom.scss
  • The changes will be compiled automatically when running npm run start:dev

For example, to change the primary color:

// In _variables.scss
$primary: #ff5733; // Change to your desired color

Deploying Your Site

This starter kit can be deployed to various hosting platforms:

Heroku

Add a Procfile with web: node index.js

Vercel/Netlify

Configure as a Node.js application

Traditional Hosting

Build the site and upload via FTP

Quick Resources
Documentation