Serving ember app on a subdirectory

Ember CLI
1

I created a sample app using ember cli 3.1 and am able to build and run it using ember serve when i deploy it on my server in a folder, i see a blank page.

I tried setting the root URL to the folder path on the server and setting locationType to hash as well.It does not seem to help and i see an error on the console “UnrecognizedURLError”.

2

Setting rootURL in config/environment.js is the right way to do this. It sounds like you are already trying that, so I would double-check that it’s really present in the files you’ve deployed on the webserver.

3

How do i check that ? I checked the network tab and i can the js & css requests hitting the proper URL succeeding. I don’t see any other failed requests also. Is there anywhere else in the JS code that i can check for this?

4

You can load your config in the browser console like require('your-app-name-here/config/environment').default. The app name you need in your-app-name-here is the one that appears as modulePrefix in your config/environment.js file.

1 Like
5

I am serving my app in a folder called expediente (sorry, this is in spanish) under the public folder of a Rails backend.

Here is a fragment of my config/environment.js file

 let ENV = {
    modulePrefix: 'expediente',
    environment,
    rootURL: '/expediente/',
    locationType: 'hash',
6

Try rootURL: '/expediente'

7

thanks @ef4 and @hectorsq . Setting the root url and location hash properly made it work. Also the default welcome page in the sample app does not show up when built with environment=production. I was not aware of it and was trying to debug why the app built with environment production differs from the normal ember serve. I couldnt find any documentation also around this . Is this by design or is my app still not loading properly

8

That’s how the welcome-page is designed – it tries not to inflate people’s production apps if they forget to remove it from package.json.

9

I don’t mean to derail the OP but this is awesome and I wonder: how come I can use require in the browser? Doesn’t it only exist in node?

10

A function named “require” is used by both CommonJS (which is node’s module loading system) and commonly provided by AMD loaders.

Ember uses an AMD loader (from the loader.js package), which adds it’s require function to the browser environment. That’s what I was referring to.

In node, when you “require” you’re running the node module resolution algorithm to find code on disk relative to your own file. In loader.js, you’re finding a module that was previously created via the “define” function. If you look in your app’s vendor.js you’ll see a lot of modules being defined.

11

Thats good to know. I think i should raise a pr on the ember welcome page repo to add this to the documentation so that newbies like me trying out ember are not surprised when we copy the dist folder to a web server and try it out. I found this thread from Sep 16 which talks about the same issue How is ember-welcome-page/ember serve's index.html so different from dist/index.html? but looks like the documentation hasn’t been updated