Skip to content

Latest commit

 

History

History
 
 

web

README.md

Bedrock Web

Directory Structure

  • package.json - Configure dependencies
  • webpack.config.js - Bundling and build configuration
  • .env - Enviroment variables
  • src/components - Home of reuseable components
  • src/utils - Home of specific JS helper utilities
  • src/index.html - Main entrypoint into App UI (Webpack injected)
  • serve/static.js - Static server
  • serve/dev.js - Static server for development
  • dist/* - Files generated by webpack, incuding index.html. These are the assets that should be HTTP served

Install Dependencies

Ensure Node.js version uniformity using Volta:

curl -sSLf https://get.volta.sh | bash

Install dependencies: (will install correct Node.js version)

yarn install

Run

The following command serves all HTML/JS/CSS and watches all changes to src/*.js

yarn start

UI is running at http://localhost:2200/

Configuration

All configuration is done using environment variables. The default values in .env can be overwritten using environment variables.

  • SERVER_HOST - Host to bind to, defaults to "0.0.0.0"
  • SERVER_PORT - Port to bind to, defaults to 2300
  • HTTP_BASIC_AUTH_PATH - Basic Auth: Path to protect
  • HTTP_BASIC_AUTH_USER - Basic Auth: Username
  • HTTP_BASIC_AUTH_PASS - Basic Auth: Password
  • ENV_NAME - Node environment development
  • APP_NAME - Default product name to be used in views
  • API_URL - URL for API defaults to http://localhost:2300
  • SENTRY_DSN - Sentry error monitoring credentials

All config vars are available in the serve/dev.js and serve/static.js server-side code. In the browser-side all variables are available as a global object window.__env_conf.

Frameworks Used

Other Features

  • Seamless pushState routing using React Router
  • Full login/signup flow with separate dashboard and homepage router
  • All CSS and assets served via Webpack/StyleLoader
  • Uses Semantic UI as a rich UI element base
  • Uses ES6 style React components
  • Code hotswapping
  • Static server

Lodash

When using Lodash always used named imports. This will allow tree-shaking to remove unneeded modules.

import { omit } from 'lodash';

API Documentation Portal

All API documentation is powered by Markdown. The API documentation can be curated in src/docs. The menu and order of the guides can be configured in src/screens/Docs/index.js.

Markdown has some extentions that allow you to pull in information via OpenAPI:

  • callHeading - A method for showing a method + path summary of the API call
  • callParams - A summary of the request body/query parameters
  • callResponse - A summary of the response body
  • callExamples - A list of examples on how to use the API call
  • callSummary - All of the above
  • objectSummary - Show attributes for a given rich object of name

For example, to generate a summary of API parameters for login, add this to the Markdown:

callParams({ method: 'POST', path: '/1/auth/login' });

Updating Styles

All base styles and Semantic UI componenets live under src/semantic. You can tweak and change styling of elements based on your projects needs.

With just a few tweaks you can tweak Bedrocks default styling to make it your own. Go to src/semantic/globals/site.variables file and update a few variables:

  • @primaryColor - Set projects primary accent color (default: green)
  • @pageBackground - Set page background (default: light sandy)
  • @mainMenuBackground - Set main menus background (default: sandy)
  • @linkColor - Set projects link color (default: dark green)

Semantic UI variables and components allow you to change styles to be the way you want them for your project. You can dive deeper into components documentation at React Semantic UI.