react-vite

Overview

React Vite is a modern React setup using Vite as the build tool. It offers lightning-fast development with Hot Module Replacement (HMR), optimized production builds, and a modern development experience with React 19.

Quick Start

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>

npm install

npm run dev

npm run build
git add .
git commit -m "Initial setup"
git push origin main

Local Development with Docker

If you don't have Node.js installed locally, you can use Docker to run React commands. The project includes a Dockerfile for production builds with nginx.

Prerequisites

Install Docker Desktop for your operating system (Windows, Mac, or Linux).

Running Commands with Docker

# Run npm install
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm install

# Run development server (accessible at localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm run dev

# Build for production
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build

Project Structure

Understanding where files are located:

├── src/
│   ├── App.jsx               # Root component
│   ├── App.css               # App-specific styles
│   ├── main.jsx              # Application entry point
│   ├── index.css             # Global styles (Tailwind)
│   └── assets/               # Static assets (images, etc.)
├── public/                   # Public static files
├── index.html                # HTML entry point
├── vite.config.js            # Vite configuration
├── package.json              # Dependencies and scripts
├── nginx.conf                # Nginx config for production
└── Dockerfile                # Docker build configuration
        

Common Tasks

Creating a Component

Create .jsx files in src/:

// src/components/Button.jsx
export default function Button({ label, onClick }) {
  return (
    <button
      className="bg-blue-500 text-white px-4 py-2 rounded"
      onClick={onClick}
    >
      {label}
    </button>
  );
}

Using React Router

React Router is pre-configured. Add routes in your App:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Using Redux Toolkit

Redux Toolkit is pre-installed for state management:

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Using Tailwind CSS

Tailwind CSS 4 is pre-configured. Use classes directly in your JSX:

<div className="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind!
</div>

Useful Commands

Troubleshooting

Deployment Workflow

Every time you push code to Git, your application is automatically built and deployed:

Your deployed application URL follows this format:

https://<your-subdomain>-<repo-name>.<session-domain>

Example: https://student01-module-a.demo.nstrim.app