How to install Cygwin, Node.js, npm and Webpack for Windows 7
About me
Hi, my name is Lander. I’m a freelance software engineer and product builder from Belgium. When I’m not dabbling in Javascript, I’m working on TeamHut, a SaaS to help freelancers and digital teams organise & share their digital content.
What you’ll achieve after this guide
After this guide you’ll be able to use npm, Node.js and Webpack in a Windows environment. Although there are some shortcomings and I personally prefer developing in an OSX environment, this guide is there to help those who might be bound to it due to legacy, policy, etc.
Introduction
We’ve all heard the tall tales about Javascript development being near to impossible in a Windows environment. Although not the easiest, there’s definitely more possible than one would imagine.
Inspired by one of the greatest mentors known to Hollywood, I set out to investigate.
Let’s get started
Head over to the Cygwin installation page and download your desired flavour.
I’m using the 64 bit .exe installer for installation on my Windows 7 Ultimate SP1 machine.
Run the downloaded installer and install Cygwin into your preferred destination. I chose C:\Program Files\cygwin.
Start Cygwin when it’s finished installing. You should see a new Cygwin terminal prompt:
Note:
There are different ways to install Cygwin, such as using Chocolatey, the apt-get for Windows. Although I’m very enthousiastic about package managers, I chose not to include it for brevity’s sake.
Next up
You’ve made it this far! Head over the Node.js website and download the latest x64 LTS build. At the time of writing that’s the node-v4.4.4-x64.msi build. If you have no idea what I’m talking about, just download the recommended distribution and act as if nothing happened.
Run the Node.js msi installer you just downloaded and install it to the default location. That’s C:\Program Files\nodejs.
Note:
If you installed the x86 build, your installation path should be
C:\Program Files (x86)\nodejsEDIT:
I would advise against installing Cygwin to a path that contains spaces, as this might induce problems later. As this is just an example, I’ll leave it like so.
After the installation completed successfully, head over to your computer’s Control Panel. Open System and Security and drill down to System.
You can also access this screen by right-clicking on your Computer desktop icon and clicking Properties. This is what the screen looks like:
Press Advanced system settings — Environment Variables and click New under System Variables.
You should see a small prompt like so:
Next to Variable name enter NODE_PATH.
In the Variable value textfield enter %AppData%\npm\node_modules.
If you entered the correct values your prompt should look like this:
Press OK three times to exit back to the Control Panel. Reboot your computer.
Note:
I know the Node.js msi installer has an option ‘Add to path’, which I selected when installing Node. I still had to add it manually for it to work.
After reboot, start Cygwin and type node -v. You should see the Cygwin terminal print out v4.4.4 or something similar, depending on your installed version.
This means Node.js was installed successfully! Congratulations!
It’s getting real
One thing I’ve discovered is that the npm installer that comes bundled with Node.js v4.4.4 doesn’t always work out-of-the-box.
When running npm -v in your Cygwin console, it throws an error:
Unexpected token ILLEGAL
If you’re encountering this issue running npm -v, try downloading the latest npm distribution from the Node.js website. After downloading, extract the zip file into your previously installed C:\Program Files\nodejs folder, and overwrite all existing files.
Restart Cygwin and try running npm -v again. You should see the npm version printed out in your Cygwin terminal. This means npm is installed successfully, congrats to you! This is what progress looks like.
Installing Webpack
In your Cygwin console, type npm install webpack -g to install Webpack.
The -g switch makes sure it’s being added to our PATH variable, so we can call it from our command line without having to call the full path.
Finishing up
There, you’ve completed all necessary steps to start Javascript development on your Windows machine. Head over to the Webpack documentation to start building the web application of the future.
Where to go from here?
- Webpack — https://webpack.github.io/docs/
- Babel — https://babeljs.io/
- React — https://facebook.github.io/react/
- ECMAScript 6 features — https://github.com/lukehoban/es6features
Thanks for reading!
As this was my first Medium post, I’d love to hear from you and know what you think. If you’d like to keep in touch, respond to this post below, follow me on Twitter or sign up to my newsletter using the form below.
Stay up to date!
