Installing Spark in an HTML Project

Setting Up Your Environment

This guide is Part 1 in a 3-Part series and will walk through setting up your Spark development environment. You can also check out Part 2 - Installation and Part 3 - Adding Components.

For instructions on setting up Spark in other environments, check out the guides for Angular and React development environments.

Before you begin, make sure you install Node Package Manager (npm). This is a tool that makes it easy to share and reuse JavaScript code and to update the JavaScript code you’re sharing.

Create the Folder Structure

First you’ll need to make a new directory for your project, open it and initialize npm. You can do that with these UNIX commands:

mkdir spark-html
cd spark-html
npm init

When prompted, accept the default settings for npm init. You can always edit these later.

You should now have a package.json file created. This will keep track of all the dependencies that your site needs to build and run.

Inside your spark-html folder, create a src folder and a dist folder.
In the src folder, create a file called index.js and copy this code into it:

function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello, Spark! Javascript is working!';
  return element;
}
document.body.appendChild(component());

In the dist folder, create a file called index.html and copy this code into it:

<html>
  <head>
      <title>Hello, Spark!</title>
  </head>
  <body>
    <script src="../src/index.js"></script>
  </body>
</html>

You should now have the initial files for your new site. The folder structure should look like this:

A dist folder containing index.html. A src folder containing index.js. A package.json in the root.

Open index.html in a web browser. You should see this:

Installing Webpack

Webpack is a tool that we’ll use to combine all the JavaScript needed to run Spark into one file.

To install Webpack, run this command:

npm install webpack webpack-cli --save-dev

The --save-dev flag indicates that these packages are required to compile your website, but are not necessary to run the site after compilation.

In your package.json file that you created in Step 2, look for the scripts section. This is a list of custom commands that npm can run against your package. Add a new one for building the site with Webpack:

"scripts": {
  "build": "webpack"
},

Webpack will combine all JavaScript dependencies into a single JavaScript file called main.js. This is the file that you want your site to use.

Change the line in index.html where you set up the <script>  tag to look like this:

<script src="main.js"></script>

Build your website by running this command:

npm run build

You should now see a main.js file in your dist directory containing minified JavaScript.

For more help setting up Webpack, check out the Webpack Getting Started Guide.

Installing Sass

Sass is a tool that processes and compiles CSS. You’ll need to use Sass to import Spark CSS from the npm package that you created in Step 2.

To install Sass, first run this command:

npm install node-sass sass-loader css-loader mini-css-extract-plugin --save-dev

In the root directory of your project, create a new file called webpack.config.js and paste this code into it:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'bundle.css'
    }),
  ],
};

Now let’s write some CSS to compile. Create a new file in src called style.scss and copy this CSS into it:

body {
  background-color: green;
}

At the top of index.js, add this reference to the uncompiled scss file:

import "./style.scss"

Now when Webpack compiles index.js, this import line will include your style file. It will be processed according to the rules we set up in the webpack config in the previous step.

Add this reference to your new compiled CSS in the <head> element of index.html:

<link rel="stylesheet" href="bundle.css"></link>

Now when you rebuild your site, you should see bundle.css in the dist folder and your website should include your style:

For more help setting up Sass, check out the Sass Getting Started Guide.

You did it!

You now have a development environment set up and ready to install Spark! Check out Part 2 - Installation.