Rework webpack workflow

[mcallistersean]

The current state of the frontend build works quite nicely but could use some optimisations.

I am thinking of:

• hot module replacement
• better dev/production/test configs
• more npm scripts
• more documentation

[mcallistersean]

I have started some work on this in the features/webpack-improvements branch 51f5a1b07db38f411e9a4b1553c8e2da3149c402

I have split up the configs into production and test settings, added some npm scripts ("npm run build", "npm run dev") and enabled hot module replacement

[mcallistersean]

@thammerl If you want to take a look at this branch that would be great. Hot reloading actually works, so this should speed up frontend development quite a bit. If it works for you too, I would go ahead and merge this into master.

[thammerl]

I get the following traceback when I try to run the server now:

Traceback (most recent call last):
  File "/home/thomas/workspaces/beetwo/b2-issue-tracker/b2it/lib/python3.4/site-packages/django/utils/autoreload.py", line 226, in wrapper
    fn(*args, **kwargs)
  File "/home/thomas/workspaces/beetwo/b2-issue-tracker/b2it/lib/python3.4/site-packages/channels/management/commands/runserver.py", line 37, in inner_run
    self.channel_layer = channel_layers[DEFAULT_CHANNEL_LAYER]
  File "/home/thomas/workspaces/beetwo/b2-issue-tracker/b2it/lib/python3.4/site-packages/channels/asgi.py", line 53, in __getitem__
    self.backends[key] = self.make_backend(key)
  File "/home/thomas/workspaces/beetwo/b2-issue-tracker/b2it/lib/python3.4/site-packages/channels/asgi.py", line 48, in make_backend
    routing=routing,
  File "/home/thomas/workspaces/beetwo/b2-issue-tracker/b2it/lib/python3.4/site-packages/channels/asgi.py", line 80, in __init__
    self.router = Router(self.routing)
  File "/home/thomas/workspaces/beetwo/b2-issue-tracker/b2it/lib/python3.4/site-packages/channels/routing.py", line 22, in __init__
    self.root = Include(routing)
  File "/home/thomas/workspaces/beetwo/b2-issue-tracker/b2it/lib/python3.4/site-packages/channels/routing.py", line 166, in __init__
    self.routing = Router.resolve_routing(routing)
  File "/home/thomas/workspaces/beetwo/b2-issue-tracker/b2it/lib/python3.4/site-packages/channels/routing.py", line 64, in resolve_routing
    routing = getattr(importlib.import_module(module_name), variable_name)
  File "/home/thomas/workspaces/beetwo/b2-issue-tracker/b2it/lib/python3.4/importlib/__init__.py", line 109, in import_module
    return _bootstrap._gcd_import(name[level:], package, level)
  File "<frozen importlib._bootstrap>", line 2254, in _gcd_import
  File "<frozen importlib._bootstrap>", line 2237, in _find_and_load
  File "<frozen importlib._bootstrap>", line 2226, in _find_and_load_unlocked
  File "<frozen importlib._bootstrap>", line 1200, in _load_unlocked
  File "<frozen importlib._bootstrap>", line 1129, in _exec
  File "<frozen importlib._bootstrap>", line 1471, in exec_module
  File "<frozen importlib._bootstrap>", line 321, in _call_with_frames_removed
  File "/home/thomas/workspaces/beetwo/b2-issue-tracker/issue_tracker/routing.py", line 2, in <module>
    from notifications.consumers import parse_mentions, send_comment_notification
  File "/home/thomas/workspaces/beetwo/b2-issue-tracker/notifications/consumers.py", line 10, in <module>
    from .notifications import send_email_notification, send_sms_notification
  File "/home/thomas/workspaces/beetwo/b2-issue-tracker/notifications/notifications.py", line 10, in <module>
    raise ImproperlyConfigured('Your nexmo settings are not configured correctly.')
django.core.exceptions.ImproperlyConfigured: Your nexmo settings are not configured correctly

I suppose this is related to your changes to notifications?

[thammerl]

What do you mean by "hot-reloading"? Using webpack --watch the files were already recompiled when I saved a change. Does this also automatically refresh the browser on save?

[thammerl]

Is frontend/production checked in on purpose? Looks like something that can be generated from the sources:

https://github.com/mcallistersean/b2-issue-tracker/compare/features/webpack-improvements?expand=1

[thammerl]

Ok, read a little bit about HMR and I get the difference to LiveReload now. Looks useful but quite complex as well.

[mcallistersean]

Hi,

1. that is the text message stuff, I'll try to fix it for development, where you don't want to send text messsages. You could just try to enter any nexmo settings and it should at least start up.
2. Yes, reloading modules without full page reloading
3. Yes it is, I don't really want all that npm stuff on the server. With a release (build) system that would go away
4. It's only in development ;-) and it sems to work. But i agree. It is flaky, but since only the 2 of us are working with it, might be worth the try

[mcallistersean]

1. should be fixed branch, it will only throw errors once you try to send text messages

Commit 253375e re-introduces the usual webpack --watch workflow and makes HMR optional, so we have a fallback for development

[thammerl]

:+1: Works for me. We can probably close this issue now?

[thammerl]

Where have the source maps gone? I can't find webpack in the Sources tab of the Chrome developer tools anymore. This was quite useful for debugging.

[thammerl]

Reactivating source maps for local development in pull request #28.

[mcallistersean]

Thanks, I reverted one of the commits and merged.