Client deployment docs #2416
Client deployment docs #2416
Conversation
| import { Tag } from '../../../src/components/Tag' | ||
|
|
||
| // Used to mark something as related to the server | ||
| export function Server() { |
There was a problem hiding this comment.
Tiny idea, disregard if you are not into it: name these ServerTag, ClientTag, and so on, so when used in the code, it is obvious what they are? Or maybe you think this is nicer.
There was a problem hiding this comment.
We named the previous tags <Required /> and <Optional /> so I went with it here as well.
I feel like it's understandable, somebody scanning the doc will see:
import { Server, Client, Database } from './DeploymentTag'| - [Netlify](#netlify-client) | ||
| - [Railway](#railway-server-client-and-database) | ||
| - [Heroku](#heroku-server-and-database) | ||
| - [Fly.io](#flyio--) |
There was a problem hiding this comment.
What is with all the minuses here and below?
There was a problem hiding this comment.
Aw yes, this is how Docosaurus generates the link if you include a component in the title e.g.
### 4. Deploying the Database <Database />This gets the #deploying-the-database- link because of the <Database /> component.
| We can now deploy the client with: | ||
|
|
||
| ```shell | ||
| npx netlify-cli deploy |
There was a problem hiding this comment.
Why like this? Aren't they using it with netlify? Above they called netlify status and netlify login, why is it npx netlify-cli deploy now ant not netlify deploy?
There was a problem hiding this comment.
If they use npx then they don't have to globally install Netlify on your machine (which I prefer and I went with my preference here).
If I left netlify status then it's a mistake, sorry about that, I wanted to change all the call places to use npx. I'll update the rest as well.
|
|
||
| <small> | ||
|
|
||
| Carefully follow the instructions i.e. do you want to create a new app or use an existing one, the team under which your app will reside etc. |
There was a problem hiding this comment.
| Carefully follow the instructions i.e. do you want to create a new app or use an existing one, the team under which your app will reside etc. | |
| Carefully follow the instructions i.e. decide if you want to create a new app or use an existing one, pick the team under which your app will reside, etc. |
That last , might be redundant, check with some spellchecker pls, but it sounded possibly right so I put it just in case.
| That is it! Your client should be live at `https://<app-name>.netlify.app`. | ||
|
|
||
| :::note | ||
| Make sure you set this URL as the `WASP_WEB_CLIENT_URL` environment variable in your server hosting environment. |
There was a problem hiding this comment.
I was a bit confused as to which URL, what does "this URL" refer to. Maybe we cna make that clearer. We can say "the URL from above". Or maybe even better, "make sure to set that URL (https://<app-name>.netlify.app) as the ..." -> repeating it, but it is very close and local so no problem plus it is super clear. or even "make sure to set the WASP_WEB_CLIENT_URL env var to the URL that netlify CLI returned (e.g. htttps://....)". But in any case, reference it clearly.
| ::: | ||
|
|
||
| :::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 a Single Page Application (SPA) and needs to handle routing on the client side. |
There was a problem hiding this comment.
| 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 a Single Page Application (SPA) and needs to handle routing on the client side. | |
| If you follow the instructions above, Netlify CLI 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 a Single Page Application (SPA) and needs to handle routing on the client side. |
|
|
||
| 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. |
There was a problem hiding this comment.
| 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. | |
| We recommend deploying 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. |
unless it is indeed a general recommendation, for example by the Netlify team.
|
|
||
| Make sure you are logged in with the Cloudflare's CLI called Wrangler. You can log in by running: | ||
| ```bash | ||
| npx wrangler login |
There was a problem hiding this comment.
Is this assuming specific way of installing wrangler?
There was a problem hiding this comment.
This is using npx which can run commands directly without the user need to install anything first. https://docs.npmjs.com/cli/v11/commands/npx
| That is it! Your client should be live at `https://<app-name>.pages.dev`. | ||
|
|
||
| :::note | ||
| Make sure you set this URL as the `WASP_WEB_CLIENT_URL` environment variable in your server hosting environment. |
There was a problem hiding this comment.
Also, "this URL" -> would be great if we can make that more explicit, what it refers to.
| <summary>Example Github Action</summary> | ||
|
|
||
| ```yaml | ||
| name: Deploy Client to Netlify |
There was a problem hiding this comment.
A lot of stuff in this Github Action is not Netlify specific, but is GA or Wasp installation/setup specific. That part is then also duplciated between this part of docs and the one below for CloudFlare.
Can we extract this common part? I would extract it into "CI" section of docs, have this general setup there (how to get going with CI setup for Wasp), and then here we would provide just GA steps that are specific for Netlify or for CloudFlare.
There was a problem hiding this comment.
I think we can extract the common part into a custom Wasp Github Action that would install Node.js, install Wasp and build the app something like wasp-lang/build-action that users used instead of the couple of steps.
I think we can also talk about the general case of building the client in the CI but I would keep the full example here because it's a working example that user can copy paste from. I've added a TODO in the #2389 PR to talk about it.
I've decided to only tackle #2346 in this PR and update the Netlify deployment docs a bit (tested both).
I've also added some nice looking tags to make it more clear which providers are useful for which part of the deployment.
I'll handle #1982 in a separate PR after we merge some of the other docs to prevent big conflicts. In that future PR, I'll talk about the client side router and the need to forward all not-found requests to
index.html. It makes sense to talk about it both PaaS and self-hosted deployment methods - maybe even in the Intro bit - we'll see.Closes #2346