Tutorials

React

How to deploy React website on Pyrite Cloud.

Create a React Router project

Run the following command in your terminal

Terminal

npx create-react-router@latest

You’ll see an output similar to this:

Terminal

create-react-router v7.4.0

Where should we create your new project?
react-example

◼ Using default template See https://github.com/remix-run/react-router-templates for more
✔ Template copied

Initialize a new git repository?
Yes

Install dependencies with npm?
Yes

✔ Dependencies installed
✔ Git initialized

That's it!

Enter your project directory using cd ./react-example
Check out README.md for development and deploy instructions.

Join the community at https://rmx.as/discord

Refer React Docs for more info.

Next, move into the generated project directory to view the project's files:

Terminal

cd react-example

Run the React app locally

Next, launch the application locally to make sure everything is running as expected.

Before starting the development server, ensure all dependencies are installed:

Terminal

npm install

To start the development server, run:

Terminal

npm run dev

If you navigate to http://localhost:5173 in your browser, you will see a standard React Router landing page.

Press C to stop the development server after verifying.

Add Dockerfile

Next, add a file called .dockerignore to the project's root directory. Paste the following contents:

.dockerignore

.react-router
build
node_modules
README.md

Next, add a file called Dockerfile to the project's root directory. Paste the following contents:

Dockerfile

FROM node:20-alpine AS development-dependencies-env
COPY . /app
WORKDIR /app
RUN npm ci

FROM node:20-alpine AS production-dependencies-env
COPY ./package.json package-lock.json /app/
WORKDIR /app
RUN npm ci --omit=dev

FROM node:20-alpine AS build-env
COPY . /app/
COPY --from=development-dependencies-env /app/node_modules /app/node_modules
WORKDIR /app
RUN npm run build

FROM node:20-alpine
COPY ./package.json package-lock.json /app/
COPY --from=production-dependencies-env /app/node_modules /app/node_modules
COPY --from=build-env /app/build /app/build
WORKDIR /app
CMD ["npm", "run", "start"]

Set Up GitHub Actions Workflow

Next, add the GitHub Actions workflow to the repository. Create a new file named .github/workflows/pyrite.yml in the root directory of the project.

Terminal

touch .github/workflows/pyrite.yml

Open .github/workflows/pyrite.yml and insert the following content, Replace <YOUR_GITHUB_USERNAME> and <YOUR_REPOSITORY_NAME> with your actual GitHub username and repository name:

.github/workflows/pyrite.yml

name: pyrite

on:
  push:
    branches:
      - main

permissions:
  contents: read
  packages: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Set up QEMU
        uses: docker/setup-qemu-action@v3

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3
      
      # Note: You can also use any other container registry
      - name: Login to GitHub Container Registry
        uses: docker/login-action@v3
        with:
          registry: ghcr.io
          username: ${{ github.repository_owner }}
          password: ${{ secrets.GITHUB_TOKEN }}

      - name: Build and push
        uses: docker/build-push-action@v5
        with:
          context: .
          tags: ghcr.io/<YOUR_GITHUB_USERNAME>/<YOUR_REPOSITORY_NAME>:latest
          platforms: linux/amd64
          push: true

Remember to replace the values of <YOUR_GITHUB_USERNAME> and <YOUR_REPOSITORY_NAME> with your actual values.

Push the project to GitHub

Next, push the changes to GitHub. You can use the following commands, replace <YOUR_GITHUB_USERNAME> and <YOUR_REPOSITORY_NAME> with your actual GitHub username and repository name.

Terminal

git add .
git commit -m "Initial commit"
git remote add origin [email protected]:<YOUR_GITHUB_USERNAME>/<YOUR_REPOSITORY_NAME>.git
git push -u origin main

Remember to replace the values of <YOUR_GITHUB_USERNAME> and <YOUR_REPOSITORY_NAME> with your actual values.

Deploy to Pyrite Cloud

To deploy the React app on Pyrite Cloud, follow these steps on the Dashboard:

Log In: Sign in to your Pyrite Cloud account.
Create a Team: Click Create Team, enter your team name and subscription details, then click Create.
Select Your Team: Click on the team you just created.
Create a Project: Click Create Project and enter your project name.
Create a New Service: Click New Service.
Deploy as a Web Service: Under the Web section, click Deploy.
Configure Deployment:
- Select Team & Project: Choose the team and project you created.
- Service Name: Enter the desired name for your service.
- Runtime: Select Docker runtime.
- Docker Image Name: Enter the image name (available in the Packages section of your GitHub repository).
- Port: Set the port number to 3000 (or the port your app uses).
- Plan & Region: Choose your preferred plan and region.
Deploy: Click Deploy and wait for the process to complete.
Access Your App: Once deployment is finished, click the Open Link button to view your app.

Thats it! You have successfully deployed a React website on Pyrite Cloud.

Introduction