Webpack configs to pre-compile ORY Sites designs

ory-sites, webpack
npm install @splish-me/ory-sites-design-webpack-configs@1.0.0



Build Status

Webpack configs to pre-compile ORY Sites designs for consumption in app. Handles stuff bundled in ORY Sites app as webpack externals and creates a bundle for client and server. Probably doesn't handle css correctly, yet.


In your design project:

  • Install @splish-me/ory-sites-design-webpack-configs and its peerDependencies
  • Add webpack.config.js:
const createConfigs = require('..');
// Depending on your project structure
const pathToEntry = './src/index.js'

module.exports = createConfigs(pathToEntry)
  • Add build script to package.json:
  "scripts": {
    "build": "webpack"

Note. Don't even think about minimizing the code with --production. If you do, ORY Sites takes even longer to parse the bundle.

  • yarn build creates dist/web.js and dist/node.js

In your ORY Sites project

  • Copy dist/web.js and dist/node.js to custom/design/
  • Change custom/design/index.js to
import ExecutionEnvironment from 'exenv';

// Import your styles (these aren't handled by the webpack configs atm)
import './index.css';

let design;

if (ExecutionEnvironment.canUseDOM) {
  design = require('./web').default;
} else {
  design = require('./node').default;

export default design;

For development, you could e.g. yarn link your design project and require it in your ORY Sites project.