Using keystone generator with angular-fullstack generator

[Fabian Rios]

I've made a working keystone setup based on the keystone yeoman generator and am now planning on using the angular-fullstack generator as base for the frontend. 

From what I've understood I have to "bring my own" express and mongoose (in my case the express/mongoose config from the angular-fullstack generator) to integrate the two and I've got it working quite well with a few exceptions:

1. I get the error "Express 500 TypeError: Object #<IncomingMessage> has no method 'flash' at Keystone.render (<path-to-project>/node_modules/keystone/index.js:1095:17)"
   when trying to access /keystone. If I uncomment the lines that use res.req.flash in index.js the admin UI actually works fine (I still get the same error on other pages using res.req.flash)
2. When trying to use keystone.set('auth', true) i get the error: "Express 500 TypeError: Cannot read property 'userId' of undefined at at exports.persist <path-to-project>/node_modules/keystone/lib/session.js:96:18". From what I understand from keystone/index.js, I should be able to use options like keystone.set('nav') and keystone.set('auth') without the use of keystone.start(). Should I look elsewhere in order to make the authorization work?

Am I missing something obvious here or is it more complicated than that? If its possible to use the angular-fullstack generator together with the keystone generator and still use keystone.start() I would be happy to know how to do that.

Im attaching a pic on my keystone.js and express.js config.

Thanks!

[j...@keystonejs.com]

Hi Fabian,

It's a bit more complicated than that to set up your own express instance, you basically have to emulate everything that keystone.start() does (in keystone/index.js)

Luckily it doesn't look like you're doing anything specific, and it should be easy to set up everything you need (that angular-fullstack sets up for you) using keystone.start()

For one thing - you're only binding keystone in development mode - is that intentional?

Most of your express config looks identical to how keystone configures it, including:

• favicon
• public files served from /public
• json / urlencoded / methodOverride
• app.router

The only custom thing you've got is ejs as your template language instead of jade. You've got two options here:

(a) Switch from ejs to jade (personally, I prefer Jade ;-) - just convert your ejs templates (which should be pretty simple) to jade, there's a great converter here for html to jade: http://html2jade.aaron-powell.com

(b) Tell Keystone to use ejs instead of Jade. There's an example of how to do that here: http://keystonejs.com/docs/getting-started/#routesviews-templates

If you have trouble getting ejs to work, let me know.

Cheers,

Jed.

[Fabian Rios]

I see, and I would much rather use keystone.start() if possible but theres a few things Im concerned about:

• If i use keystone.start() is there any way of getting middleware like app.use(require('connect-livereload')()) to work?
• The angular-fullstacks's grunt serve starts the express-server out of the box, can I make the grunt express task start the keystone (express) server too?

And sorry for not clarifying, the ejs template language and the developement mode thing just comes with the fullstack generator and i have no intentions of using it in my real project :)

Thanks!

[j...@keystonejs.com]

Easy yes to both of these.

You can bind any middleware you like into the middle of the express stack like this:

keystone.pre('routes', require('connect-livereload')())

Like it sounds, this will include the middleware before the routes are processed.

On the grunt serve thing, I haven't tried the generator so can't see the grunt file but it should have something that starts the script express.js. Just change that to keystone.js.

Failing that it's probably just running something like

node keystone

or

nodemon keystone

(the second watches for changes and auto-restarts your application, which is nice sometimes)

You don't actually want to run the express script (as keystone.js will do everything for you) so it's up to you which command you want to run to start things ;)

If you have trouble getting that to work let me know and I'll install / run the generator myself, and see what it's doing.

[Fabian Rios]

Of course! I've seen that functionality in either the getting started guide or the documentation but for som reason it never occurred to me that its the same thing as app.use().. Ive been obsessed with the keystone docs for days now so my brain is just a mush from all the reading :)

Okay great, then I guess ill be using keystone.start() instead.

Thanks for all the help!

[j...@keystonejs.com]

Haha you know, it took so long to write those docs that it's really nice to hear someone obsessing over them :)

[Fabian Rios]

Hehe, glad i can help ease the pain :)

One last question on this topic thought. Ive got angular-fullstack and keystone play nice together, but the angular generator uses a lot of its generated css/js/images in ".tmp" so i would have to set two static folders (app and .tmp). When i use keystone.set('static', folder) several times they override each other and i tried doing something like keystone.set("static", ['app', '.tmp']) but without success. What to do?

Thanks

[j...@keystonejs.com]

On a side note, what is the purpose of .tmp? Is the idea that you move what you need into public then remove the rest?

Back to your question, at the moment binding multiple static folders isn't supported out of the box (although it would make a good feature to add - https://github.com/JedWatson/keystone/issues/258)

You could set it up with additional static middleware by using keystone.pre('routes', express.static('.tmp'))

**edit** I just checked your original screenshot and it looks like yes, the .tmp folder is only being used in development, so if you want that there use the pre-route binding, otherwise move all the files you need into /public :)

[Fabian Rios]

Yes, the .tmp is only used in dev and then grunt does its magic and BAM! all the files are moved to /public.

Thanks for the tip ill try that!

[Jesse Seaver]

Hi Fabian - 

I was just about to try the same thing, to combine Angular with Keystone, and I was wondering if you might be willing or able to share a github with me of the configuration you were able to set up? I will start from scratch, but it seems like you may have put it together which would be awesome. Understand if you cannot, but I thought I would ask. 

Thanks!

J

[Andrew Koroluk]

I would like this too. I want to make an angular app that also uses keystone but it has been hard to get them to play nice. 

[Cameron Roe]

I'd be interested in seeing an example as well. I was looking at angular-fullstack and it's already got a lot going on in the backend. Not sure how it would sync up with keystone.

[ad...@adambragg.com]

I am about to attempt this combination. Does anyone have any other updates on their efforts that might help me out?