pearlselvan/testreact

Hello World React App

A simple React TypeScript application ready to deploy on Hugging Face Spaces.

🚀 Deploy to Hugging Face Spaces

Step 1: Create a Hugging Face Space

1. 1.Go to Hugging Face and sign in
2. 2.Click on your profile → "New Space"
3. 3.Choose a name for your Space
4. 4.Select Docker as the Space SDK
5. 5.Choose visibility (Public or Private)
6. 6.Click "Create Space"

Step 2: Push Your Code

Option A: Using Git

# Initialize git repository (if not already initialized)
git init

# Add Hugging Face Space as remote
git remote add space https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME

# Add and commit your files
git add .
git commit -m "Initial commit"

# Push to Hugging Face
git push space main

Option B: Using Hugging Face Web Interface

1. 1.Go to your Space page
2. 2.Click "Files" tab
3. 3.Upload the following files:
4. 4.Dockerfile
5. 5.nginx.conf
6. 6.package.json
7. 7.tsconfig.json
8. 8.public/ folder
9. 9.src/ folder

Step 3: Wait for Build

Hugging Face will automatically build your Docker container. This may take 5-10 minutes. You can monitor the build logs in the Space's "Logs" tab.

Step 4: Access Your App

Once built, your app will be available at: https://YOUR_USERNAME-YOUR_SPACE_NAME.hf.space

🛠️ Local Development

# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

📝 Project Structure

hello-world-react
├── public/
│   └── index.html
├── src/
│   ├── App.tsx
│   ├── App.css
│   ├── index.tsx
│   └── index.css
├── Dockerfile
├── nginx.conf
├── package.json
├── tsconfig.json
└── README.md

📋 Notes

• —The app runs on port 7860 (Hugging Face Spaces default)
• —Docker multi-stage build optimizes image size
• —Nginx serves the production build efficiently

🔧 Troubleshooting

If your Space doesn't start:

1. 1.Check the "Logs" tab for build errors
2. 2.Ensure Dockerfile is in the root directory
3. 3.Verify all dependencies are in package.json
4. 4.Make sure port 7860 is exposed in the Dockerfile