import BuildingTheWebClient from '../../../deployment/deployment-methods/_building-the-web-client.md' import { Client } from '../DeploymentTag'

Netlify

Deploy Wasp to Netlify <Client />

This guide shows you how to deploy your Wasp app's client to Netlify. Netlify is a static hosting solution that is free for many use cases. You will need a Netlify account to follow these instructions.

Make sure you are logged in with Netlify CLI. You can check if you are logged in with npx netlify-cli status, and if you are not, you can log in with npx netlify-cli login.

First, make sure you have built the Wasp app. We'll build the client web app next.

Before deploying, you need to create a netlify.toml file in your project root to configure Netlify for building and deploying your Wasp app. This file tells Netlify where to find the web app and configures URL redirects for SPA routing.

Create the netlify.toml file with the following content:

[build]
  base = "./.wasp/out/web-app"
  publish = "./build"
  command = "exit 0"

# By default, Netlify only redirects when a path doesn't match an existing file.
# See: https://docs.netlify.com/manage/routing/redirects/rewrites-proxies/#shadowing
[[redirects]]
  from = "/*"
  to = "/200.html"
  status = 200

The build.base path should point from your Git repository root to the web-app directory. Adjust the path if your Wasp project is in a subdirectory (e.g., base = "./my-app/.wasp/out/web-app").

The build.command is set to exit 0 because the client is already built with the client environment variables.

We can now deploy the client with:

npx netlify-cli deploy

The final step is to run:

npx netlify-cli deploy --prod

That is it! Your client should be live at https://<app-name>.netlify.app.

:::note Make sure you set the https://<app-name>.netlify.app URL as the WASP_WEB_CLIENT_URL environment variable in your server hosting environment. :::

Deploying through Github Actions

To enable automatic deployment of the client whenever you push to the main branch, you can set up a GitHub Actions workflow. To do this, create a file in your repository at .github/workflows/deploy.yaml. Feel free to rename deploy.yaml as long as the file type is not changed.

Here's an example configuration file to help you get started. This example workflow will trigger a deployment to Netlify whenever changes are pushed to the main branch.

name: Deploy Client to Netlify

on:
  push:
    branches:
      - main # Deploy on every push to the main branch

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Code
        uses: actions/checkout@v5

      - name: Setup Node.js
        id: setup-node
        uses: actions/setup-node@v5
        with:
          node-version: "{minimumNodeJsVersion}"

      - name: Install Wasp
        run: npm i -g @wasp.sh/wasp-cli@{latestWaspVersion} # Change to your Wasp version

      - name: Wasp Build
        run: wasp build

      - name: Build the client
        run: REACT_APP_API_URL=${{ secrets.WASP_SERVER_URL }} npx vite build

      - name: Deploy to Netlify
        run: |
          npx netlify-cli deploy --prod --auth=$NETLIFY_AUTH_TOKEN --site=$NETLIFY_SITE_NAME

    env:
      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
      NETLIFY_SITE_NAME: netlify-site-name

• NETLIFY_AUTH_TOKEN: For the auth token, you'll generate a new Personal Access Token on Netlify.

• NETLIFY_SITE_NAME: This is the name of your Netlify project.

• WASP_SERVER_URL: This is your server's URL and is generally only available after deploying the backend. This variable can be skipped when the backend is not functional or not deployed, but be aware that backend-dependent functionalities may be broken.

After getting the environment variables, you need to set these in GitHub Repository Secrets.