Update Toolkit to v4, switching to webpack

[stoikerty]

Why this PR exists ✨

I have been looking to create a toolkit for myself so I can use javascript on the server as well as on the client, all while having hot-reload functionality for React.

I had it running using browserify with gulp but it started to become a bit unwieldy in the way that it worked and although I had universal javascript working, I was not happy with the javascript hot-reloading solutions I found for browserify, so I decided to migrate from gulp to webpack and change the name of the toolkit from stk-toolkit to universal-dev-toolkit.

After making all of the changes, I find that webpack altough convoluted at first, works better for me and has matured to the point of being able to find anything I need or want to integrate. So after reading and reading and reading, I finally figured it all out and split my toolkit into different sections.

I put the settings for webpack in a folder called webpack and separated the source-files into a folder called src. The src-folder in turn contains a client and server-folder.

See the Readme.md for more information.

About additional features ☝️

I could have added redux and immutable, but I felt like that would be too many features for a boilerplate, making the toolkit too complex and opinionated. I don't want somebody to have to deal with knowing redux, just to get started with react or scss. I think it's likely you'll want to use your own file-structure anyway if you use redux.

Don't forget that there are always other boilerplates available in "Find your perfect React starter project" if you feel like mine doesn't suit your needs. Also if you don't care about hot-reload and prefer to stick with gulp, I have a branch toolkit-v3-gulp that still contains the old version of my toolkit.

What might be missing for now 👀

There are a few issues yet to resolve:

• The build process is not finalised. I still would like to integrate the extract-text-webpack-plugin to create separate files for the css on build. Footnote ^1 below
• Favicon-Integration. They are mentioned in the src/server/views/layout.html but are still missing. I want to dedicate some time figuring out the importing of files in webpack, when I do that I'll look into integrating the favicons as well. Footnote ^1 below
• When changing a file and refreshing the browser using a manual refresh, the server and client files will be out of sync and your browser will throw the error Warning: React attempted to reuse markup in a container but the checksum was invalid.
  • This might not be a problem. The client still runs the javascript and restarting the server automatically all the time could be bothersome. I've tried using nodemon but found it not to be ideal. I think I might leave it like this until it bothers mee too much.
  • It's highly likely that I'll be looking into different solutions like watch-babel and babel-watch. Funny how they have simliar names :)
• No tests. Are they needed in a minimal toolkit?
  I think it might be best to leave that choice up to each individual.

---

Decisions 🌁

I opted to use webpack-dev-middleware and webpack-hot-middleware for adding hot-reload functionality. I'm using vanilla HMR which covers most of the benefits people are looking for in hot-reloaded javascript.

The state of React-components is not kept as I'm looking to work with Redux. I got the idea to stop using unsafe transforms and reduce the complexity of Babel Transforms via an Article I read called "Hot Reloading in React - or, an Ode to Accidental Complexity" and the resulting discussion in a Redux pull-request.

CSS is imported using css-modules. If you have never heard about css-modules, read "CSS Modules - Welcome to the Future". It allows you to write css without using globals all over the place.

Currently there is no test-suite. I might add one if I get more exposure into using tests myself. Although I do like keeping the toolkit simple and extensible instead of adding all sorts of dependencies for the sake of having more features. Feel free to add your own if you need it.

Are you reading this? 🌟

If you are, then welcome and thanks for checking out my toolkit! If you think the toolkit could benefit from any number of things, feel free to leave any suggestions below.

Do you like this toolkit? If you do, then star the repo or leave a nice reaction on this PR! 😄

---

^1 - Added in PR #4 "Improve build process"