Skip to main content
This guide walks you through setting up the AWS Certified App on your local machine for development or personal use.

​
Prerequisites

Before you begin, ensure you have the following installed:

Node.js 18+

Download from nodejs.org

npm 9+

Included with Node.js installation

​
Verify Installation

Check that Node.js and npm are installed correctly: 
node --version
# Should output: v18.x.x or higher

npm --version
# Should output: 9.x.x or higher
If the commands above don’t work, you need to install Node.js from nodejs.org. Download the LTS (Long Term Support) version.

​
Installation

​
Step 1: Clone the Repository

git clone https://github.com/thisisrober/aws-certified-app.git
cd aws-certified-app
You can download the project as a ZIP file:
  1. Visit the GitHub repository
  2. Click the green Code button
  3. Select Download ZIP
  4. Extract the ZIP file to your preferred location
  5. Open a terminal in the extracted folder

​
Step 2: Install Dependencies

Install all required npm packages: 
npm install
This process typically takes 2-5 minutes depending on your internet connection. The command installs all dependencies listed in package.json.
Expected output: 
added 200+ packages, and audited 201 packages in 2m

50 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

​
Step 3: Start Development Server

Run the development server: 
npm run dev
You should see output similar to: 
  VITE v7.2.4  ready in 500 ms

  ➜  Local:   http://localhost:5173/projects/aws-certified-app/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

​
Development Workflow

​
Available Commands

Here are the main npm scripts you’ll use during development: 
# Start development server with hot reload
npm run dev

# Start on a different port
npm run dev -- --port 3000

# Expose to network (accessible from other devices)
npm run dev -- --host

​
Hot Module Replacement (HMR)

Vite provides instant hot module replacement. When you save a file, changes appear immediately in the browser without a full page reload.
The development server automatically:
  • Reloads when you save files
  • Preserves component state when possible
  • Shows compilation errors in the browser

​
Project Structure

Key directories and files: 
aws-certified-app/
├── src/
│   ├── components/          # React components
│   │   ├── Header.jsx       # Top navigation bar
│   │   ├── Menu.jsx         # Main menu screen
│   │   ├── QuestionPanel.jsx # Question display
│   │   ├── Sidebar.jsx      # Question navigation
│   │   ├── Result.jsx       # Results screen
│   │   ├── ConceptMap.jsx   # Study concept map
│   │   └── Footer.jsx       # Footer component
│   ├── data/
│   │   └── questions.js     # Exam questions database
│   ├── utils/
│   │   └── helpers.js       # Utility functions
│   ├── App.jsx              # Main application component
│   ├── main.jsx             # Application entry point
│   └── index.css            # Global styles
├── public/                  # Static assets
├── index.html               # HTML template
├── vite.config.js           # Vite configuration
├── tailwind.config.js       # Tailwind CSS config
└── package.json             # Project dependencies

​
Configuration

​
Vite Configuration

The vite.config.js file contains: 
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
  base: '/projects/aws-certified-app/',
})
The base option is set to /projects/aws-certified-app/. If you’re hosting at the root domain, change this to '/'.

​
Environment Variables

Vite supports environment variables through .env files:
.env.local
# Example environment variables
VITE_API_URL=http://localhost:3000
VITE_APP_TITLE=AWS Certified App
Environment variables must be prefixed with VITE_ to be exposed to the client-side code.

​
Troubleshooting

If port 5173 is already occupied, use a different port:
npm run dev -- --port 3000
Or set it in vite.config.js:
export default defineConfig({
  server: {
    port: 3000
  }
})
This usually means dependencies weren’t installed correctly:
# Clear npm cache and reinstall
rm -rf node_modules package-lock.json
npm cache clean --force
npm install
The initial installation can take 2-5 minutes. If it’s taking longer:
  1. Check your internet connection
  2. Try a different npm registry:
npm install --registry=https://registry.npmjs.org/
  1. If behind a proxy, configure npm:
npm config set proxy http://proxy-server:port
npm config set https-proxy http://proxy-server:port
Vite has automatic hot reload, but if changes don’t appear:
  1. Check the terminal for compilation errors
  2. Hard reload the browser (Ctrl+Shift+R or Cmd+Shift+R)
  3. Restart the dev server:
# Stop the server (Ctrl+C)
# Start it again
npm run dev
This might be a cache issue:
  1. Clear browser cache (Ctrl+Shift+Delete)
  2. Hard reload (Ctrl+F5 or Cmd+Shift+R)
  3. Try in an incognito/private window
  4. Check the browser console (F12) for errors

​
Next Steps

Build for Production

Learn how to create optimized production builds

Docker Deployment

Deploy using Docker containers

Build docs developers (and LLMs) love

Get started for freeTalk to us