You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> 💁 If you'd like ESLint to be set up for you, add `--eslint` to the command. _Note: this will use 150mb of disk space._
25
30
@@ -29,7 +34,7 @@ While it's best to use the quickstart method above, WMR caters to folks who want
29
34
30
35
There isn't really anything WMR-specific to set up - the steps here are essentially the what you would do to use a simple HTTP server.
31
36
32
-
1. First, install `wmr` using npm or yarn:
37
+
**1.** First, install `wmr` using npm or yarn:
33
38
34
39
```sh
35
40
npm i -D wmr
@@ -39,59 +44,62 @@ yarn add -D wmr
39
44
40
45
> 🔥 _You can also use `npx wmr` anywhere!_
41
46
42
-
2. Next you'll want to create an `index.html` file. You can use [this example](https://github.com/preactjs/wmr/blob/master/demo/public/index.html),
43
-
but there's nothing special here. To add scripts, make sure to include `type="module"`:
47
+
**2.** Next you'll want to create a `public/index.html` file. You can use [this example](https://github.com/preactjs/wmr/blob/master/demo/public/index.html), though there's really nothing special about this HTML file. Just make sure your scripts are ES Modules by including `type="module"`:
44
48
45
49
```html
46
50
<!DOCTYPE html>
47
51
<html>
48
-
<head>
49
-
<linkrel="stylesheet"href="/style.css">
50
-
</head>
51
-
<body>
52
-
<scripttype="module"src="/index.js"></script>
53
-
</body>
52
+
<head>
53
+
<linkrel="stylesheet"href="/style.css" />
54
+
</head>
55
+
<body>
56
+
<scripttype="module"src="/index.js"></script>
57
+
</body>
54
58
</html>
55
59
```
56
60
57
-
3. To test things out, create that `index.js` file and add a simple Preact component to it:
61
+
> 💁 **Why `public/`?** Keeping your code and assets in `public/` prevents files like `node_modules` and `package.json` from being accessed by browsers. It also helps separate your web-facing code from other things like build scripts and output files.
62
+
> WMR auto-detects your `public/` directory, or you can specify your own by passing `--public src` to any of the commands.
63
+
64
+
**3.** To test things out, create that `index.js` file and add a simple Preact component to it:
58
65
59
66
```js
60
67
import { render } from'preact';
61
68
62
69
functionApp() {
63
-
return<h1>Hello World!</h1>;
70
+
return<h1>Hello World!</h1>;
64
71
}
65
72
66
73
render(<App />, document.body);
67
74
```
68
75
69
-
4. Now we can add some scripts to our `package.json`. There's one for starting the dev server, another to create a production build. A third script serves that production build for easy local testing:
76
+
**4.** Now we can add some scripts to our `package.json`. There's one for starting the dev server, another to create a production build. A third script serves that production build for easy local testing:
70
77
71
78
```json
72
79
{
73
-
"scripts": {
74
-
"start": "wmr",
75
-
"build": "wmr build",
76
-
"serve": "wmr serve --http2"
77
-
}
80
+
"scripts": {
81
+
"start": "wmr",
82
+
"build": "wmr build",
83
+
"serve": "wmr serve --http2"
84
+
}
78
85
}
79
86
```
80
87
81
-
5. You're all set! As an extra step, if you want WMR to pre-render your application to static HTML when building for production, replace `render()` with [preact-iso](https://www.npmjs.com/package/preact-iso):
88
+
**5.** You're all set! As an extra step, if you'd like WMR to prerender your application to static HTML during production builds, replace `render()` with [preact-iso](https://www.npmjs.com/package/preact-iso):
82
89
83
90
```diff
84
91
-import { render } from 'preact';
85
92
+import hydrate from 'preact-iso/hydrate';
86
-
93
+
87
94
function App() {
88
95
return <h1>Hello World!</h1>;
89
96
}
90
-
97
+
91
98
-render(<App />, document.body);
92
99
+hydrate(<App />);
93
100
94
101
+export async function prerender(data) {
102
+
+ // we use dynamic import to prevent this from being loaded in the browser:
0 commit comments