Building static sites happily with vitaminJS
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:
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:
And then you can run
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:
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 add .
git commit -m "Project setup"
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
git push heroku master
The build may take a few seconds, and you’re online!
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.