With sequelize example

examples/with-sequelize/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["razzle/babel"]
+}

examples/with-sequelize/.gitignore

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

examples/with-sequelize/.sequelizerc

@@ -0,0 +1,8 @@
+const path = require('path');
+
+module.exports = {
+  'config': path.resolve('src/sequelize', 'dbConfig.js'),
+  'models-path': path.resolve('src/sequelize', 'models'),
+  'seeders-path': path.resolve('src/sequelize', 'seed'),
+  'migrations-path': path.resolve('src/sequelize', 'migrations')
+}

examples/with-sequelize/README.md

@@ -0,0 +1,73 @@
+# Razzle Sequelize Example
+
+## How to use
+
+Download the example [or clone the whole project](https://github.com/jaredpalmer/razzle.git):
+
+```bash
+curl https://codeload.github.com/jaredpalmer/razzle/tar.gz/master | tar -xz --strip=2 razzle-master/examples/with-sequelize
+cd with-sequelize
+```
+
+### Database server
+
+Use one of the following options:
+
+#### Using an existing database server
+
+Create the following `.env` file
+
+```
+RAZZLE_RUNTIME_DB_HOST=localhost
+RAZZLE_RUNTIME_DB_PORT=3306
+RAZZLE_RUNTIME_DB_USER=root
+RAZZLE_RUNTIME_DB_PW=
+RAZZLE_RUNTIME_DB_SCHEMA=razzle
+RAZZLE_RUNTIME_DB_TZ=Etc/UTC
+RAZZLE_RUNTIME_DB_DIALECT=mysql
+```
+
+Use the appropriate settings depending on your favourite database. See the `sequelize` documentation for the supported dialects, ports, timezone and other settings.
+
+Run
+
+```
+yarn install
+yarn database:create
+yarn start
+```
+
+#### Using docker
+
+The example comes with a mysql `docker` container to bootstrap a database server. For this to work you should have `docker` installed.
+
+By default, it runs on port `3307` and you don't have to create a `.env` file unless you want different defaults than the ones below.
+
+Keep in mind that you can only change `RAZZLE_RUNTIME_SCHEMA` without having to make a change to the docker container configuration in `src/server/sequelize`.
+
+```bash
+yarn install
+yarn database:start
+yarn database:create
+yarn start
+```
+
+#### Changing .env defaults
+
+Additional customization can be achieved with the following `.env` values
+
+```
+RAZZLE_RUNTIME_DB_HOST=localhost
+RAZZLE_RUNTIME_DB_PORT=3307
+RAZZLE_RUNTIME_DB_USER=root
+RAZZLE_RUNTIME_DB_PW=
+RAZZLE_RUNTIME_DB_SCHEMA=razzle
+RAZZLE_RUNTIME_DB_TZ=Etc/UTC
+RAZZLE_RUNTIME_DB_DIALECT=mysql
+```
+
+## Idea behind the example
+
+This is a basic, bare-bones example of how to use razzle with sequelize. It creates a single database table based on a single model object and seeds a record.
+
+For more information about implementing `sequelize`: http://www.sequelizejs.com/

examples/with-sequelize/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "razzle-examples-with-sequelize",
+  "version": "3.0.0-alpha.2",
+  "license": "MIT",
+  "scripts": {
+    "start": "razzle start",
+    "build": "razzle build",
+    "test": "razzle test --env=jsdom",
+    "start:prod": "NODE_ENV=production node build/server.js",
+    "database:start": "cd ./src/sequelize && docker-compose up -d",
+    "database:create": "node_modules/.bin/sequelize db:create"
+  },
+  "dependencies": {
+    "express": "^4.15.2",
+    "mysql2": "^1.6.4",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "sequelize": "^4.42.0",
+    "sequelize-cli": "^5.4.0"
+  },
+  "devDependencies": {
+    "razzle": "^3.0.0-alpha.2"
+  }
+}

examples/with-sequelize/public/robots.txt

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

examples/with-sequelize/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/with-sequelize/src/App.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import Home from './Home';
+import './App.css';
+
+const App = () => <Home />;
+
+export default App;

examples/with-sequelize/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/with-sequelize/src/Home.css

@@ -0,0 +1,37 @@
+.Home {
+  text-align: center;
+}
+
+.Home-logo {
+  animation: Home-logo-spin infinite 20s linear;
+  height: 80px;
+}
+
+.Home-header {
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white;
+}
+
+.Home-intro {
+  font-size: large;
+}
+
+.Home-resources {
+  list-style: none;
+}
+
+.Home-resources > li {
+  display: inline-block;
+  padding: 1rem;
+}
+
+@keyframes Home-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

examples/with-sequelize/src/Home.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import logo from './react.svg';
+import './Home.css';
+
+class Home extends React.Component {
+  state = {
+    users: null,
+  };
+
+  componentDidMount() {
+    fetch('/rest/users', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+      .then(res => res.json())
+      .then(users => {
+        this.setState({
+          users,
+        });
+      })
+      .catch(err => {
+        throw err;
+      });
+  }
+
+  render() {
+    const { users } = this.state;
+    return (
+      <div className="Home">
+        <div className="Home-header">
+          <img src={logo} className="Home-logo" alt="logo" />
+          <h2>Welcome to Razzle</h2>
+        </div>
+        <p className="Home-intro">
+          To get started, edit <code>src/App.js</code> or{' '}
+          <code>src/Home.js</code> and save to reload.
+        </p>
+        <ul className="Home-resources">
+          <li>
+            <a href="https://github.com/jaredpalmer/razzle">Docs</a>
+          </li>
+          <li>
+            <a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
+          </li>
+          <li>
+            <a href="https://palmer.chat">Community Slack</a>
+          </li>
+        </ul>
+        <h3>Users</h3>
+        {users &&
+          users.map(({ id, username, email }) => (
+            <div key={id}>
+              {username} - {email}
+            </div>
+          ))}
+      </div>
+    );
+  }
+}
+
+export default Home;

examples/with-sequelize/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/with-sequelize/src/index.js

@@ -0,0 +1,34 @@
+const serverImport = require('./server');
+
+let server = serverImport.default;
+let app = serverImport.app;
+let preStart = serverImport.preStart;
+
+let currentApp = app;
+
+preStart(() => {
+  server.listen(process.env.PORT || 3000, error => {
+    if (error) {
+      console.log(error);
+    }
+
+    console.log('🚀 started');
+  });
+});
+
+if (module.hot) {
+  console.log('✅  Server-side HMR Enabled!');
+
+  module.hot.accept('./server', () => {
+    console.log('🔁  HMR Reloading `./server`...');
+
+    try {
+      let app = require('./server').app;
+      server.removeListener('request', currentApp);
+      server.on('request', app);
+      currentApp = app;
+    } catch (error) {
+      console.error(error);
+    }
+  });
+}

examples/with-sequelize/src/sequelize/dbConfig.js

@@ -0,0 +1,36 @@
+/* eslint-disable */
+const Sequelize = require('sequelize');
+// We use require here to allow sequelize-cli to parse this file without babel transformation.
+
+const defaultConfig = {
+  host: process.env.RAZZLE_RUNTIME_DB_HOST || 'localhost',
+  // use 3307 as default to avoid existing mysql installations
+  port: process.env.RAZZLE_RUNTIME_DB_PORT || 3307,
+  username: process.env.RAZZLE_RUNTIME_DB_USER || 'root',
+  password: process.env.RAZZLE_RUNTIME_DB_PW || '',
+  database: process.env.RAZZLE_RUNTIME_DB_SCHEMA || 'razzle',
+  timezone: process.env.RAZZLE_RUNTIME_DB_TZ || 'Etc/UTC',
+  logging: console.log,
+  dialect: process.env.RAZZLE_RUNTIME_DB_DIALECT || 'mysql',
+  // This ensures that decimals are not converted to strings, but precision may be lost
+  dialectOptions: { decimalNumbers: true, charset: 'utf8_general_ci' },
+  define: {
+    charset: 'utf8',
+  },
+  pool: {
+    max: 5,
+    min: 0,
+    idle: 10000,
+  },
+  operatorsAliases: Sequelize.Op,
+};
+
+const db = {
+  development: defaultConfig,
+  test: Object.assign({}, defaultConfig, {
+    database: `${defaultConfig.database}_test`,
+  }),
+  production: defaultConfig,
+};
+
+module.exports = db;

examples/with-sequelize/src/sequelize/docker-compose.yml

@@ -0,0 +1,18 @@
+version: '3.2'
+
+# Port is mapped to 3307 for machine access, but on the internal network it's still listening on 3306
+services:
+  mysql:
+    image: mysql:5.7
+    ports:
+      - '3307:3306'
+    volumes:
+      - type: volume
+        source: mysql57razzle
+        target: /var/lib/mysql
+    container_name: razzle_mysql
+    environment:
+      - MYSQL_ALLOW_EMPTY_PASSWORD="true"
+
+volumes:
+  mysql57razzle: