How to use Yeoman on Cloud9
By Brady Dowling • 13 July 2015
We have done the work so that you don’t have to. Here is how to setup a complete and full working environment for Yeoman on Cloud9.
Cloud9 has some seriously brilliant and passionate developers, one of them being Stuart Davis. He recently cooked up a post about how to use Yeoman on Cloud9 on his own blog on Medium. We reached out to him to feature the post because of how useful it can be to the rest of the Cloud9 community. Stuart has a background as a front-end developer, but after having worked in digital for 15 years, he now leads a team of developers.
How to Use Yeoman on Cloud9
guest blog post by Stuart Davis
The two things that have excited me the most about web / software development recently is the introduction and continued improvements of cloud-based IDEs and the way that we can scaffold apps in order to reduce setup time when developing.
I’ve tried most cloud-based IDEs and I have to say that Cloud9 is probably the best. Feature rich, lots of options and a true command line with all the key software pre-installed (node, etc). The free offering is good enough for the majority of jobs but if you’re serious about developing in the cloud, the initial ‘Micro’ pay tier is well worth shelling out for.
I remember a time when it could take days to get the ‘perfect’ set up for your development environment. Downloading, extracting and building the environment to your likings was time-consuming. If you were developing in varying languages or environments this had to happen a number of times over. But it’s 2015 now and luckily Yeoman exists, and this takes all the hard work out of doing this heavy lifting for you. With a few lines of install instructions in the command line, you can fully scaffold a development stack within a few minutes. It’s backed by a lot of front-end developers at Google and is fully open source.
Bringing these two technologies together was not as simple as I initially thought. You need to use a few workarounds to get them to play together nicely. Sadly, there isn’t a full tutorial online that explained this; instead I spent a few days cherry picking off various tutorials and reading multiple Stack Overflow questions — oh, and also talking to the very helpful Cloud9 support team. Hopefully, the information presented below will give you a heads up to get going quickly and without issues.
So without any further ado, here is how I set up a fully working Yeoman scaffolded app in Cloud9.
Setup a Cloud9 Workspace
As you would normally, create a new Cloud9 workspace. I tend to use the HTML5 template as it provides a nice blank canvas. Once you have named the project, launch it to enter the development environment
I delete the initial hello-world.html file (as it’s not needed) and strip the content out of the readme.md file. I also enable the hidden files and folders option (if not already enabled). We can now get down to the fairly easy command line work.
The Global Problem
The first big roadblock that I came up against was the way that Cloud9 handles the global -g command line variable.
Yeoman offers a great starter walkthrough tutorial. Sadly, as I was working through it I was getting numerous EACCESS errors which aborted the install. The easy solution here would be to apply sudo to everything to force it all through, but this isn’t the correct way to achieve the end result. Trial and error showed I was also getting further errors down the line by doing it that way, so that idea was soon abandoned. I was pointed to this potential workaround on Github, but this again didn’t give me the results I wanted and seemed overly complex.
I finally found a much simpler answer to the issue — which lived in Yo’s own command line error checking
The command line error — Yo itself came up with the fix
The Command Line
We now eventually get down to the nitty-gritty of scaffolding an app. I am presuming here you have some experience of using Yeoman and how it works — if not, their help site will help you take those first baby steps.
So, jump into command line and firstly add the above-mentioned fix:
echo "export NODE_PATH=$NODE_PATH:/home/ubuntu/.nvm/v0.10.35/lib/node_modules" >> ~/.bashrc && source ~/.bashrc
At this point, I like to update npm to it’s latest version:
npm update -g npm
Then install Yeoman itself:
npm install -g yo
Install process in Cloud9's command line
Then choose the generator that you want to install from Yeoman, in this instance I’ll use the official webapp generator as an example (it’s safe to ignore the peerDependencies warnings):
npm install -g generator-webapp
Then finally, start the scaffolding of the webapp:
Note: When running through the scaffolding of the project, the command line sometimes looks like it stops because of the rather annoying command line equivalent of a popup from the Bower installs that are occurring — you will need to select Y or N to push the rest of the install through. (It looks like it needs a fix from Yeoman to stop these appearing).
Additionally, it also looks like the command line has frozen near the end of the scaffold — the solid white cursor sitting motionless. It’s once again associated with the Bower pop-ups, simply hitting Enter will force the last part of the install through.
You should now have your application fully scaffolded in Cloud9 as expected — all installed without any errors or issues.
(Yours will look slightly different based on the options that you selected when yo’ing the application).
The Grunt Of It All
You should now be in a position that you can happily work on your new scaffolded project in Cloud9 as you would in any IDE. One of the best things about working with Yeoman is that it integrates Grunt in the install for various generators. This task runner automates the process of minifying, building your SASS, cleaning your work area amongst a plethora of other things.
I read a couple of discussions on Stack Overflow on how to get Grunt working properly on Cloud9. Firstly you need to open up your Gruntfile.js file and change your server from localhost to 0.0.0.0 and your server from 9000 to 8080.
EDIT 14 July 2015: This process seems to have recently changed in the latest version of Grunt. You will now need to manually add in hostname: ‘0.0.0.0’ under the livereload part of the code in the screenshot above (place it below the port line). Then continue to change the port to 8080 as above.
Save that file and then run:
This starts the whole grunt process, including all the relevant builds and the live watch task.
The watch task running in Grunt
Try editing and saving a file and you can see the watch task taking note of the changes made.
Sadly, Cloud9 only opens one port (8080) for outside viewing. Therefore, in order to see the live page that you are working on you will need to navigate to your Cloud9 specific live page. You can find this by going to your ‘Share’ button on the top right of the window and selecting the ‘Application’ link — this is now your equivalent of localhost and can be viewed in another browser window.
Sadly, the only downside is a lack of livereload. Cloud 9 doesn’t open the necessary port for this. There is one discussion that claims you can get it working, but I was unable to do this successfully.
I found a slight workaround to this by installing a refresh extension in Chrome. This automatically reloads the page at set intervals (from 2 seconds upwards). If you are willing to take the overhead hit on bandwidth and processing power it is similar to having a livereload environment, but clearly it’s not the same.
So, there you have it. I’ve set this environment up a number of times and have got it working successfully with various Yeoman apps.
Stuart Davis is now a Digital Manager at a 10,000+ employee public sector organization in the West Midlands in the UK. Outside of work, he is an avid football fan (Go Wolverhampton Wanderers!) and can be reached on Twitter @studavis.
If you have a blog, video, or tutorial that could be useful for the Cloud9 community, email us about it at firstname.lastname@example.org and we may feature it on our blog.