AngularJS development with PhpStorm on Windows
Making AngularJS Development on Windows 10 just little bit easier
Always the same, lots of excellent setup tutorials “How to setup Angular Dev” but almost always on Mac. Not bashing, love Apple. I currently own an iPad and owned a Mac book Pro for some time, until they surface mounted everything and made owner upgrading impossible, but I digress. Here is my quick guide for getting PhpStorm running for local testing of AngularJS 1.* apps on Windows 10.
I say AngularJS 1.* to inform that I have not even remotely looked at Angular 2.0. I took up AngularJS last year and love it so much. Not ready to dump ng-1 so quickly and start flirting with the new shiny one just yet.
So I wanted to test a sample project from GitHub today and thought I would use PhpStorm with the built-in run/debug configurator, which uses Node.js so there will be some brief but not detailed information about installing that as well. I use PhpStorm as I am mostly a WordPress Developer. I also use Visual Studio 2015 a lot, as well, as I also develop SharePoint Front-End solutions using AngularJS.
The applications required will include the following:
- PhpStorm (obviously)
- Node.js – Guide to Install
- GitBash – download
- Python for Windows (2.7.*) – (latest version is, at the time of writing, 3.5 but node-gyp needs 2.7)
That should be enough to get things happening; you will be advised along the way if anything is missing and installing from there is pretty self-explanatory. There is also a fantastic article for creating a Node.js web server for running angular – by BRIAN DE SOUSA. So very helpful and necessary to make things happen.
Go through the list installing from top to bottom. Will make a lot of presumptions along the way and if miss anything, let me know and I will find the answers you seek. After installing GitBash, you should now be able to use it to run npm commands and get everything ready. Using Brian’s article, you can go through and globally install packages for running the Node.js server. Look for Step 2 – Install Required npm Modules in his guide.
Another important item is configuring the correct python.exe for Node. When running installs and updates in GitBash, I came across a repeating error, “Python executable “python” is v3.5.0, which is not supported by gyp.” and the reason for Python 2.7.* and not the latest version. You should only see this error if you have the 3.* installed and need to run a small config command to set Node to the correct python.exe file – “npm config set python C:\Python27\python.exe”
If you have been using PhpStorm for a while, I jumped on around version 7 and currently running EAP 11, you will know about the plugins. You should have the Node.js plugin installed, and there is also one for AngularJS. You can then create a new project in PhpStorm and get the following “New Project Window” as shown below. You can select Angular and get the Angular-Seed pulled from GitHub and installed to hit the ground running.
Run the AngularJS on GitHub link in the corner and you will go to the GitHub page and see some info on the Angular-Seed. Use the terminal in PhpStorm to run npm install and get all your dependencies to run the app. I have reconfigured terminal in PhpStorm , so when I click terminal at the bottom it will open GitBash at the project page, so much better.
Now just a matter of following Brian’s recommendations, create your node-server.js file and edit your run/debug configuration. The only change I made was to comment out line 19, referencing the favicon, as I didn’t have one and I are only testing.
You can now click run and go to http://localhost:3000 to see your app running, YA! I hope this helps out anybody wanting to get their Windows Dev environment running as efficient as possible. Again if you have any questions or suggestions, let me know.
I am also working on an article about setting up a WordPress/Web Dev environment on Windows using the built-in Hyper-V server so check that out as well. WordPress and Web on Windows
Leave a Reply