Add client bundle

velvetkevorkian · Mar 27, 2020 · 1f328b7 · 1f328b7
1 parent 38b2015
commit 1f328b7
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/rollup.config.js b/rollup.config.js
@@ -8,5 +8,14 @@ export default [
       format: 'cjs',
     },
     plugins: [resolve()],
-  }
+  },
+  {
+    input: 'src/client.js',
+    output: {
+      file: 'build/client.js',
+      format: 'es',
+      name: 'client',
+    },
+    plugins: [resolve()],
+  },
 ]
diff --git a/src/client.js b/src/client.js
@@ -0,0 +1,4 @@
+import { hydrate } from 'preact'
+import PreactApp from './components/PreactApp'
+
+hydrate(PreactApp(), document.getElementById('root'))
diff --git a/src/server.js b/src/server.js
@@ -9,7 +9,9 @@ app.use(compression()) // use gzip for all requests
 
 const body = render(html`
   <h1>Hello from Preact</h1>
-  <${PreactApp} />
+  <div id="root">
+    <${PreactApp} />
+  </div>
 `)
 
 // some basic html to show
@@ -18,6 +20,7 @@ const layout =`
   <html>
     <body>
       ${body}
+      <script type="module" src="client.js" async></script>
     </body>
   </html>
 `
@@ -26,4 +29,10 @@ app.get('/', (request, response) => { // listen for requests to the root path
   response.send(layout) // send the HTML string
 })
 
+app.get('/client.js', (request, response) => {
+  response.sendFile('client.js', {
+    root: __dirname, // this will be the build folder
+  })
+})
+
 app.listen(3000) // listen for requests on port 3000