Quick Start

Let's go zero to compile in a couple minutes, just to get through the basics. First, make sure that you have node.js installed and at or above v6.0.0, then install spike globally as such:

Shell

$ npm i spike -g

If you are having trouble due to a permission error, you might need to adjust your permissions, or how node installs global modules.

📘

Multiple Node Versions

If you need to juggle multiple node versions for projects on your machine, we recommend nvm. You can even just use node v6 for spike projects by placing a .nvmrc file in your project root with 6 as the contents.

Now let's make a new site using spike's default template:

Shell

$ spike new test-project

Spike will now load up the default template, then ask you a couple of questions. It will then create the template for you and install the dependencies.

📘

Note: installing dependencies might take a minute or two, npm is just slow, unfortunately. Feel free to go grab a glass of water or coffee while you wait.

Done? Awesome. cd into your new project folder, and let's get a quick overview of the structure.

Project Structure

First, note that this template is in no way set in stone. Spike can be configured to use a variety of different starter templates based on your preferences, we'll cover this in depth later. Template generation is handled through Sprout, another open source project that has been functional and stable for years. And this default template is also open source, it can be found here.

Now let's take a look at these files. First, you'll notice a package.json file. This is a node.js project, and you can install dependencies through npm directly. This file should be configured according to some of the questions you answered when creating the template.

Of course, we have a readme.md as well, which you should fill in soon.

Dotfiles

Next, there are a few dotfiles:

File	Description
.editorconfig	For the EditorConfig plugin, which we strongly recommend to maintain style consistency.
.gitignore	You should know what this is
.nvmrc	For those using nvm, a popular node version manager. It will ensure that you are using a node version that is compatible with spike.
.travis.yml (optional)	If you chose to use travis when setting up your project, the .travis.yml file will provide settings. Note that you will still need to go to http://travis-ci.org and set up the repo.

App.js

Finally, we have app.js. These are our primary configuration files, so let's open up app.js and take a look. Luckily, it's a pretty slim configuration file, just configures which extensions we're using, and some plugins for reshape, postcss, and babel, as well as some patterns of files to ignore. You can do a lot more with this file if you want, see the app.js docs for more info.

If you chose to add production settings when creating your project, there will also be an app.production.js file. This file is very similar, just contains a couple differences for optimizing and minifying your output. See the environments docs for more details on configuring for other environments like production.

Dump Dirs

The views and assets folders contain pretty much what you'd expect -- your html, js, css, and image source files. These directories are special "dump dirs" which means any files you put into these, will be dumped into public/* as opposed to public/(views|assets). This is a convenience feature which lets you organize your project a bit better, instead of having everything stuck in your project's root.

Test Files

And finally, we have a test folder, which contains a simple test to ensure that your site compiles without error.

Not so bad, right? Let's get to compiling!

Watch & Compile

Time for some action. From your command line, run:

Shell

$ spike watch

After a moment, your site will compile and open up in your browser. Nice! If you head over to views/index.sgr, and make any change, you'll see that the site will live reload for you, thanks to Browsersync. You'll also see an "external url" in your command line output, you can go to this url from any device to test your site. It will still live reload whenever you change anything. If you don't believe me, take out your phone and give it a shot.

If you want to just compile the site once, and not watch or open the browser, you can run:

Shell

spike compile

You can also see the output in the public folder, where all your static files live. That's all there is to it! To further customize how spike works, try adding or removing some reshape, postcss, babel, and/or webpack plugins, and check out the app.js docs!