CODEWITHSUNDEEP
ruby-on-railsapiember-cli
ipatch
ipatch

Reputation: 4033

How to deploy an ember-cli app that interacts with a rails API backend to a VPS

I have completed development of an ember.js app for the time being, and am wondering how I can deploy it to a production server? I successfully built a dist dir within the app, and I also cloned the ember app repo to the production server.

I am deploying the rails app with capistrano from my local box to the VPS, and everything appears to be working there. Side note, I am using Nginx as the web server, and puma as the application server for the rails apps.

Also, I have the local dev versions of the ember / rails app working great on my local box running the below commands,

rails s --binding 127.0.0.1 and, ember server --proxy http://127.0.0.1:3000

So I decided to copy the files that were in the dist dir to the public dir of the rails app, and move the assets for the ember app to the assets dir of the rails app.

On my local dev box, I see CSV files being presented like, CSV Files

However when I load the "ember app" on the production box I am not seeing the CSV files being presented like, No CSV Files

Which brings me to my question, what is the proper way to deploy a ember-cli app to a production server and have it communicate to a rails API backend?

UPDATE

This is what I am seeing in the network tab,

network tab

Upvotes: 1

Views: 735

Answers (1)

mehulkar
mehulkar

Reputation: 4974

In an ideal system, I use this setup:

On disk: 

/srv/frontend/
/srv/backend/

frontend

With Ember CLI, /srv/frontend contains the output of ember build. I can use the --output-path=/srv/frontend flag to set this, if the Ember CLI source is also on the same machine. All API requests should be prefixed with /api. I do this by setting the namespace property to my ApplicationAdapter to api/ (or api/v1 sometimes.)

backend

/srv/backend contains my backend API (The location doesn't really matter in most cases).

For the Rails API, I use puma as a standalone server. As long as you have a standalone server that listens on a port, it doesn't matter if it's puma or something else. All API routes must be namespaced under /api. you can wrap all your routes in a scope block to do this without changing your codebase. I go one step further and add another namespace v1.

reverse proxy

Then I install nginx and make my config like this:

server {
  listen 80;
  server_name localhost;
  return 301 https://$server_name$request_uri;
}

server {
  listen       443;
  # add SSL paths
  server_name  localhost;


  # UI, Static Build
  location / {
    alias /srv/frontend/;
    index index.html;
  }

  # Rails API
  location /api {
    proxy_pass http://localhost:3000/;
  }
}

So now I have an Nginx config that proxies / requests to the /srv/frontend/index.html and /api requests to Puma on port 3000.

The only downside to this is that I'm forced to use hash location on my Ember application. There are ways to circumvent this, but it's just easier to use hash location and history location doesn't really buy me much.

Upvotes: 3

Related Questions