Deployment Guide

Deploying your Stratox project is straightforward. This guide will walk you through building your project and deploying it to popular services like GitHub Pages, Netlify, Vercel and more.

Building Your Stratox Project

To build your Stratox project, run the following command in your terminal:

npm run build

This command will compile your app and output the static files into a directory named dist located in your project's root directory. These files are ready to be deployed to a hosting service of your choice.


Deploying to GitHub Pages

GitHub Pages is a free hosting service that lets you host static websites directly from your GitHub repository.

Steps:

  1. Initialize a Git Repository (if you haven't already):

    git init
    git add .
    git commit -m "Initial commit"
  2. Create a gh-pages Branch:

    git checkout -b gh-pages
  3. Copy the dist Contents to the Root:

    Replace the contents of your repository with the built files:

    rm -rf !(dist)
    cp -r dist/* .
    rm -rf dist
  4. Commit and Push to gh-pages Branch:

    git add .
    git commit -m "Deploy to GitHub Pages"
    git push origin gh-pages
  5. Configure GitHub Pages:

    • Go to your repository on GitHub.

    • Navigate to Settings > Pages.

    • Under Source, select the gh-pages branch.

    • Click Save.

  6. Access Your Deployed App:

    Your app will be available at:

    https://<your-username>.github.io/<your-repository>/

Deploying to Netlify

Netlify is a popular platform for deploying static websites with continuous deployment and other powerful features.

Steps:

  1. Create a Netlify Account:

  2. Install Netlify CLI (optional but recommended):

    npm install netlify-cli -g
  3. Login via CLI:

    netlify login
  4. Initialize Your Site:

    netlify init
    • Choose to create & configure a new site.

    • Select the team (usually your username).

    • Provide a site name (optional).

    • Set the deploy path to dist.

  5. Deploy Your Site:

    netlify deploy --prod
  6. Access Your Deployed App:

    Netlify will provide a URL where your app is deployed.


Deploying to Vercel

Vercel offers a seamless experience for deploying static sites and serverless functions.

Steps:

  1. Install Vercel CLI:

    npm install -g vercel
  2. Login to Vercel:

    vercel login
  3. Deploy Your Project:

    vercel
    • When prompted, set the output directory to dist.

  4. Configure Project Settings (if needed):

    • You can adjust settings in the vercel.json file.

  5. Access Your Deployed App:

    Vercel will provide a URL where your app is deployed.


Deploying to Other Services

The dist folder contains all the static files needed to run your app. You can deploy these files to any static hosting service, such as:

  • Amazon S3 and CloudFront

  • Firebase Hosting

  • GitLab Pages

  • Surge.sh

General Steps:

  1. Sign Up for the Service:

    Create an account on your chosen hosting platform.

  2. Upload the dist Folder:

    Use the platform's interface or CLI tools to upload your static files.

  3. Configure Domain and Settings:

    Set up any necessary configurations, such as custom domains or SSL certificates.

  4. Access Your Deployed App:

    Your app should now be live at the URL provided by the hosting service.


Conclusion

Deploying your Stratox project is as simple as building your app and uploading the contents of the dist folder to your preferred hosting service. With platforms like GitHub Pages, Netlify, and Vercel, you can have your app live in just a few minutes.

If you encounter any issues during deployment, consult the documentation of the hosting service or reach out to the Stratox community for support.

Last updated