Does not find app level static

[khanetor]

Lets say I have an app web. Inside a template for this app, I load app.js like this {% systemjs_import 'web/app' %}. When in development mode, the system does not have problem finding this static file, but if I do python manage.py systemjs_bundle, it only tries to find this file in the root static directory. I think there should be some sort of namespace, or bundle should try to find the static at app level.

[sergei-maertens]

This is a known difficulty, have you looked at the example project? A namespace is indeed used to resolve this problem: https://github.com/sergei-maertens/django-systemjs/blob/develop/example/jspm_0_17/static/jspm.config.js see the 'packages' key, which is set to the name of the project in this case.

On Nov 16, 2016 18:33, "Kha" [email protected] wrote:

Lets say I have an app web. Inside a template for this app, I load app.js like this {% systemjs_import 'web/app' %}. When in development mode, the system does not have problem finding this static file, but if I do python manage.py systemjs_bundle, it only tries to find this file in the root static directory. I think there should be some sort of namespace, or bundle should try to find the static at app level.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/sergei-maertens/django-systemjs/issues/27, or mute the thread https://github.com/notifications/unsubscribe-auth/AFQ01jHfSbMwmPAhqsSd6haYbyPqWUm5ks5q-z57gaJpZM4K0MYe .

[khanetor]

How do you set the namespace?

I tried

System.config({
  // ...
  packages: ['web'],
  // ...
})

[sergei-maertens]

The relevant bit is:

  nodeConfig: {
    "paths": {
      "jspm_0_17/": "js/" // mapping of namespace to filesystem paths
    }
  },
  packages: {
    "jspm_0_17": { // jspm_0_17 is the namespace in this case: `import {foo} from 'jspm_0_17/foo';` for example
      "format": "esm",
      "main": "main.js",
      "meta": {
        "*.js": {
          "loader": "plugin-babel"
        }
      }
    },
  }

You also need to ensure that you ran collectstatic BEFORE running systemjs_bundle - since jspm is only concerned about the settings.STATIC_ROOT directory. jspm cannot look outside this directory.

edited to add the paths translation

[sergei-maertens]

@nlhkh did you manage to get it working?

[khanetor]

Hi Sergei,

Yes, sort of. I am still not happy with the result because the configuration seems fragile to me. I am experimenting with using a separate server to serve jspm assets, and have Django references static from this server in development mode. In production, Django expects that the static has been bundled.

Do you think this is a good approach?

[sergei-maertens]

Ah I already dreaded the day that someone would try and use this with S3 or other remote services.

Do I understand that in your case, after generating the bundles, the bundles should end up on your separate server?

This seems like a valid approach to me, and at least the foundation is there to achieve this. I'm not sure exactly how you've got this implemented, but as long as you are using django filestorages for the staticfiles, you should be able to let the bundles be saved to the remote storage. But the drawback is indeed that all the files have to be collected locally as well to be able to bundle them.

[khanetor]

I am actually using Heroku. I do not care much about CDN because once I place another front-end proxy, that front-end will act as a CDN too (Cloudflare, etc.). What I meant when I said "separate server" was a dev server, like jspm-dev-server or webpack-dev-server.

The thing with Heroku is that the build happens on Heroku side, and Heroku is not ideal to run bundle. I tried enabling a nodejs buildpack to run before python build pack, but even after install jspm, Heroku does not detect jspm in postInstall script.

[sergei-maertens]

do you have multiple or a single bundle? Since you're using the static tooling more direct, it almost feels to me (if you have a single bundle) it would be best to generate the bundle directly with jspm and output it somewhere it will be picked up by collectstatic, and then use the plain old {% static "path/to/bundle" %} strategy.

But workflows with in-memory serving like webpack and jspm (can) do are something to figure out still, I'm not even sure if it possible at all to 'merge' the workflows. I hope I'm not missing the point too much, I'm still making some assumptions about the exact workflow here.

[khanetor]

So, in the end, I ended up using django-webpack-loader. I find there are many similarity between your library and the webpack counterpart. I think you can bring over the idea of running a dev-server and have the "jspm" template tags references that server in development mode, and expect a bundle and collectstatic preprocesses in production mode. The nice thing about JSPM is that the config is so much easier, so let me know if you want to develop in this direction.

[khanetor]

The fundamental difference between webpack and jspm is that jspm does not serve the static for you, making you leveraging the existing static server in Django, thus bringing jspm static into Django pipeline. If you can run a dev-server, you can offload this burden from Django --> less Django conf --> more predictable build.

[sergei-maertens]

I think you can bring over the idea of running a dev-server and have the "jspm" template tags references that server in development mode, and expect a bundle and collectstatic preprocesses in production mode.

So, assuming that the jspm-server (or whatever it might be) listens on port 3000 and Django runserver on 8000, you'd essentially want to be able to say {% systemjs_import 'foo.js' %} should translate to <script src="http://localhost:3000/assets/foo.js"></script> instead of the <script>System.import('foo.js');</script> it currently spits out?

This seems easy enough to tackle with a setting, or am I oversimplifying things?

[khanetor]

Yes, that’s exactly it.

On 24 Nov 2016, at 20.02, Sergei Maertens [email protected] wrote:

I think you can bring over the idea of running a dev-server and have the "jspm" template tags references that server in development mode, and expect a bundle and collectstatic preprocesses in production mode.

So, assuming that the jspm-server (or whatever it might be) listens on port 3000 and Django runserver on 8000, you'd essentially want to be able to say {% systemjs_import 'foo.js' %} should translate to instead of the it currently spits out?

This seems easy enough to tackle with a setting, or am I oversimplifying things?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/sergei-maertens/django-systemjs/issues/27#issuecomment-262826485, or mute the thread https://github.com/notifications/unsubscribe-auth/ADTJWMA_RTaJy2qV_4WUPTcUG7eqfxjKks5rBdFPgaJpZM4K0MYe.

[sergei-maertens]

Okay, give me an hour ;)

[sergei-maertens]

@nlhkh I've added the settings SYSTEMJS_SERVER_URL which should cover that, can you give it a spin and report back?

[khanetor]

Wow this is much less than an hour. I will give it a try :)

On 24 Nov 2016, at 20.15, Sergei Maertens [email protected] wrote:

@nlhkh https://github.com/nlhkh I've added the settings SYSTEMJS_SERVER_URL which should cover that, can you give it a spin and report back?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/sergei-maertens/django-systemjs/issues/27#issuecomment-262827886, or mute the thread https://github.com/notifications/unsubscribe-auth/ADTJWCRW28QlmHsaurEljgsbbKLOR7lbks5rBdQ9gaJpZM4K0MYe.

[khanetor]

Thanks for this

On 24 Nov 2016, at 20.14, Sergei Maertens [email protected] wrote:

Closed #27 https://github.com/sergei-maertens/django-systemjs/issues/27 via 3d43321 https://github.com/sergei-maertens/django-systemjs/commit/3d43321af79fb72af4c9e1921aa71cd91638d592.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/sergei-maertens/django-systemjs/issues/27#event-871393802, or mute the thread https://github.com/notifications/unsubscribe-auth/ADTJWGGHP5whDIsz-KwxtGlTZAjqxY17ks5rBdQQgaJpZM4K0MYe.

[sergei-maertens]

Wow this is much less than an hour. I will give it a try :)

I've learned to always triple the estimated time ;)