From 1da821bfb23213bd2ca17474c31ee4e4141409cf Mon Sep 17 00:00:00 2001 From: Bojun Feng <102875484+Bojun-Feng@users.noreply.github.com> Date: Sun, 20 Oct 2024 02:04:11 -0500 Subject: [PATCH 1/4] fix #2344 --- web/docs/advanced/deployment/manually.md | 83 ++++++++++++++++++++++++ 1 file changed, 83 insertions(+) diff --git a/web/docs/advanced/deployment/manually.md b/web/docs/advanced/deployment/manually.md index 29c480b1e8..b9722e6d85 100644 --- a/web/docs/advanced/deployment/manually.md +++ b/web/docs/advanced/deployment/manually.md @@ -265,6 +265,89 @@ netlify deploy --prod That is it! Your client should be live at `https://.netlify.app` ✨ +:::caution +Please do not set up the continuous deploy through the Netlify website. When deployed in this way, Netlify doesn't redirect URLs toward `index.html` but instead returns 404, which can break the user authentication functionality. Wasp by default comes with a `netlify.toml` file in `.wasp/build/web-app` that configures Netfliy correctly, but the configuration may break when deployed through the Netlify website. + +It is recommended to deploy through the Netlify CLI in Github Actions. The first deploy can be through the website or manually through get a `NETLIFY_SITE_ID`, then the following deploys can be automatic. + +
+Example Github Action (Updated for 0.15.0) + +``` +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@v2 + + - name: Setup Node.js + id: setup-node + uses: actions/setup-node@v4 + with: + node-version: '20' + + - name: Docker setup + uses: docker/setup-buildx-action@v3 + + - name: Install Wasp + run: curl -sSL https://get.wasp-lang.dev/installer.sh | sh -s -- -v 0.15.0 # Change to your Wasp version + + - name: Wasp Build + run: cd ./app && wasp build + + - name: Install dependencies and build Vite project + run: | + cd ./app/.wasp/build/web-app + npm install + REACT_APP_API_URL=${{ secrets.WASP_SERVER_URL }} npm run build + + - name: Deploy to Netlify + run: | + cd ./app/.wasp/build/web-app + npm install -g netlify-cli + netlify deploy --prod --dir=build --auth=$NETLIFY_AUTH_TOKEN --site=$NETLIFY_SITE_ID + + env: + NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} + NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} +``` +
+ +
+How do I get the Environment Variables? + +- **`NETLIFY_AUTH_TOKEN`**: This is the token that allows GitHub Actions to authenticate with your Netlify account. You can generate this from the **Netlify User Settings**: + - Go to your [Netlify User Settings Page](https://app.netlify.com/user/settings). + - Scroll down to **Personal Access Tokens**. + - Click on **New Access Token** to create a new token. + +- **`NETLIFY_SITE_ID`**: This is the unique identifier for your Netlify site. You can obtain this from the **Site Settings** of your site in the Netlify dashboard: + - Go to your **Netlify dashboard**. + - Click on the specific site you want to deploy. + - Go to **Site Settings** → **General** → **Site Information** → **Site ID**. + +- **`WASP_SERVER_URL`**: This is the link that points to your backend 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 obtaining the environment variables, you need to store these values securely in GitHub Secrets. To add these: + +1. Go to your **GitHub repository**. +2. Navigate to **Settings** → **Secrets and variables** → **Actions** → **New repository secret**. +3. Add the following secrets: + - `NETLIFY_AUTH_TOKEN` + - `NETLIFY_SITE_ID` + - `WASP_SERVER_URL` +
+::: + :::note Make sure you set this URL as the `WASP_WEB_CLIENT_URL` environment variable in your server hosting environment (e.g., Fly.io or Heroku). ::: From 6a893584ce06e16b9ac2e8d092d31788216d43db Mon Sep 17 00:00:00 2001 From: Bojun Feng <102875484+Bojun-Feng@users.noreply.github.com> Date: Sun, 20 Oct 2024 02:11:35 -0500 Subject: [PATCH 2/4] typo --- web/docs/advanced/deployment/manually.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/docs/advanced/deployment/manually.md b/web/docs/advanced/deployment/manually.md index b9722e6d85..a975f21146 100644 --- a/web/docs/advanced/deployment/manually.md +++ b/web/docs/advanced/deployment/manually.md @@ -268,7 +268,7 @@ That is it! Your client should be live at `https://.netlify.app` ✨ :::caution Please do not set up the continuous deploy through the Netlify website. When deployed in this way, Netlify doesn't redirect URLs toward `index.html` but instead returns 404, which can break the user authentication functionality. Wasp by default comes with a `netlify.toml` file in `.wasp/build/web-app` that configures Netfliy correctly, but the configuration may break when deployed through the Netlify website. -It is recommended to deploy through the Netlify CLI in Github Actions. The first deploy can be through the website or manually through get a `NETLIFY_SITE_ID`, then the following deploys can be automatic. +It is recommended to deploy through the Netlify CLI in Github Actions. The first deploy can be through the website or manually to get a `NETLIFY_SITE_ID`, the following deploys can then be automatic.
Example Github Action (Updated for 0.15.0) From c1aece97e0f073cf385d7f8dbf1785dcda81a3b2 Mon Sep 17 00:00:00 2001 From: Bojun Feng <102875484+Bojun-Feng@users.noreply.github.com> Date: Mon, 4 Nov 2024 18:06:13 -0600 Subject: [PATCH 3/4] update netlify.toml caution to be more general MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Martin Šošić --- web/docs/advanced/deployment/manually.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web/docs/advanced/deployment/manually.md b/web/docs/advanced/deployment/manually.md index a975f21146..a7821bbaa9 100644 --- a/web/docs/advanced/deployment/manually.md +++ b/web/docs/advanced/deployment/manually.md @@ -265,8 +265,10 @@ netlify deploy --prod That is it! Your client should be live at `https://.netlify.app` ✨ -:::caution -Please do not set up the continuous deploy through the Netlify website. When deployed in this way, Netlify doesn't redirect URLs toward `index.html` but instead returns 404, which can break the user authentication functionality. Wasp by default comes with a `netlify.toml` file in `.wasp/build/web-app` that configures Netfliy correctly, but the configuration may break when deployed through the Netlify website. +:::caution Redirecting URLs toward `index.html` +If you follow the instructions above, Netlify will use `netlify.toml` file that Wasp generates by default in `.wasp/build/web-app/`. This will correctly configure Netlify to redirect URLs toward `index.html`, which is important since Wasp is SPA. + +If you instead use another method of deployment to Netlify, e.g. do it via CI, make sure that Netlify picks up that `netlify.toml` file, or configure URL redirecting yourself manually on Netlify. It is recommended to deploy through the Netlify CLI in Github Actions. The first deploy can be through the website or manually to get a `NETLIFY_SITE_ID`, the following deploys can then be automatic. From c8fd0f361a36edae062b2d7b1811ff8ccde1919b Mon Sep 17 00:00:00 2001 From: Bojun Feng <102875484+Bojun-Feng@users.noreply.github.com> Date: Mon, 4 Nov 2024 18:17:47 -0600 Subject: [PATCH 4/4] refactor github action section --- web/docs/advanced/deployment/manually.md | 35 +++++++++--------------- 1 file changed, 13 insertions(+), 22 deletions(-) diff --git a/web/docs/advanced/deployment/manually.md b/web/docs/advanced/deployment/manually.md index a7821bbaa9..404c1abef0 100644 --- a/web/docs/advanced/deployment/manually.md +++ b/web/docs/advanced/deployment/manually.md @@ -271,6 +271,17 @@ If you follow the instructions above, Netlify will use `netlify.toml` file that If you instead use another method of deployment to Netlify, e.g. do it via CI, make sure that Netlify picks up that `netlify.toml` file, or configure URL redirecting yourself manually on Netlify. It is recommended to deploy through the Netlify CLI in Github Actions. The first deploy can be through the website or manually to get a `NETLIFY_SITE_ID`, the following deploys can then be automatic. +::: + +:::note +Make sure you set this URL as the `WASP_WEB_CLIENT_URL` environment variable in your server hosting environment (e.g., Fly.io or Heroku). +::: + +### Deploying through Github Actions + +To enable automatic deployment of the frontend 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.
Example Github Action (Updated for 0.15.0) @@ -327,32 +338,12 @@ jobs:
How do I get the Environment Variables? -- **`NETLIFY_AUTH_TOKEN`**: This is the token that allows GitHub Actions to authenticate with your Netlify account. You can generate this from the **Netlify User Settings**: - - Go to your [Netlify User Settings Page](https://app.netlify.com/user/settings). - - Scroll down to **Personal Access Tokens**. - - Click on **New Access Token** to create a new token. - -- **`NETLIFY_SITE_ID`**: This is the unique identifier for your Netlify site. You can obtain this from the **Site Settings** of your site in the Netlify dashboard: - - Go to your **Netlify dashboard**. - - Click on the specific site you want to deploy. - - Go to **Site Settings** → **General** → **Site Information** → **Site ID**. +- **`NETLIFY_AUTH_TOKEN` & `NETLIFY_SITE_ID`**: They can be configured through Netlify. - **`WASP_SERVER_URL`**: This is the link that points to your backend 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 obtaining the environment variables, you need to store these values securely in GitHub Secrets. To add these: - -1. Go to your **GitHub repository**. -2. Navigate to **Settings** → **Secrets and variables** → **Actions** → **New repository secret**. -3. Add the following secrets: - - `NETLIFY_AUTH_TOKEN` - - `NETLIFY_SITE_ID` - - `WASP_SERVER_URL` +After obtaining the environment variables, you need to store these values securely in GitHub Secrets.
-::: - -:::note -Make sure you set this URL as the `WASP_WEB_CLIENT_URL` environment variable in your server hosting environment (e.g., Fly.io or Heroku). -::: ## Railway (server, client and database)