Setup Yeoman in Windows PowerShell

Update @ 2015-09-23: Using PowerShell is just my personal preference, You could use MS-DOS in Windows if your machine doesn’t have PowerShell installed.

1. Download Node.js and install it and make sure you have the npm package manager selected before the installation.
setup-yeoman-in-powershell-1
 

2. Open PowerShell and verify the npm installation.
setup-yeoman-in-powershell-2
 

3. Also verify if you have Ruby and Compass installed.
setup-yeoman-in-powershell-3
 

4. If no Ruby and Compass, download and install Ruby and then install the Compass by

gem install compass

 

5. Install Yo, Grunt and Bower using npm.

npm install -g yo

 

6. Verify the installations.
setup-yeoman-in-powershell-4
 

7. Also install the webapp generator.

npm install -g generator-webapp

 

8. Create your webapp project folder. In this example, i created the folder called eureka.

mkdir eureka

 

9. Change directory to your project folder.

cd eureka

 

10. Create your first webapp with Twitter Bootstrap with SASS and Modernizr.

yo webapp

setup-yeoman-in-powershell-5
 

11. Run the Grunt server and preview your webapp @ http://localhost:9000/.

grunt server

setup-yeoman-in-powershell-6
 

12. If you get the same error Syntax error: Invalid CP950 character "xE2" as above, open the app\bower_components\sass-bootstrap\lib\_grid.scss and replace to .
setup-yeoman-in-powershell-7
 

13. Restart the server and your first Yeoman webapp with HTML5 Boilerplate, Bootstrap with SASS and Modernizr is now ready!
setup-yeoman-in-powershell-8
 

Done =)

Reference: Yeoman

Advertisement

4 thoughts on “Setup Yeoman in Windows PowerShell”

  1. Excellent tutorial! Could you please adjust your blog by removing the reference to PowerShell? It is confusing as essentially you are just running the Windows Command Prompt. There is no additional PowerShell magic going on.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.