Skip to Main Content

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.

Part 1: Setting up Your Environment for an HTML Project

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.

Our starter app examples are also available for reference:

Create the Folder Structure

  1. First you’ll need to make a new directory for your project, open it and initialize npm.
mkdir spark-html
cd spark-html
npm init
  1. When prompted, accept the default settings for npm init. You can always edit these later.
  • Confirm that it's generated a package.json. This file keeps track of all the dependencies that your site needs to build and run.

  1. Inside your spark-html folder, create a src folder and a dist folder.

  2. In the src folder, create a file called index.js and and add this code:

  • A function that creates a div with text inside.
  • Code that will add that div onto the page.
function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello, Spark! JavaScript is working!';
  return element;
}
document.body.appendChild(component());

We do this because it's a way to check if we've hooked up our JavaScript correctly.

  1. In the dist folder, create a file called index.html that will reference that index.js file inside the <body> tag.
<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.
  1. Open index.html in a web browser. You should whatever text you set in your index.js file.
Hello Spark!

Installing Webpack

Webpack combines all the JavaScript needed to run Spark into one file.
  1. 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.

  1. In your package.json file, look for the scripts section. This is a list of custom commands that npm can run. Add a new command for building the site with Webpack:
"scripts": {
  "build": "webpack --mode='development'"
},

Webpack will combine all JavaScript into a single file called main.js, so we'll need to reference that instead of index.js.

The --mode='development' flag is so Webpack knows what configuration to build with. Change this as needed for your project.

  1. In index.html change the <script> that's using index.js to main.js.
<script src="main.js"></script>
  1. Build your website.
npm run build

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

Minified JSON in main.js

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 it to use Spark.
  1. To install Sass, first run this command:
npm install node-sass sass-loader css-loader mini-css-extract-plugin --save-dev
  1. 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'
    }),
  ],
};
  1. 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;
}
  1. At the top of index.js, add this reference to the 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.

  1. 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:

Hello Spark on a green a background.

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

Next Steps

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