Yeoman inside ExpressJS

Question

I'd still like to try to get an example running w/ Yeoman and Express.

I tried the following and it worked "okay", but I'm stuck merging the routes. (over simplified for readability)

mkdir test
cd test
express
mkdir app
cd app
mkdir js
cd js
yeoman angular

Then I changed "output:dist" to "output:../../public" in the Gruntfile.js

Now, both servers run okay on their own (e.g. yeoman server and node app.js). I can also run 'yeoman build' now to output the minified JS to /public in the express app.

I'm a bit fuzzy on how the routes might merge? I would like / to pull up the Angular route and not the express route, etc. The angular-express-seed examples on github look okay, but I would still like Yeoman integrated into the project.

Any suggestions would be appreciated.

Answer 1

I would recommend this structure for yeoman + expressjs:

mkdir app
cd app
yeoman angular
express .

So your dir tree should look like this:

.
├── app
│   ├── 404.html
│   ├── favicon.ico
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   │   ├── controllers
│   │   │   └── main.js
│   │   ├── vendor
│   │   │   ├── angular.js
│   │   │   ├── angular.min.js
│   │   │   ├── es5-shim.min.js
│   │   │   └── json3.min.js
│   │   └── yeoman-test.js
│   ├── styles
│   │   └── main.css
│   └── views
│       └── main.html
├── app.js
├── Gruntfile.js
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── user.js
├── test
│   ├── lib
│   │   └── angular-mocks.js
│   └── spec
│       └── controllers
│           └── main.js
├── testacular.conf.js
└── views
    ├── index.jade
    └── layout.jade

You can remove the now redundant public directory (we're going to serve from app instead):

rm -rf public

And now in app.js, you need to change which dir to serve static files from. Change this line:

app.use(express.static(path.join(__dirname, 'public')));

to this:

app.use(express.static(path.join(__dirname, 'app')));

And that should be about it. There's one careat in that you now have two "index" files -- one in views/index.jade, and the other in app/index.html. Removing the app/index.html currently breaks yeoman, so my advice is to get rid of the route for app/index.jade and just make edits to index.html.

Hope this helps!

Answer 2

Here is another slightly different setup

yo angular

update Gruntfile.js to change config from 'app' to 'public'.

then do

express .

open app.js and ensure there is no route mapping like this app.get('/', routes.index); This is so node server would actually serve up index.html, the same file that loads up when running "grunt server".

Now go ahead and delete public directory and then move app directory to public

rm -rf public
mv app public

Answer 3

This project seems to cover all of the requirements (and even has optional support for MongoDB): https://github.com/DaftMonk/generator-angular-fullstack

I've just tried it locally and it works:

npm install -g generator-angular-fullstack

yo angular-fullstack [appname]

See the GitHub page for more info.

Answer 4

I would comment on @btford 's answer if I had the reputation -

Just wanted to add that installing express . after yo angular will overwrite the grunt-created package.json file which will break grunt as @jjperezaguinaga reported.

Make sure to save a copy of package.json before installing express .. Then add the following dependencies to the original package.json:

"dependencies" : { 
  "express": "3.3.4",
  "jade": "*"
}

Answer 5

I'm having troubles with this solution: express still try to load index.jade instead of index.html, but if I enter localhost:3000/index.html express render correctly. I solved removing this line from app.js:

//app.get('/', routes.index);

Hope this helps. Thanks for sharing, D.

Answer 6

Here's a compilation of steps others have suggested previously, but all in one, in numbered steps. This is based on versions: Yeoman 1.0.4 & Express 3.3.8.

1) Create your project directory and cd into it

2) Install angular:

yo angular

(will need to run the next two lines if you're not logged in as su)

bower install
sudo npm install

3) Rename package.json to package_yo.json (so it's not overwritten by express' version of package.json)

4) Install Express express -c less -Hs . (or whatever other express options you desire)

sudo npm install

5) Delete Express' public directory & change 'public' to 'app' for paths in Express' app.js: app.use(require('less-middleware')({ src: _dirname + '/app' })); app.use(express.static(path.join(_dirname, 'app')));

6) Delete express' default route ( app.get('/', routes.index); ) (now express will use the routes specified in angular's /app folder instead

7) Start the server npm start

(Then you should see Yeoman's welcome page at: localhost:3000/)