How to connect an EmberJS front-end with an NodeJS Express API?

Question

I'm working on a MEEN-stack (MySQL, EmberJS, Express, and NodeJS) project. I have never worked with Ember at all. My only front-end experience is jQuery.

The project is separated into folders, with the front-end (Ember) in one folder and the Express API in another. Front-end will handling loading in web-pages while sending requests to Express API for database requests / authentication / more.

I am currently able to connect the two servers via an explicit URL with jQuery's Ajax method in a webpage's static javascript file (along with allowing CORS and modifying the Ember environment file in app/config).

My confusion is that there is definitely a more elegant solution for connecting the two, but I'm lost on how to go about it.

From looking at tutorials, I have attempted adding an application.js file in the Ember Front-End app/adapters folder:

import DS from "ember-data";

export default DS.RESTAdapter.extend({
    host: 'http://localhost:9029',
    namespace: 'api'
});

But I don't have the knowledge to fully implement it or test it. What am I missing? How do I take advantage of the adapter file?

Answer 1

When you start ember use:

ember server --proxy 'http://localhost:9029'

Assuming that you node server is serving your api from http://localhost:9029 as you start the ember server with the proxy the ember-cli will spin up a very simple node proxy that will proxy your requests while you are developing.

Then you can remove the host from your adapter.js file

import DS from "ember-data";

export default DS.RESTAdapter.extend({
    namespace: 'api'
});

Also if you want brevity:

ember s -pxy 'http://<YOUR LOCAL SERVER AND PORT>'