Blaze is a site generator CLI for single-page applications developed with lit-element - as well as build tool for traditional static websites. Blaze comes bundled with its own flavor of Mdx that integrates native web-components and lit-element syntax directly into a Markdown file. Blaze's goal is to abstract away the tedious build steps, enable you to quickly iterate on static content, and bind the result into a lean front-end app.
Blaze comes bundled with 3 simple commands: init, build, serve.
The init command will set a directory as a blaze project, configure the project folder structure, and add create a default blaze.json. Depending on the type of project (static or single-page), the project structure will be configured differently - the main difference being that single-page projects include an install step for Javascript libraries.
staticis similar to a jekyll projectsingle-pageis similar to a create-react-app project
# Bash command arguments
$ blaze init --type={ static, single-page } [directory]
# Examples:
# make current directory a `static` blaze application - blaze defaults `--type=static`
$ blaze init
# make the `Desktop/personal-site/` directory a lit-element single-page app
$ blaze init --type=single-page Desktop/personal-site/The build command will simply compile all the .mdx files in your project. If you are working on a static website, this step will output .html files. If you are working on single-page app, this step will output a JSON file that will be asynchronously imported as a route.
The build command doesn't take in any parameters, but must be run from within your blaze project. Blaze will know if it's inside your project by recrusvely checking for a blaze.json file. The blaze.json is considered to be the root of your Blaze project.
user@~/Code/blaze-project $ blaze buildThe serve command will take the built version of your project and run it locally. If you are working on a static project, this step will run a dev HTTP web server. If you are working on a single-page app, this will run a webpack-dev-server and listen for when local files change.
Similar to the build command, the serve command must be run somewhere within your Blaze project directory. Blaze treats the location of the blaze.json as the root of your project.
user@~/Code/blaze-project $ blaze serveYou can modify many of your Blaze project's settings to your liking. These are the current settings you can update inside your blaze.json
| Variable | Description |
|---|---|
entries |
The directory that stores your .mdx files |
views |
The directory blaze build will output your compiled markdown |
port |
The port your dev server will run on |
project |
The project type either static or single-page |
Depeding on the type of application this will be the project structure:
.
├── blaze.json
├── entries
│ └── index.mdx
├── index.html
└── static
├── css
├── images
├── js
└── views
.
├── _redirects
├── blaze.json
├── entries
│ └── index.mdx
├── node_modules
│ ├── lit-element
│ └── ... other random JS dependencies ...
├── package-lock.json
├── package.json
├── src
│ ├── components
│ ├── index.html
│ ├── index.js
│ ├── routes.js
│ ├── styles
│ └── views
└── webpack.config.js