Building static sites happily with vitaminJS

A couple years ago, I got a common case of Javascript fatigue and pretty much gave up on front-end development to focus on back-end work. Today, as the dust is starting to settle in the JS world, React and its ecosystem are emerging as solid choices. And I’m getting excited about front-end development again.

The main point that kept me from jumping back in until now was the complexity of properly setting up a new JS project: before you can start hacking with a modern stack, you need to set up webpack, babel, figure out how to get livereload while you develop, etc… It’s a painful process when you just want to build a small site, so I’ve often resorted to using more old school solutions like Jekyll.

During 2016, a couple of “build frameworks” have emerged to solve this problem, with Create-React-App being the most popular one. However, Create-React-App doesn’t seem have support for some features such as server-side rendering or hot module reload.

Luckily, a new alternative just emerged: vitaminjs, which is built and used in production by the folks from Evaneos. I’ve been using it to build a small site for a side projet of mine, and so far the experience has been delightful.

The following is a short guide on getting started building a static site with vitaminjs. It assumes you have some cursory knowledge of React, and npm installed.

Step 1 : The setup

This is the part that vitamin makes easy. 😉 Start by installing vitaminjs:

npm install -g vitaminjs-cli

and create your new project:

mkdir my-static-site
cd my-static-site
vitaminjs new

A prompt will take you through some common questions (module name, public or private package, etc…), and create an example app to get started.

Your project will look something like this:

.
├── node_modules/
├── package.json
└── src
├── Counter.jsx
├── Index.jsx
├── logo.png
├── reducers.js
├── routes.js
└── style.css

And then you can run

vitaminjs start

And voilà! Your site will be running at localhost:3000.

Now, you can check out the Hot module reloading by tweaking the Index.jsx, and watching your page updating in real time.

Step 2 : Adding a page

Let’s add a second page to our site, create the file src/About.jsx , and edit its content as follows:

This file defines a new React component, which we are going to use in our router.

Vitaminjs uses React-router, which essentially maps paths to components. You can add the new route by editing your src/routes.js like so:

And now go check out localhost:3000/about . Easy as pie.

Step 3 : Adding a layout

Now that we have two pages, it would be a good time to introduce a reusable layout for things like navigation. Being used to Rails layouts, this step was a bit tricky for me at first. The way we’re going to do this here is by defining a new Layout component, and nesting our pages inside of this component.

First, let’s create src/Layout.jsx with this content:

The Link component allows you to use client-side routing, so that the page will change without hitting the server when the link is clicked.

Now let’s modify our About page to use the layout:

The only difference here being that we’re importing the Layout component, and using it in the template.

You can do a similar update on the index page to use the layout (don’t forget to remove the Helmet component in the index).

Step 5 : Deploying to heroku

Alright! Our little site is now good enough to go into production. Now would be a good time to create a small .gitignore file with just this content:

And then the usual steps:

git init
git add .
git commit -m "Project setup"
heroku create

Before pushing to heroku, you will need to set the buildpack, which is going to build and run the application.

heroku buildpacks:set https://github.com/victormours/heroku-buildpack-vitaminjs

And then

git push heroku master
heroku open

The build may take a few seconds, and you’re online!

Final thoughts

There’s a lot more that could be said about using vitaminjs (we haven’t talked about styling yet), but I hope this shows you how you can easily set up a project, and get started hacking. Although I’ve introduced this project as a static site, it is ready to become a full featured SPA with just some more code, but this is a story for an other time.

If you’re too lazy to copy paste all the gists from this article, you can just fork the repo I’ve made from this tutorial, and start hacking away.

Happy coding!

Show your support

Clapping shows how much you appreciated Victor Mours’s story.