DEV Community

Angelo Verlain
Angelo Verlain

Posted on

Explosiv, static JSX site generator

#javascript #npm #react #jsx

Explosiv is a static site generator that consume JSX pages to generate a static HTML site.

Let's get started

1. Install it to your development dependencies. 

npm i explosiv -D
Enter fullscreen mode Exit fullscreen mode

2. Write your first page.

Explosiv allow you to build static sites written in JSX. To get going, create a file called pages/index.js:

// pages/index.js
export default () => (
  <main>
    <Head>
      <title>Home page</title>
    </Head>
    <h3>This is my home</h3>
    <p>On the internet obviously</p>
  </main>
)
Enter fullscreen mode Exit fullscreen mode

3. Build your static site! 

npx explosiv build
Enter fullscreen mode Exit fullscreen mode

Building your site will transform your JSX into static HTML. Your site will be exported into the out/ directory.

4. Serve your site! 

npx explosiv serve
Enter fullscreen mode Exit fullscreen mode

Your site will be ready at http://localhost:3000

Explosiv is so lightweight that the sample fully featured blog builds in just 3 seconds (that's not a typo) and it does this with no dependencies to React, React DOM, Babel or Webpack. 100% always Lighthouse scores.

Further reading

Explosiv and React

Sure if you have used React building a simple site, like a blog, you know that your site will be always be overloaded with stuff like: 1 minute Babel builds, Webpack making your simplest page 600kb, loading React, React-DOM, Webpack, a router and even the fs module on the client just to say Hello World.

Explosiv tries to be as lightweight as possible, so it is not a viable option for complex sites. NextJS will always be there for such scenarios.

Top comments (0)