Deprecation warnings and HMR

[osenvosem]

macOS 10.12.1 node 7.0.0

(node:12322) DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
staticPaths Plugin: static files path prefix "dist"

And when I head to /ssrcachingtemplatetype I see an empty page and the warning appear:

(node:12322) DeprecationWarning: Using Buffer without `new` will soon stop working. Use `new Buffer()`, or preferably `Buffer.from()`, `Buffer.allocUnsafe()` or `Buffer.alloc()` instead.

Also HMR doesn't work, WDS simply reloads a page.

[ananavati]

re: And when I head to /ssrcachingtemplatetype I see an empty page and the warning appear:

can you please tell us what mode you are running the server in? When running/testing SSR Caching one Gotcha is that it will only work in PRODUCTION mode.

SSR caching of components only works in PRODUCTION mode, since the props(which are read only) are mutated for caching purposes and mutating of props is not allowed in development mode by react.
https://github.com/electrode-io/electrode-boilerplate-universal-react-node#gotcha

[osenvosem]

@ananavati thank you for the response. Yes, in production mode it works.
There are no images loaded in the demo app in production mode because of a mismatch between the path images being served (/js/image.svg) at and path they are being looked for (/image.svg).

I'm novice in Electrode so I have some questions. 🙂
And what about not working HMR?
App is structured by type, but this is not the best practice. Do you plan change the structure to best practice (by feature)?
And is there any plan to get rid of Gulp in favour npm scripts with webpack which is the best practice today?

[ananavati]

thanks for checking out Electrode and hope you are enjoying it!

Multiple questions being asked in this thread and hope these answers provide more clarity on your questions.

Question 1: There are no images loaded in the demo app in production mode because of a mismatch between the path images being served (/js/image.svg) at and path they are being looked for (/image.svg).

Electrode-Boilerplate already supports loading of isomorphic images, refer:

• pr: 6745958
• duplicate issue: Cannot load images #31

Question 2: And what about not working HMR?

hot-reloading of jsx is already built in electrode. please refer to the README here: https://github.com/electrode-io/electrode-archetype-react-app#what-is-hot-mode

gulp hot will enable hot-reloading of jsx, for a screencast of seeing hot-reloading working in action refer to this previously filed issue/question: electrodejs/deprecated-electrode-archetype-react-app#33 (comment)

Question 3: App is structured by type, but this is not the best practice. Do you plan change the structure to best practice (by feature)?

Could you please elaborate on this question? Perhaps an example or a working POC/pr might help answer this question better.

Question 4: And is there any plan to get rid of Gulp in favour npm scripts with webpack which is the best practice today?

Initial versions of Electrode archetypes were certainly using npm scripts but we started running into a few problems and here are some of the brief benefits we feel will help make it easy and simple for developers:

Benefits

• Maintenance: While npm scripts in package.json are simple, they are restrictive to shell commands, and can be messy to maintain since the shell commands have to go in the package.json files and separated from any extra work that requires JS code.
• tasks integrated in JS: When we turn these scripts into JS files, we get the full benefits of writing any JS code as part of the build task. We no longer have to write JS scripts and then invoke them from npm scripts.
• Gulp features: By using gulp, we get to use other gulp features, particularly the streaming feature, and if we could explore use cases that can benefit.
• Community: npm scripts are generally for simple tasks, and for more complicate build tasks, the community is more a tune to a JS task runner such as grunt and gulp. Gulp being code centric vs grunt's config centric, has been gaining ground fast with a thriving supporting community. So going to gulp will be more familiar to the developer community.
• Compatibility: At the moment our build tasks being shell scripts some are only compatible for Unix. If we go with tasks written in JS it's easier to make them compatible on other OS such as Windows.
• Resource: With a large community behind gulp, there are a lot of plugins in the open source community for supporting various common build tasks and we can utilize them.

gulp scripts can still be wrapped in npm scripts here is an example of using using npm scripts to execute JS tasks in the archetype: https://github.com/electrode-io/electrode-boilerplate-universal-react-node/blob/master/package.json#L21-L24

[osenvosem]

Answer 1: Electrode-Boilerplate already supports loading of isomorphic images
There are no images after gulp build, gulp server-prod because images paths and the paths they are being served mismatch:

Answer 2: hot-reloading of jsx is already built in electrode
That is what I meant:

Full page is reloaded and server is restarted. As far as I understand nodemon shouldn't restart server on client code being changed. Maybe one should exclude client folder from monitoring.

Answer 3: Could you please elaborate on this question?
Look at the structure one of the most popular react/redux boilerplate
Good article about how to organise app
There are also a couple good ones: this and this

I saw this question was raised several times on hackernews in the comments, why electrode app is structured this way, not by feature.

[orlandodemauro]

@ananavati @osenvosem I started using electrode and I'm getting the same problem with the hot reloader, every time that i made a change the app is fully reloaded and I'm losing the app state. any suggestion on how to fix it? is there any specific config that I can use?

thank you

[lnaia]

Just to confirm that I've also had this problem since I started using electrode; on top of it, if the changes are saved fast enough (and more often than not they are, because the IDE auto saves) when the it restarts the server, it restarts too fast, and I find a "server not running" message on the browser.
Solving the HMR issue would solve this in turn.

[bubuzzz]

I am not so sure why hot reloader is so exciting. I am using Vim for my development. Not like any IDE, you can let the editor there without saving, I need to save in Vim and then moving to the other file and every time I edit a file, the whole server gonna refresh, even I haven't finished my coding yet. It is even worse because I have the habit of pressing save multiple times. If i :w 3 times, server refreshes exactly 3 times regardless there is a change or not, each time of refreshing cost many times in order to see the new change on the browser.

Can we have something like webpack, you just compile once you provide the flag --watch, otherwise, just let it as it is ???

[animesh10]

@bubuzzz : You should be able to avoid this problem by running gulp build ,to generate the build, followed by gulp server to start the server.
Typing gulp into your console will list all the available gulp tasks.
Let us know if that helps.

[jchip]

close since a new issue on HMR is opened #125, which has some more details.