feat: add serverless example

examples/basic-serverless/README.md

@@ -0,0 +1,19 @@
+# Razzle Basic Example
+
+## How to use
+
+<!-- START install generated instructions please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
+
+```bash
+npx create-razzle-app --example basic basic
+
+cd basic
+yarn start
+```
+<!-- END install generated instructions please keep comment here to allow auto update -->
+
+
+## Idea behind the example
+This is a basic, bare-bones example of how to use razzle. It satisfies the entry points
+`src/index.js` for the server and and `src/client.js` for the browser.

examples/basic-serverless/gitignore

@@ -0,0 +1,10 @@
+logs
+*.log
+npm-debug.log*
+.DS_Store
+
+coverage
+node_modules
+build
+public/static
+.env.*.local

examples/basic-serverless/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "razzle-examples-basic-serverless",
+  "version": "4.2.12",
+  "license": "MIT",
+  "scripts": {
+    "start": "razzle start",
+    "build": "razzle build",
+    "test": "razzle test --env=jsdom",
+    "start:prod": "NODE_ENV=production node build/server.js"
+  },
+  "dependencies": {
+    "express": "^4.17.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "devDependencies": {
+    "razzle": "4.2.12",
+    "razzle-dev-utils": "4.2.12",
+    "mini-css-extract-plugin": "^0.9.0",
+    "html-webpack-plugin": "^4.5.2",
+    "webpack": "^4.44.1",
+    "babel-preset-razzle": "4.2.12",
+    "webpack-dev-server": "^3.11.2"
+  }
+}

examples/basic-serverless/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+

examples/basic-serverless/razzle.config.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = {
+  options: {
+    buildType: 'iso-serverless',
+  }
+};

examples/basic-serverless/sandbox.config.json

@@ -0,0 +1,5 @@
+{
+  "container": {
+    "port": 3000
+  }
+}

examples/basic-serverless/src/App.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Helvetica,
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol";
+}

examples/basic-serverless/src/App.js

@@ -0,0 +1,6 @@
+import './App.css';
+
+import React from 'react';
+const App = () => <div>Welcome to Razzle.</div>;
+
+export default App;

examples/basic-serverless/src/App.test.js

@@ -0,0 +1,10 @@
+import App from './App';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+describe('<App />', () => {
+  test('renders without exploding', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<App />, div);
+  });
+});

examples/basic-serverless/src/client.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { hydrate } from 'react-dom';
+import App from './App';
+
+hydrate(<App />, document.getElementById('root'));
+
+if (module.hot) {
+  module.hot.accept();
+}

examples/basic-serverless/src/index.js

@@ -0,0 +1,27 @@
+import express from 'express';
+
+let app = require('./server').default;
+
+if (module.hot) {
+  module.hot.accept('./server', function() {
+    console.log('🔁  HMR Reloading `./server`...');
+    try {
+      app = require('./server').default;
+    } catch (error) {
+      console.error(error);
+    }
+  });
+  console.info('✅  Server-side HMR Enabled!');
+}
+
+const port = process.env.PORT || 3000;
+
+export default express()
+  .use((req, res) => app.handle(req, res))
+  .listen(port, function(err) {
+    if (err) {
+      console.error(err);
+      return;
+    }
+    console.log(`> Started on port ${port}`);
+  });

examples/basic-serverless/src/server.js

@@ -0,0 +1,55 @@
+import App from './App';
+import React from 'react';
+import express from 'express';
+import { renderToString } from 'react-dom/server';
+
+const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
+
+const cssLinksFromAssets = (assets, entrypoint) => {
+  return assets[entrypoint] ? assets[entrypoint].css ?
+  assets[entrypoint].css.map(asset=>
+    `<link rel="stylesheet" href="${asset}">`
+  ).join('') : '' : '';
+};
+
+const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
+  return assets[entrypoint] ? assets[entrypoint].js ?
+  assets[entrypoint].js.map(asset=>
+    `<script src="${asset}"${extra}></script>`
+  ).join('') : '' : '';
+};
+
+export const renderApp = (req, res) => {
+  const markup = renderToString(<App />);
+
+  const html =
+    // prettier-ignore
+    `<!doctype html>
+  <html lang="">
+  <head>
+      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+      <meta charSet='utf-8' />
+      <title>Welcome to Razzle</title>
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      ${cssLinksFromAssets(assets, 'client')}
+  </head>
+  <body>
+      <div id="root">${markup}</div>
+      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
+  </body>
+</html>`;
+
+  return { html };
+};
+
+const server = express();
+
+server
+  .disable('x-powered-by')
+  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
+  .get('/*', (req, res) => {
+    const { html } = renderApp(req, res);
+    res.send(html);
+  });
+
+export default server;