VOLTA

gistfile1.txt

Volta In Action

Let's take Volta for a spin. First, create a brand new React application with Create React App.

    The full code for this lesson is contained in a GitHub repo here.

Run the following command from a terminal.


              
 
                  

npx create-react-app volta-sample-app

Once you've got your new React app created, open up the code in an IDE, and start it up via the command line.


              
 
                  

npm run start

If everything goes according to plan, you'll see a rotating React logo when you open up a browser at http://localhost:3000.

Now that we've got an app, let's add Volta to it.

Download Volta Locally

To install Volta, run the following command:


              
 
                  

curl https://get.volta.sh | bash

If you've got Windows, download and run the Windows installer and follow the instructions.

Define Your Environment Variables

Before we add our Volta-specific Node and npm versions to our project, let's see what the default environment variables are.

Get A Baseline Reading

In a terminal at the root of your project, run the following command.


              
 
                  

node -v && npm -v

For me, my default versions of Node and npm are v14.18.1 and v6.14.15, respectively.

With our baseline established, we can switch up our versions just for this project with Volta's help.

Pin A Node Version

We'll start with Node. Since v16 is the current version of Node, let's add that to our project.

In our project at the root level where our package.json file lives, run the following command.


              
 
                  

volta pin node@16

Using volta pin [JS_TOOL]@[VERSION] will put this particular JavaScript tool at our specified version into our app's package.json. After committing this to our repo with git, any future devs using Volta to manage dependencies will be able to read this out of the repo and use the exact same version.

With Volta we can be as specific or generic as want defining versions, and Volta will fill in any gaps. I specified the major Node version I wanted (16) and then Volta filled in the minor and patch versions for me.

After pinning, you'll see the following success message in your terminal: pinned node@16.11.1 in package.json.

    Tip: Make your pinned Node version match your build server's Node version

Pin An npm Version

Now let's tackle our npm version. Still in the root of our project in the terminal, run this command:


              
 
                  

volta pin npm

With no version specified, Volta defaults to choosing the latest LTS release to add to our project.

The current LTS version for npm is 8, so now our project's been given npm v8.1.0 as its default version.

Check Your package.json

To confirm the new JavaScript environment versions are part of our project, check the app's package.json file.

Scroll down to the bottom and you should see a new property named "volta". Inside the "volta" property should be a "node": "16.11.1" and an "npm": "8.1.0" version.

From now on, any dev who has Volta installed on their machine and pulls down this repo will have their settings for these tools automatically switch to use these particular node and npm versions.

To make doubly sure, you can also re-run the first command we did before pinning our versions with Volta to see what our current development environment is now set to.


              
 
                  

node -v && npm -v

After this, your terminal should tell you it's using those same versions: Node.js v16 and npm v8.
Watch The Magic Happen

Now, you can sit back and let Volta handle things for you.

If you want to see what happens when there's nothing specified for Volta, try navigating up a level from your project's root and checking your Node and npm versions again.

Let's open two terminals side by side: the first one inside our project with Volta versions, the other a level higher in our folder structure.

Now run the following command in both:


              
 
                  

node -v && npm -v

And in our project, Node v16 and npm v8 are running, but outside of the project, Node v14 and npm v6 are present. We did nothing but switch directories and Volta took care of the rest.

Using Volta, we take the guesswork out of our JavaScript environment variables, and actually make it harder for a member of the dev team to use the wrong versions than the right ones.

Till next time.

-- Nate