From prototype to production

Bedrock is intended as a prototyping tool. The choices made were made so that we can quickly build interfaces and large prototypes. We specifically use the best templating language out there and we provide systems to build component styleguides in a fast manner.

However, Bedrock can also be used to build a final website or web app. Through a configuration file you can set up specific flags for production to compress CSS and JS. You can choose to enable or disable the prototype-specific features depending on your use cases (page tree and styleguide)

When moving from prototype to production, there are a few things to note.

The basic conversion logic

Let’s say that you want to convert a Bedrock prototype to another development environment. The easiest way to do this is to:

• Copy paste the HTML output from the pages and translate to templating logic in the other codebase
• Depending on pageTree.layoutstyle config
  • sidebar: The main template is wrapped in a br-prototype-wrapper which should be removed. This is to make the page tree work. Take the contents of br-prototype-content and make this your “root” div in the actual implementation.
  • Alternatively, change the settings to fixed to get rid of the markup, or even set the entire pageTree object to false to not render it at all
• Sync the SCSS files, and re-build the SCSS pipeline in your dev environment (i.e. integrate into Rails asset pipeline, create a Webpack logic for React context etc.)
• Copy JS and refactor for framework context where appropriate (for js details see Adding Javascript)

Styleguide and component conversion

You could use the components in the styleguide as a base to work with projects like StoryBook or Styleguidist.

Bedrock components can be written as pure Pug (and thus render as pure HTML), but sometimes rely on Pug mixins to provide a way to encapsulate logic and attributes without tying the code to a specific JS framework or backend environment.

See this blog post for more details.

Minification

Bedrock provides some flags to minify CSS and JS, see configuration.

File and build details

When you run Bedrock using npm start (i.e. in development mode) you will see that files get written to a folder called tmp. This is useful to inspect the output while developing. For example you can inspect how large your JS bundle is getting.

When you run npm run build, a full static site gets generated. In the dist folder you will find files you can deploy as a static website.

In the folder you will see a file called bundle-protoype.js. This is code needed to run the prototype, for example the Javascript for the page tree and for syntax highlighting of code blocks.

It is unnecessary to load this file when moving the prototype code to another dev environment (e.g. a JS view framework like Vue; a PHP environment, etc.). You can delete this file in this case.

We recommend deleting it as well as deleting prototype.css.