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:
$ 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
.nvmrcfile in your project root with
6as the contents.
Now let's make a new site using spike's default template:
$ 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.
cd into your new project folder, and let's get a quick overview of the 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.
Next, there are a few dotfiles:
|For the EditorConfig plugin, which we strongly recommend to maintain style consistency.|
|You should know what this is|
|For those using nvm, a popular node version manager. It will ensure that you are using a node version that is compatible with spike.|
|If you chose to use travis when setting up your project, the |
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.
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.
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:
$ 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:
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!
Updated less than a minute ago