mirror of https://github.com/yewstack/yew
Add deployment section in docs (#2569)
* Add deployment section in docs * ignore non-rust code block * Apply suggestions from code review Co-authored-by: WorldSEnder <WorldSEnder@users.noreply.github.com> Co-authored-by: WorldSEnder <WorldSEnder@users.noreply.github.com>
This commit is contained in:
parent
e46ae55cab
commit
b433074ef5
|
@ -0,0 +1,44 @@
|
|||
---
|
||||
title: "Deployment"
|
||||
description: "Deploying Yew applications"
|
||||
---
|
||||
|
||||
When you are ready to deploy your Yew application to a server, you have various options for deployment.
|
||||
|
||||
`trunk build --release` builds your app in release mode. Set up your HTTP server so that it serves `index.html` whenever your site is visited, and requests to static paths like `index_<hash>.js` and `index_bg_<hash>.wasm` are served with the contents of their respective contents from the dist directory generated by trunk.
|
||||
|
||||
:::important A note about `trunk serve --release`
|
||||
Do **not** use `trunk serve --release` to serve your application in production.
|
||||
It should only be used for testing the release build during development
|
||||
:::
|
||||
|
||||
## Server configuration
|
||||
|
||||
### Serving `index.html` as fallback
|
||||
|
||||
If the application uses the [Yew router](../../router), you must configure the server to return the `index.html` when asked for a file that it does not have.
|
||||
|
||||
An application with Yew router is built as a [Single Page Application (SPA)](https://developer.mozilla.org/en-US/docs/Glossary/SPA). When the user navigates to a URL from within a running client, the router interprets the URL and routes to that page.
|
||||
|
||||
But on a fresh load, such as when navigating to the page by entering it in the address bar or refreshing the page, all of these actions are handled by the browser itself, outside the running application. The browser makes a direct request to the server for that URL, bypassing the router. A wrongly configured server would return with status 404 - Not Found.
|
||||
|
||||
By returning `index.html` instead, the app loads as it normally would as if request was for `/`, until the router notices that the the route is `/show/42` and displays the appropriate contents.
|
||||
|
||||
### Configuring correct MIME-type for Web Assembly asset.
|
||||
|
||||
The WASM files must be served with the [Content-Type header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type) set to `application/wasm` MIME-type.
|
||||
|
||||
Most servers and hosting services already do this by default. If yours doesn't, consult its documentation. An incorrect MIME-type will, in most web browsers, result in an error similar to the following:
|
||||
```ignore
|
||||
`WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:
|
||||
TypeError: WebAssembly: Response has unsupported MIME type 'text/plain' expected 'application/wasm'
|
||||
```
|
||||
|
||||
## Building for Relative Paths
|
||||
|
||||
By default, trunk will assume that your site is being served at `/` and build the site accordingly. This behavior can be overridden by adding `<base data-trunk-public-url />` to the `index.html` file. Trunk rewrites this tag to contain the value passed to `--public-url`. Yew router automatically detects the presence of `<base />` and handles it appropriately.
|
||||
|
||||
## Customizing behavior using environment variables
|
||||
|
||||
It's common to customize the build environment by using environment variables. Since the app is run in browser, we can't read the environment variables at runtime.
|
||||
The [`std::env!`](https://doc.rust-lang.org/std/macro.env.html) macro can be used to obtain a value of an environment variables at compile time.
|
|
@ -146,7 +146,7 @@ module.exports = {
|
|||
type: "generated-index",
|
||||
title: "Miscellaneous",
|
||||
},
|
||||
items: ["more/debugging", "more/css", "more/testing", "more/roadmap"],
|
||||
items: ["more/debugging", "more/deployment", "more/css", "more/testing", "more/roadmap"],
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
|
|
Loading…
Reference in New Issue