Using a great front-end framework like Ember is fun to use. Unfortunately most applications we write are going to need some sort of back-end. We could go with Firebase and I've done that in a previous post. What else is out there?

Most people would argue that Rails is the way to go and they aren't wrong. If you're looking to learn more about that check out Rails to Ember. It's a great guide on combining them and you should check it out. I'll be looking into ROR more in the future so stay tuned.

What if we wanted to stick with JavaScript in the front and back-end? I think that's a reasonable choice and something that I'm going to explore today.

In this first post we'll be creating a Express server that serves up a Ember application. We'll be going over adding a database in the next post.

Getting Started

As always before you begin make sure you have iojs or Node installed. Check out my iojs installation post if you need help with that. In this tutorial we are going to use Express. If you need help getting that installed check out my Express guide.

Folders

We'll begin by creating a new folder and setting up our server.js. We'll bypass using the Express generator for now.

$ mkdir NodeEmberTest
$ cd NodeEmberTest
$ mkdir app
$ mkdir public

The app folder will have our routes in it. The public folder is where we'll be storing our Ember project.

Express Files

Create a new file called server.js. Here is the contents of it.

// server.js

// modules
var express        = require('express');
var app            = express();

// set our port
var port = process.env.PORT || 3000;

// set the static files location 
app.use(express.static(__dirname + '/public'));

require('./app/routes')(app); // configure our routes

// startup our app at http://localhost:3000
app.listen(port);


// expose app
exports = module.exports = app;
      

Above we are creating a very simple Node server. We are telling it the port 3000 and setting the route and we are telling it to listen on that por.

We need to define the routes in our app folder

// app/routes.js

 module.exports = function(app) {
        app.get('*', function(req, res) {
            res.sendfile('./public/index.html'); // load our public/index.html file
        });
};

This is fairly straight forward. We are telling Express that all routes will be sent to our public/index.html file. This file will be our Ember application.

The last thing we want to do with our Express application is to create the package.json file and make sure we have everything needed in it.

npm init //run this inside the NodeEmberTest folder
npm install express --save

The npm init command should ask you a few questions and create an empty package.json file based on those answers. Next you simply install Express.

Before we create the Ember side we'll make sure everything is working. Create a hello world index.html inside the public folder.

// public/index.html
HELLO WORLD

Run node server.js and look at http://localhost:3000 and you should see the server running and the HELLO WORLD message.

Ember Setup

Now we have a very basic Express server. Let's create a really basic Ember project. Create the Ember project within the NodeEmberTest folder.

$ ember new TestProject //using ember-cli
$ cd TestProject

For fun we'll edit the application.hbs file.

<h2 id="title">Welcome to Express Ember.js</h2>

Now we can build the project and output it to the public folder we created earlier.

$ ember build --environment=production --output-path=../public/

That should be it! Run node server.js again in the root of your node project folder and you should see on http://localhost:3000 the 'Welcome to Express Ember.js'.

Future

The next steps is to get mongo or some other database talking to our application. We'll be going over that in a future post.

Have any questions? Leave a comment below

Image Credit Node.js