Code Monkey home page Code Monkey logo

vite-react-template's Introduction

Vite React Template with Deployment Configuration

This repository contains a Vite-powered React template with pre-configured deployment settings. Follow the instructions below to set up, develop, and deploy your project.

Features

  • Vite for fast development and optimized builds
  • React for building user interfaces
  • GitHub Actions for automated deployment to GitHub Pages

Getting Started

Prerequisites

Installation

  1. Clone the repository:

    git clone https://github.com/Sel-Labs/vite-react-template.git
    cd vite-react-template
  2. Install dependencies:

    npm install
  3. Run the development server:

    npm run dev
    

    Your application should now be running on localhost:3000.

Deployment

This repository is pre-configured to deploy to GitHub Pages using GitHub Actions.

Configuration

To deploy your application, you need to adjust the base option in the vite.comfig.js file to point to your repository and branch.

Open vite.comfig.js.

Update the base option:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: "/vite-react-template/"
})

Replace /vite-react-template/ with the name of your GitHub repository.

Deploying

Build your project:

npm run build

Push your code to the main branch:

git add .
git commit -m "Your commit message"
git push origin main

GitHub Actions will automatically build and deploy your project to the gh-pages branch.

Accessing Your Deployed Site

After the workflow completes, your site will be available at https://your-username.github.io/your-repo-name.

Contributing

Contributions are welcome! Please open an issue or submit a pull request if you have any improvements or suggestions.

vite-react-template's People

Contributors

selormdev avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.