Getting Started Guide

Learn how to set up and use JsBootSpark for your web projects.

About This Starter Kit

JsBootSpark 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

JsBootSpark 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

JsBootSpark 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