Skip to main content

​
Quickstart Guide

Get started with SAAC Frontend in just a few minutes. This guide will walk you through creating and running your first application.

​
Prerequisites

Before you begin, ensure you have the following installed:
Node.js 18.0.0 or higher is required. We recommend using the latest LTS version for optimal stability and performance.
Check your Node.js version: 
node --version
If you need to install or update Node.js, visit nodejs.org or use a version manager like nvm.

​
Quick Setup

1

Clone the repository

First, clone the SAAC Frontend template to your local machine:
git clone <repository-url> saac-frontend
cd saac-frontend
Replace <repository-url> with your actual repository URL.
2

Install dependencies

Install all required packages using your preferred package manager:
npm install
This will install all dependencies listed in package.json:
  • React 19.1.1 and React DOM
  • Tailwind CSS 4.1.13 with Vite plugin
  • Vite 7.1.2 and all development tools
  • TypeScript 5.8.3 and type definitions
  • ESLint and related plugins
3

Start the development server

Launch the Vite development server:
npm run dev
The server will start and display output similar to:
VITE v7.1.2  ready in 342 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help
4

Open in your browser

Navigate to the URL shown in your terminal (typically http://localhost:5173).You should see the default Vite + React welcome page with:
  • Vite and React logos
  • A counter button
  • Instructions for editing the app

​
Verify Your Setup

To verify everything is working correctly:
  1. Test Hot Module Replacement: Open src/App.tsx in your editor and modify the heading text. Save the file and watch the browser update instantly without a full page reload.
  2. Test the Counter: Click the “count is 0” button. The count should increment, demonstrating React state management is working.
  3. Check the Console: Open your browser’s developer console (F12). You should see no errors.
The development server includes Hot Module Replacement (HMR), which means your changes appear instantly in the browser without losing application state.

​
What’s Running?

When you run npm run dev, several things happen:
  1. Vite Development Server: Starts on port 5173 (or next available port)
  2. React Fast Refresh: Powered by SWC for instant component updates
  3. Tailwind CSS: Compiles utility classes on-demand via the Vite plugin
  4. TypeScript Checking: Type checks your code in the background

​
Available Scripts

Your SAAC Frontend template comes with these npm scripts:

​
Development

npm run dev
Starts the Vite development server with HMR enabled. Default port: 5173.

​
Production Build

npm run build
Compiles TypeScript and builds optimized production assets to the dist/ folder. This command:
  1. Runs TypeScript compiler (tsc -b) to check types
  2. Builds optimized bundle with Vite
  3. Generates minified CSS and JavaScript

​
Preview Production Build

npm run preview
Serves the production build locally for testing before deployment. Run this after npm run build.

​
Linting

npm run lint
Runs ESLint to check code quality and style. Includes React-specific rules and TypeScript integration.

​
Your First Edit

Let’s make a quick change to verify everything works:
1

Open the App component

Open src/App.tsx in your code editor.
2

Modify the heading

Find the line with <h1>Vite + React</h1> and change it to:
src/App.tsx
<h1>SAAC Frontend</h1>
3

Save and observe

Save the file and watch your browser update instantly. The heading should now display “SAAC Frontend”.
If changes don’t appear immediately, check:
  • The development server is still running
  • No syntax errors in the console
  • Your browser has focus (some browsers pause background tabs)

​
Next Steps

Now that you have SAAC Frontend running, here’s what to explore next:

Project Structure

Understand how the project is organized and where to add your code

Styling with Tailwind

Learn how to use Tailwind CSS v4 utility classes

TypeScript Setup

Explore the TypeScript configuration and type safety features

Building for Production

Learn how to create optimized production builds

​
Troubleshooting

​
Port Already in Use

If port 5173 is already in use, Vite will automatically try the next available port. You can also specify a custom port: 
npm run dev -- --port 3000

​
Dependencies Installation Failed

If you encounter errors during npm install:
  1. Clear npm cache: npm cache clean --force
  2. Delete node_modules and package-lock.json
  3. Run npm install again

​
TypeScript Errors in Editor

If your editor shows TypeScript errors:
  1. Ensure TypeScript is installed: npm install
  2. Restart your editor’s TypeScript server
  3. Check that your editor is using the workspace TypeScript version

​
Need More Help?

For detailed installation instructions, system requirements, and advanced configuration, see the Installation guide.

Build docs developers (and LLMs) love

Get started for freeTalk to us