Ember as part of a serverside application

Ember CLI
1

This is bugging me as it is a bit of a hurdle I can’t see how we overcome.

I want to be able to add JSON to a preload store (or initialize a model when the app loads) in index.html before it reaches the browser. to do this using a preload store I would need the ember app to live inside some sort of server side app - we use .NET and ServiceStack.

I can get my server side code to treat index.html as dynamic so i can output the JSON for the preload store - however - if i put this in the /dist folder I get errors where .js files aren’t found.

So I guess the question is:

When I do

ember serve

Where are these files loaded from? It’s not /dist it’s not /app

Where should I put this code? Others must have ran into this issue?

2

Does anyone have any clue about this? I an’t be the 1st person to struggle here?

3

OK, so i can use ember build to push to /dist but this still isn’t ideal.

I’d like to be able to point to the dev code during development… does anyone have any idea how to do this?

4

Using ember build won’t work anyway - it wipes the directory before pushing the new files so anything I do in there is transient :confused:

5

Guys - this is getting pretty harsh now - i am trying to work out auth on our app and need to be able to manage the index.html as a dynamic page - is there no guidance on this at all?

6

I think you will find the discussion in this thread relevant: https://github.com/stefanpenner/ember-cli/issues/2172

7

When the app is running under

ember serve

Does it get the files from /tmp?

If it does then this would never work :confused:

The files in /dist do not run after using ember build - the CSS files all @import and the destination files don’t exist and nothing renders…

8

If you want your entry point to be a server-side app, develop against that, run ember build --watch to keep dist updated and have your server-side app serve out of dist. You lose support for livereload, but that’s not the end of the world.

9

This is the same issue - I am surprised this isn’t sorted… I’ve been spinning my wheels for days on this trying to figure out work arounds etc

Thanks for the heads up

I don’t care about losing livereload! :smile:

The only thing here is that /dist seems to get wiped out everytime it’s updated - so my server side files are all lost

10

Also - the issue here still remains - the output in dist doesn’t run:

The CSS are doing:

@import url(common/components/badges.css);
@import url(common/components/banner.css);
@import url(common/components/buttons.css);
@import url(common/components/keyboard.css);
@import url(common/components/navs.css);

but common nor it’s subfolders and css exist…

11

Yes, you need to let ember-cli own dist. The two approaches I’ve used successfully is to pull in ember-cli assets via bower (use bower link for local development, which uses symlinks), or use a local proxy like nginx to send requests to the appropriate development server based on URL.

12

What do you mean by letting ember-cli owning dist? Sorry for the probably dumb questions but I am a .NET dev and ubuntu is fairly new to me.

ember-cli pretty much owns my life atm!

Can you break down your last post a little for me? :slight_smile:

[update]

OK so bowerlink will copy the files to another dest?

What about these dodgy CSS links?

[update 2]

Do i need to do prod build to get the CSS to be done properly?

13

OK! Aside from the build command not properly parsing the scss - which i am guessing is why we are getting the unresolvable @imports - this is working like a charm!!

I did the bower link thing to push into my servicestack app and it works perfectly.

Anyone got any ideas why the CSS is borked?

I am also getting this in the console:

GET http://127.0.0.1:8080/bower_components/tree_merger-tmp_dest_dir-SKGmryfd.tmp/app/styles/bower-linked-ui.css.map 404 (Not Found)

Which comes from this line in the css:

/*# sourceMappingURL=../../tree_merger-tmp_dest_dir-SKGmryfd.tmp/app/styles/bower-linked-ui.css.map */
14

Don’t run your production app using ember serve. All of that is for more for development, and the express server isn’t souped up for it.

What you need to do is run ember build environment --production and that will build your files to /dist. It’s a simple index.html file with supporting assets (css,js, etc). You need to use the static assets and deploy those files however you normally do it.

15

Problem with that is we’d be developing against min js

16

My answer isn’t going to help much, but I’m posting anyway. LinemanJS addresses this issue by supporting both API stubbing and API proxying. In development, you can point lineman to a live-running instance of the server-side application (or api) and requests to lineman’s dev server are proxied. Additionally, you can build out the client-side application before the server-side app is ready by creating stubbed responses, which Lineman will serve from the dev server.

This allows you to dev/debug against non-minified assets, while still hitting the upstream server-side app (or stubs).

18

ember-cli also has this feature.

1 Like
19

did that in the end - using bower link