Generating Production Build index.html With Server Side App

Question

I want to do something very simple that I am a little surprised people are not talking about more. I would like to generate on my server my own index.html from the files that are created from building ember for production. I use ember for part of my application and so when a certain URL is hit, I would then like my ember app to take over. I have tried generating my own index.html by changing the flag storeConfigInMeta in ember-cli-build.js.

storeConfigInMeta: false

This gets rid of the ember app having its configuration stored in a meta tag but the app still does not work and gives the error,

Uncaught ReferenceError: define is not defined

I have the latest version of ember and I am building ember with the command,

ember build --env production

My server generated index.html looks identical accept for the integrity attributes set on the include js and css scripts. Is their anything I am missing about approaching ember this way? Should I not be trying to do this?

Answer 1

I made a mistake. I was grabbing the production assets with a regular expression with my server and generating my index.html file with these assets in the wrong order. To anyone looking to do this, it is very possible and is more preferable in my opinion to using the generated index.html unless you are using ember for your entire site's routing. However do use the setting in ember-cli-build.js,

storeConfigInMeta: false

This will make it so your ember app stores it's settings in javascript instead of in a tag. This is required for generating your own index.html file.

Answer 2

when a certain URL is hit, I would then like my ember app to take over.

You need to configure app server to return index.html file for the certain URL. Generally, it's not required you to create your own index.html.

May be you can check ember-islands addon to include Ember components anywhere on a server-rendered page.