Build Your Loop

Once you have your Loop created (even if it is just the sample code), you will need to build the Loop out -- here are some steps to help.

Environment

Install Node.js, or install/use a version manager like NVM. (We recommend using the current LTS version (at the time of writing, that is some flavor of v14).

Open PowerShell or a Terminal (or any other prompt of choice). Double check your installation of Node.js by typing:

node -v

If the command returns a version, Node.js is properly working. Next, you will need to install npm. Run the following:

npm install -g npm

To check your installation run:

npm -v

If the command returns a version, npm is properly installed, and you are ready to move on.

Building the Loop

Manual Builds

Navigate to your Loop directory within the open prompt:

cd $PROJECT_LOCATION

In order for your Loop to work correctly, you now need to install its dependencies:

npm install

Let the installer finish -- this may take several minutes. Next, you will need to build your project:

npm run build

This command will be used often -- to save time, push the up arrow while in your prompt to see and use previous commands.

This will create a loop.js file in the dist folder of your project. This is the main file needed to use your Loop locally.

Every time your code changes, you will need to rebuild your Loop. You will then need to restart it from the Loop Library.

Automatic Builds

It might be beneficial or easier if your loop.js file were automatically built any time you save changes to your Loop's code. The main situation for this is to be used in tandem with Live Reloading.

Our suggested option for building the loop.js file automatically is to use a specific Webpack "watch" command. An alternative, which we won't dive into, is using Nodemon.

In order to do this, you need to add a new item to the "scripts" section in your Loop's package.json. An example of what the new script could look like is this:

{
  ...
  "scripts": {
    ...
    "dev": "webpack --watch",
    ...
  },
  ...
}  

Moving forward, you could run the following command (rather than npm run build):

npm run dev

At this point, any time you save a file in your Loop project, Webpack will automatically detect it and rebuild the loop.js file.