Skip to content

Commit 14e7319

Browse files
Update Docs: Netlify Deploy Should Be Through CLI, Not Website (#2347)
* fix #2344 * typo * update netlify.toml caution to be more general Co-authored-by: Martin Šošić <Martinsos@users.noreply.github.com> * refactor github action section --------- Co-authored-by: Martin Šošić <Martinsos@users.noreply.github.com>
1 parent 75f0e80 commit 14e7319

File tree

1 file changed

+76
-0
lines changed

1 file changed

+76
-0
lines changed

web/docs/advanced/deployment/manually.md

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -265,10 +265,86 @@ netlify deploy --prod
265265

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

268+
:::caution Redirecting URLs toward `index.html`
269+
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.
270+
271+
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.
272+
273+
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.
274+
:::
275+
268276
:::note
269277
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).
270278
:::
271279

280+
### Deploying through Github Actions
281+
282+
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.
283+
284+
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.
285+
286+
<details>
287+
<summary>Example Github Action (Updated for 0.15.0)</summary>
288+
289+
```
290+
name: Deploy Client to Netlify
291+
292+
on:
293+
push:
294+
branches:
295+
- main # Deploy on every push to the main branch
296+
297+
jobs:
298+
deploy:
299+
runs-on: ubuntu-latest
300+
301+
steps:
302+
- name: Checkout Code
303+
uses: actions/checkout@v2
304+
305+
- name: Setup Node.js
306+
id: setup-node
307+
uses: actions/setup-node@v4
308+
with:
309+
node-version: '20'
310+
311+
- name: Docker setup
312+
uses: docker/setup-buildx-action@v3
313+
314+
- name: Install Wasp
315+
run: curl -sSL https://get.wasp-lang.dev/installer.sh | sh -s -- -v 0.15.0 # Change to your Wasp version
316+
317+
- name: Wasp Build
318+
run: cd ./app && wasp build
319+
320+
- name: Install dependencies and build Vite project
321+
run: |
322+
cd ./app/.wasp/build/web-app
323+
npm install
324+
REACT_APP_API_URL=${{ secrets.WASP_SERVER_URL }} npm run build
325+
326+
- name: Deploy to Netlify
327+
run: |
328+
cd ./app/.wasp/build/web-app
329+
npm install -g netlify-cli
330+
netlify deploy --prod --dir=build --auth=$NETLIFY_AUTH_TOKEN --site=$NETLIFY_SITE_ID
331+
332+
env:
333+
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
334+
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
335+
```
336+
</details>
337+
338+
<details>
339+
<summary>How do I get the Environment Variables?</summary>
340+
341+
- **`NETLIFY_AUTH_TOKEN` & `NETLIFY_SITE_ID`**: They can be configured through Netlify.
342+
343+
- **`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.
344+
345+
After obtaining the environment variables, you need to store these values securely in GitHub Secrets.
346+
</details>
347+
272348
## Railway (server, client and database)
273349

274350
We will show how to deploy the client, the server, and provision a database on Railway.

0 commit comments

Comments
 (0)