Best way to start a ember, expressjs app

I would like to use express.js along with ember. What is the best way to get started? On searching I only found results on angular-express-grunt https://github.com/blai/grunt-express-angular-example and yeoman express angular generator-express-angular - npm.

Questions

  • How to structure a express + ember app?
  • What tools is best to work with this set up, grunt, mimosa?
2 Likes

You can use ember app-kit and swap out grunt-contrib-connect for grunt-express. Another thing you can do is to start an express app and write your ember app inside the public/javascripts directory and work from there until you setup your own build process. There’s also brunch-with-ember-reloaded, which uses Brunch as a build tool. You can setup your express back-end like this: http://hackerpreneurialism.com/post/43379675961/nodejs-with-bunch-io

This is awesome, I was just doing the same thing now, but still figuring out how to put express code, changing the parts of Gruntjs(too much stuff there) etc! Thanks :smile: I think you should write a blog post or a gist or a sample repo on converting ember app-kit to a ember-express-app-kit? That would be helpful to me and every others in the future.

Mimosa has a bunch of Ember starter skeletons which all have Express servers.

Using commonjs and browserify: https://github.com/JonET/mimosa-ember-commonjs, mimosa skel:new ember-commonjs

A port of the peepcode example, also uses emblem: https://github.com/breathe/mimosa-peepcode, mimosa skel:new ember-peepcode

A skeleton almost finished, involves bootstrap: https://github.com/Anachron/mimosa-emberboots

Cool :smile: Can i know why more people prefer mimosa when it comes to ember+express?

Replacing grunt-contrib-connect to grunt-express or grunt-contrib-express, do we still have to create a server on expressjs app.js file or just module.exports= app , and then in the connect express grunt file there we will define server hostname , port and the entry point ??

With grunt-express and ember-app-kit, you make a new file under the tasks folder called express and module.exports your preferences from there, just like the connect-file.

tasks/options/express.js

module.exports = {
  server: {
    options: {
      port: process.env.PORT || 8080,
      server: ā€˜server’
      hostname: ā€˜app.estereobit.dev’,
      bases: [ā€˜tmp/public’],
    }
  },
  dist: {
    options: {
      port: process.env.PORT || 8080,
      server: ā€˜server’
      hostname: ā€˜app.estereobit.dev’,
      bases: [ā€˜dist’],
    }
  },
}

server/index.js

var express = require(ā€˜express’);
module.exports = server = express();

This is all you need to get setup. grunt-express doesn’t want you to call the listen() function from within your server module, because the express task takes care of that for you.

2 Likes

@vysakh0 A disclaimer: I’m a novice Ember developer myself but I built and maintain Mimosa. I can’t say that more people prefer mimosa, mimosa is still a small fry in the larger scheme of things. But going back quite some ways Ember developers have been asking for specific features in Mimosa to cater to their needs. There are more example Ember apps out there built using Mimosa than any other MVC technology.

I also don’t know much about Grunt, so other than some basic differences I can’t really comment much on how great or not-great or hard to get started with it might be compared to Mimosa.

But I do know that if you want to build an ember app with express, you are literally 5 commands away from getting started.

npm install -g mimosa
mimosa skel:new nameOfSkeleton nameOfFolderToPlaceSkeleton
cd nameOfFolderToPlaceSkeleton
npm install
mimosa watch -s

I’m all for feedback if anyone has trouble. =)

1 Like

This is what I was looking. thanks

@ulisesrmzroche that was very helpful (great question @vysakh0) but I am sort of stuck. Can you post more info on the Express EAK setup and usage? Example project?

Sorry for the long noob question but I did exactly what you stated and am not sure what to do next. Assume I have to replace the connect tasks in Gruntfile.js ala:

  grunt.registerTask('server', "Run your server in dev w/ auto-rebuilding.", [
                     'build:debug',
                     //'connect:server',
                     'express:server',
                     'watch'
                     ]);

But all I get is an error that Express has no server task.

Also do I need to copy and or modify these functions from the connect task?

lock(req, res, next) 
wildcardResponseIsValid(request) 
buildWildcardMiddleware(options) 
middleware(connect, options) 

Any guidance would be appreciated as I am very sure there are many here who would like to use EAK with Express.

Do you have both express and grunt-express declared in your package.json? They both need to be declared for the wiring to work. The grunt task is correct.

I didn’t use any of the functions from the connect task, instead relying on grunt-express and express to handle routing and middlewares. Haven’t run into any problems with the semaphores, so i’ve ignored the lock function till now.

  "dependencies": {
"loom": "~2.0.0",
"loom-generators-ember": "0.0.1",
"express": "3.4.2",
    "grunt-express": "1.2.1"
  }

Yes they are there. And here is my express task

module.exports = {
server: {
    options: {
      port: process.env.PORT || 8080,
      server: ā€˜server’
      hostname: ā€˜localhost’,
      bases: [ā€˜tmp/public’],
    }
  },
  dist: {
    options: {
      port: process.env.PORT || 8080,
      server: ā€˜server’
      hostname: ā€˜localhost’,
      bases: [ā€˜dist’],
    }
  },
}

I must be doing something wrong but as I am new to this type of setup I am not sure where to look.

Ah, ok. You need to put grunt-express in your devDependencies and express in your dependencies.

Try putting grunt-express in your devDependencies, delete your node_modules directory, re-install your dependencies, and try again.

@Brendan For a grunt based ember, express app, after I asked the question I looked at Ember App kit and grunt-angular-express repo and came up with this sample template, might give some idea https://github.com/vysakh0/ember-express . Now going to try mimosa way and see what suits me :smile:

I still get the same warnings after making those changes @ulisesrmzroche.

    Brendans-MacBook-Pro:cvr Brendan$ grunt server

/Users/Brendan/Documents/EAK/cvr/tasks/options/express.js:5
      server: ā€˜server’
              ^
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected token ILLEGAL
Warning: Task "server" not found. Use --force to continue.

Aborted due to warnings.

I will take a look at this project @vysakh0. Thanks so much.

That’s a syntax error. Look for missing commas or something like that. It should work after that.

This won’t watch any file change. express ember-app-kit

Well @stefan and the crew seemed to have switched EAK from Connect to Express in the last few days which hopefully will make this easier for everyone.

2 Likes

I have created a github repo called ember-sass-express-starter. Client-side project layout is almost exactly the same as the one generated by ember-tools. That’s because this project is designed to work with ember-tools.

The reason I created this project is because I find Ember App Kit overly complicated. I mean have you looked at that Gruntfile? With ember-tools ā€œit just worksā€, and it is all abstracted away. The entire javascript and handlebars compilation is handled by ember-tools, and sass compilation is handled transparently by the node-sass express middleware.

As a result the project directory is very clean. pretty to look at, easy to understand for new developers. After many hours of looking at just about every possible ember boilerplate projects, I am very content with the way this project turned out.

Go and check it out here: https://github.com/sahat/ember-sass-express-starter. If you have any suggestions please feel free to submit a github issue or a pull request.

For anyone using/wanting to use browserify, have a look here at emberate, which was based off of @ryanflorence’s loom-ember build-index.

Emberate generates a file that links all of your ember files so you can do browserify entry.js -o bundle.js along with some shimming, and you have a nice build. We also support PODS directory structure :smile: