Deployment #13

Closed
millisami opened this Issue Feb 17, 2014 · 10 comments

Comments

Projects
None yet
2 participants
@millisami

Been looking into interwebs about how to deploy ember apps, but found none helpful.
In the README, @mutewinter , you've specified the Mina part. But looks like it will work for the VPS only or at least it needs SSH access.

It would be helpful to know on how to deploy on Heroku. A cake task might be super useful if provided. Or, can u guide me through and I can update the README!!

@mutewinter

This comment has been minimized.

Show comment
Hide comment
@mutewinter

mutewinter Feb 17, 2014

Owner

You're right about the Mina part being for your own VPS.

I have deployed a Tapas project to Heroku, however, and it's really easy. You just need a Procfile that runs a simple static web server. Stretch is an open-source Ember app built with Tapas that I deploy to Heroku.

Owner

mutewinter commented Feb 17, 2014

You're right about the Mina part being for your own VPS.

I have deployed a Tapas project to Heroku, however, and it's really easy. You just need a Procfile that runs a simple static web server. Stretch is an open-source Ember app built with Tapas that I deploy to Heroku.

@millisami

This comment has been minimized.

Show comment
Hide comment
@millisami

millisami Feb 17, 2014

@mutewinter , I looked into those links.
But turns out that its using node.js stuffs in server.coffee.

Don't I've to build the app using cake build and do some commits and push over to heroku?
Can you give a short illustration for such really easy task? Well, I'm not finding it easy. :)

@mutewinter , I looked into those links.
But turns out that its using node.js stuffs in server.coffee.

Don't I've to build the app using cake build and do some commits and push over to heroku?
Can you give a short illustration for such really easy task? Well, I'm not finding it easy. :)

@mutewinter

This comment has been minimized.

Show comment
Hide comment
@mutewinter

mutewinter Feb 17, 2014

Owner

I left a step out actually, let me make it clear.

  1. Make a simple static web server in node that points to public like this one.
  2. Add this postinstall hook to your project.json. This will cause Heroku to build the project every time it's pushed.
  3. Create a Procfile that starts the server.

Now when you push to Heroku the postinstall step will build the app and put it in the public folder. Then Heroku will start the server using the Procfile. That server will serve the static assets in the public folder.

That's it, the app should be running. Let me know if that makes sense.

Owner

mutewinter commented Feb 17, 2014

I left a step out actually, let me make it clear.

  1. Make a simple static web server in node that points to public like this one.
  2. Add this postinstall hook to your project.json. This will cause Heroku to build the project every time it's pushed.
  3. Create a Procfile that starts the server.

Now when you push to Heroku the postinstall step will build the app and put it in the public folder. Then Heroku will start the server using the Procfile. That server will serve the static assets in the public folder.

That's it, the app should be running. Let me know if that makes sense.

@millisami

This comment has been minimized.

Show comment
Hide comment
@millisami

millisami Feb 20, 2014

@mutewinter Thanks, I will try it out and be back if any issues pops up.

@mutewinter Thanks, I will try it out and be back if any issues pops up.

@millisami

This comment has been minimized.

Show comment
Hide comment
@millisami

millisami Feb 25, 2014

Hi @mutewinter , yeah I was able to deploy to heroku.
But in production version, the CSS is not the same as in the development.
Following is the screenshot on development:
Development
And this is on production heroku at http://drag-n-drop.herokuapp.com
Production

Note the difference on top h2 backgrounds and font styles and sizes!!
I've pushed this repo at https://github.com/millisami/drag-n-drop-emberjs
I think its the issue with compile while it builds with cake build.
Can you have a look at it why such CSS difference between two versions?

Hi @mutewinter , yeah I was able to deploy to heroku.
But in production version, the CSS is not the same as in the development.
Following is the screenshot on development:
Development
And this is on production heroku at http://drag-n-drop.herokuapp.com
Production

Note the difference on top h2 backgrounds and font styles and sizes!!
I've pushed this repo at https://github.com/millisami/drag-n-drop-emberjs
I think its the issue with compile while it builds with cake build.
Can you have a look at it why such CSS difference between two versions?

@mutewinter

This comment has been minimized.

Show comment
Hide comment
@mutewinter

mutewinter Feb 25, 2014

Owner

I noticed you've got a bower.json file with no dependencies specified. Is it possible that your local copy has something in the bower_components folder that should be saved?

Never mind, see below.

Owner

mutewinter commented Feb 25, 2014

I noticed you've got a bower.json file with no dependencies specified. Is it possible that your local copy has something in the bower_components folder that should be saved?

Never mind, see below.

@mutewinter

This comment has been minimized.

Show comment
Hide comment
@mutewinter

mutewinter Feb 25, 2014

Owner

I checked out your repo and compiled it and I'm seeing the same thing. Looking into it further.

Owner

mutewinter commented Feb 25, 2014

I checked out your repo and compiled it and I'm seeing the same thing. Looking into it further.

@mutewinter

This comment has been minimized.

Show comment
Hide comment
@mutewinter

mutewinter Feb 25, 2014

Owner

Aha! I know what is causing this. It's a build environment issue with Heroku. Basically, your app is picking up styles from a folder within a node dependency. I fixed this in my other app on Heroku in this commit. You just need to modify your config.coffee to look like this.

Owner

mutewinter commented Feb 25, 2014

Aha! I know what is causing this. It's a build environment issue with Heroku. Basically, your app is picking up styles from a folder within a node dependency. I fixed this in my other app on Heroku in this commit. You just need to modify your config.coffee to look like this.

@mutewinter

This comment has been minimized.

Show comment
Hide comment
@mutewinter

mutewinter Feb 25, 2014

Owner

This happens because Heroku's node buildpack puts node and npm in the vendor directory.

Owner

mutewinter commented Feb 25, 2014

This happens because Heroku's node buildpack puts node and npm in the vendor directory.

@mutewinter

This comment has been minimized.

Show comment
Hide comment
@mutewinter

mutewinter Feb 25, 2014

Owner

My solution in Stretch just ignores the vendor folder. To conditionally ignore the vendor/node folder that Heroku adds, use the following:

    stylesheets:
      joinTo:
        'stylesheets/app.css': /^(app|vendor\/(?!node))/
      order:
        before: ['vendor/stylesheets/normalize.css']
Owner

mutewinter commented Feb 25, 2014

My solution in Stretch just ignores the vendor folder. To conditionally ignore the vendor/node folder that Heroku adds, use the following:

    stylesheets:
      joinTo:
        'stylesheets/app.css': /^(app|vendor\/(?!node))/
      order:
        before: ['vendor/stylesheets/normalize.css']
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment