react

Complete deployment guide for react on NStrim

Overview

React is a JavaScript library for building user interfaces. This template uses Create React App (CRA), which provides a comfortable setup for learning React and a solid foundation for single-page applications.

Before You Start
Make sure you have your dashboard open - you'll need the Git credentials displayed there. This template includes React 18, Tailwind CSS, Redux Toolkit, and React Router.

Quick Start

1

Create Repository from Template

On your dashboard, go to the Tools & Deployment tab. Click the "New Repository" button, select the React template from the dropdown, enter a repository name and subdomain, then click "Create Repository".

2

Clone Your Repository

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

Install Dependencies

npm install
4

Start Development Server

npm start

Open http://localhost:3000 in your browser.

5

Build & Push

npm run build
git add .
git commit -m "Initial setup"
git push origin main
Every push to Git automatically deploys your application. Check your Module Work URL on the dashboard to see your live site.

Local Development with Docker

If you don't have Node.js installed locally, you can use Docker to run React commands.

What is Docker?
Docker creates isolated "containers" with all the software you need (Node.js, npm) without installing them on your computer. Think of it like a lightweight virtual machine.

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:18 npm install

# Run development server (accessible at localhost:3000)
docker run --rm -v $(pwd):/app -w /app -p 3000:3000 node:18 npm start

# Build for production
docker run --rm -v $(pwd):/app -w /app node:18 npm run build
Note
Docker is optional for local development. The NStrim platform handles deployment automatically - you only need Docker if you want to run commands locally without Node.js installed.

Project Structure

Understanding where files are located:

├── src/
│   ├── components/           # React components
│   ├── hooks/                # Custom React hooks
│   ├── pages/                # Page components
│   ├── services/             # API services
│   ├── store/                # Redux store configuration
│   ├── App.js                # Root component
│   ├── App.css               # App styles
│   └── index.js              # Application entry point
├── public/                   # Static files
├── package.json              # Dependencies and scripts
├── tailwind.config.js        # Tailwind CSS configuration
└── Dockerfile                # Docker build configuration

Common Tasks

Creating a Component

Create .js files in src/components/:

// src/components/Button.js
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 Hooks

Common hooks for state and side effects:

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Using React Router

React Router is pre-configured for navigation:

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

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

Using Tailwind CSS

Tailwind CSS 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

npm start Start development server (port 3000)
npm run build Create optimized production build
npm test Run test suite
npm run eject Eject from CRA (one-way operation)

Troubleshooting

npm install fails with permission errors

Cause: Permission issues with npm cache or node_modules.

Solution: Delete node_modules folder and package-lock.json, then run npm install again.

Port 3000 already in use

Cause: Another process is using port 3000.

Solution: Set a different port: PORT=3001 npm start or stop the other process.

Component not re-rendering

Cause: State mutation instead of creating new state.

Solution: Always create new objects/arrays when updating state. Use spread operator: setItems([...items, newItem])

Changes not reflecting in browser

Cause: Browser cache or hot reload not working.

Solution: Hard refresh (Ctrl+Shift+R or Cmd+Shift+R) or restart the dev server.

Build fails after deployment

Cause: Build errors or missing dependencies.

Solution: Run npm run build locally first to check for errors before pushing.

Deployment Workflow

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

Code Change git push npm run build Deploy static files Live!

Your deployed application URL follows this format: 

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

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

For more information, visit the official React Documentation.