Skip to content
This repository has been archived by the owner on Jul 19, 2020. It is now read-only.

add page describing how to add static assets #33

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

add page describing how to add static assets #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/SUMMARY.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@

## More

* [CSS](more/css.md)
* [Static Content](more/static.md)
* [Roadmap](more/roadmap.md)
* [Testing](more/testing.md)
* [External Libs](more/external-libs.md)
Expand Down
6 changes: 0 additions & 6 deletions src/more/css.md
View file
Open in desktop

This file was deleted.

42 changes: 42 additions & 0 deletions src/more/static.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
# Static Content

Static content in Yew is served from the `static` directory in your crate. For example, if you have a folder structure like:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is useful info, thanks for adding!

I think you're conflating Yew and cargo-web though. Yew doesn't do any serving or html generation. That's all cargo-web (or some other tool). Could you please clarify those points in this page?


```
myapp
├── src/
│ └── lib.rs
├── static/
│ └── script.js
├── Cargo.lock
└── Cargo.toml
```

## HTML

Yew compiles to a single-page application, with one JavaScript bundle that can be imported into an HTML page. Yew generates boilerplate HTML page out of the box, but you can create a custom one in `static/index.html` if you wish to override this.

Your application will be built at `/crate.js`. For example, for your custom HTML page that imports some CSS, you might have:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Awesome App!</title>
<!-- references /static/mystyles.css -->
<link rel="stylesheet" href="/mystyles.css">
</head>
<body>
<script src="/myapp.js"></script>
</body>
</html>
```

## CSS

A proposal for proper CSS support can be found here: [https://github.com/yewstack/yew/issues/533](https://github.com/yewstack/yew/issues/533).

For now, you can reference stylesheets be creating a custom `index.html` within the `static` directory.