I’m interested in serving my donejs app from a different base path than ‘/’, but can’t seem to find the right config setting (if any currently exists) to set that? Right now if I use nginx to proxy /foo to /, it still tries to load resources from places like ‘/dist/’ when I need them to load from ‘/foo/dist/’.
I think you need to configure the root for this.
https://canjs.com/docs/can.route.pushstate.root.html
Let me know if that doesn’t help.
I think that should help link generation, but “done-serve” still doesn’t expose an option to run under a different root, does it?
Also, that code snippet throws a null pointer error:
My app.js:
import Map from "can/map/";
import route from "can/route/";
import 'can/map/define/';
import 'can/route/pushstate/';
const AppViewModel = Map.extend({
define: {
title: {
value: 'Admin',
serialize: false
}
}
});
route.pushstate.root = "/admin/";
route('admin/:page', { page: 'home' });
export default AppViewModel;
error on npm start:
done-serve starting on http://localhost:8080
Potentially unhandled rejection [3] TypeError: Error loading "webadmin@0.0.0#index.stache!done-autorender@0.8.0#autorender" at file:/Users/jaredstehler/dev/src/webadmin/src/index.stache
Cannot set property 'root' of undefined
at execute (file:/Users/jaredstehler/dev/src/webadmin/src/app.js!eval:21:28)
at doExecute (/Users/jaredstehler/dev/src/webadmin/node_modules/steal-es6-module-loader/dist/es6-module-loader.src.js:2135:22)
at ensureEvaluated (/Users/jaredstehler/dev/src/webadmin/node_modules/steal-es6-module-loader/dist/es6-module-loader.src.js:2182:11)
Ah, I’m not sure if it exposes it. However, you can use the done-ssr-middleware package yourself and wire it up like:
@daffl @matthewp Do either of you know if can-server takes this option?
yikes, the docs are wrong, it should be:
can.route.bindings.pushstate
Yeah, done-serve doesn’t have such an option. I’m not sure it makes since for it to. If you have another server in front of it and are proxying /foo to done-serve’s / that should work fine. If you have a Node server then @justinbmeyer’s suggestion is the way I would go, use either done-ssr-middleware (if using Express) or done-ssr directly, that way you can control the path however you want.
On the front-end Steal should request JavaScript and CSS front whatever path it is currently at, if it is as /foo it should request /foo/dist/bundles.
It sounds maybe like you are having problems with SSR though, So i think the renderingBaseURL option is what you need. If you take a look at the in-depth guide it shows what you need to do, basically:
"system": {
...
"envs": {
"server-production": {
"renderingBaseURL": "https://example.com/foo/"
}
}
}
This will cause it to render <link> and <script> urls relative to that.
Let me know if you’re having other problems.
thanks, I’ll give that a shot. do I use “server-production”, or “production”, since I’m not deploying to firebase?
server-production. This essentially means that when done-serve is rendering, what URL does it use to render things like inside a <link>.
Not working for me; I’ve added the following to my package.json:
"envs": {
"server-production": {
"renderingBaseURL": "/admin/"
}
},
Here’s my proxy config:
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
location /admin {
proxy_pass http://localhost:8080/;
proxy_redirect default;
}
}
Generated html for NODE_ENV=production npm start (using done-serve) still has:
<link rel="stylesheet" href="/dist/bundles/webadmin/index.css" asset-id="bundles/webadmin/index.css!done-css@2.0.3#css"><link rel="stylesheet" href="/dist/bundles/webadmin/home.css" asset-id="bundles/webadmin/home.css!done-css@2.0.3#css">
So I changed the base url to an absolute one, and now many things are respecting that in the rendered output. But, my css files still aren’t rendering correctly in the html links:
<link rel="stylesheet" href="http://myapp.io/admin/bundles/webadmin/index.css" asset-id="bundles/webadmin/index.css!done-css@2.0.3#css">
<link rel="stylesheet" href="http://myapp.io/admin/bundles/webadmin/home.css" asset-id="bundles/webadmin/home.css!done-css@2.0.3#css">
when it should be "/admin/dist/bundles/webadmin/home.css"
I notice my index template has an is production check at bottom:
{{#switch env.NODE_ENV}}
{{#case "production"}}
<script src="{{joinBase 'node_modules/steal/steal.production.js'}}" main="webadmin/index.stache!done-autorender"></script>
{{/case}}
{{#default}}
<script src="node_modules/steal/steal.js"></script>
{{/default}}
{{/switch}}
do i need similar for top?
<can-import from="bootstrap/less/bootstrap.less!" />
<can-import from="webadmin/styles.less!" />
<can-import from="webadmin/app" export-as="viewModel" />
I’ve started from the base generator, my index stache has the following at top:
<can-import from="webadmin/styles.less!" />
<can-import from="webadmin/app" export-as="viewModel" />
I do notice that the bottom has some kind of flag for production, do I need that?
{{#switch env.NODE_ENV}}
{{#case "production"}}
<script src="{{joinBase 'node_modules/steal/steal.production.js'}}" main="webadmin/index.stache!done-autorender"></script>
{{/case}}
{{#default}}
<script src="node_modules/steal/steal.js"></script>
{{/default}}
{{/switch}}
Do I need some kind of is production switch like I see at the bottom?
{{#switch env.NODE_ENV}}
{{#case "production"}}
<script src="{{joinBase 'node_modules/steal/steal.production.js'}}" main="webadmin/index.stache!done-autorender"></script>
{{/case}}
{{#default}}
<script src="node_modules/steal/steal.js"></script>
{{/default}}
{{/switch}}
currently at top is:
<can-import from="bootstrap/less/bootstrap.less!" />
<can-import from="webadmin/styles.less!" />
<can-import from="webadmin/app" export-as="viewModel" />
Did you change the renderingBaseURL to http://myapp.io/admin/?
Going to see if I can recreate the issue in done-css.
I’m seeing the same thing in an app @Jared_Stehler.
Can you change the renderingBaseURL to http://myapp.io/admin/dist/. I’ll have to think about it some more, but this might be correct behavior. This is how CDN deployments work as well, the dist folder is your renderingBaseURL.
But /admin/ is not working and I’m not sure why, filed a bug here: https://github.com/donejs/css/issues/44
I can’t remember if this was done on purpose or not, looking into it.