RESTful Api with Express
We need a RESTful api for the Ember app that we made in Introduction to Express series, in real world there are two options, either we already have a backend in place, or we need to create accompanying backend for our SPA (Single Page Application). Express is ideal if we need to create the backend from scratch. Lets continue from our Node and Express post and make a RESTful api with Express JS. From the last post, we know that “bin\www” file is the startup file; in Visual Studio we can right click it and set it as a Node.js Startup fFile in Visual Studio; in the picture below I am selecting some other file and showing the context menu as it will not allow to “reset” the same file. Once its set; we can F5 / Debug the project similar to any other Visual Studio project!
For our api; lets add api.js file in /routes and add its reference using require and app.use in /app.js file like this:
Every time we run/debug the project, Visual Studio run it with random port instead of fixed 3000 port if we use >node bin\www from Node Command Prompt; lets fix it first, as we want that our api respond at the fixed known end point http://localhost:3000/api/v2 that we have configured above in the app.js We need to set PORT environment variable in the project settings; as bin\www script picks this environment variable and run the web app at specified port (if found or fall back to 3000)
Lets add some code in our api.js file now; I am creating a RESTful api, for our Ember app, we need an api having GET @ http://localhost:3000/api/v2/invoices, GET @ http://localhost:3000/api/v2/invoices/SOMEID, and GET and PATCH @ http://localhost:3000/api/v2/items/SOMEID For the time being we are using hard coded JSON data and as per http://expressjs.com/en/guide/routing.html, for our requirement the api code will look like this:
We can go ahead and uncheck launch browser from the Visual Studio project property window and instead can use tools like Postman or Advanced REST client (both Chrome apps) to test our api
To make our RESTful api work with another web application; we need to add CORS (Cross-origin resource sharing) support; for that we can code a simple little CORS Express middleware that add necessary HTTP headers in each request; shown in orange box below and can use that middleware with our app. You can find a guide how to write middleware for Express at http://expressjs.com/en/guide/writing-middleware.html
The blue parts is for Ember specific requirement; it sends PATCH requests (and also does OPTIONS before that) with content type application/vnd.api+json as Content Type. Note that Express Creator has already gone ahead and added few middlewares for us including body-parser; but it doesnt handle the Ember content-type for JSON parser; so we specified it to do JSON parsing for this required content type. Also note how we can simply extract submitted data out of request body without de-serialization using req.body.data as its already been taken care for us with the middleware.
- Note that our Ember app is @ http://localhost:4200 and we have specified it accordingly in our Access-Control-Allow-Origin header
- The code is made available @ https://github.com/khurram-aziz/HelloExpress
- In the Ember based front-end to use our Express based backend; we need to specify the RESTful api endpoint using host and namespace in app/adapters/application.js (the left hand side below) and if we were using mirage as v1 prototyping; we need to disable it by setting ember-cli-mirage ENV property in config/environment.js (the right hand side)
Note that our Ember app is still in Visual Studio Code; unfortunately Node Tools for Visual Studio proper still dont like Ember CLI based projects!