Webpack for connected set ups

For a long time, I had the notion that webpack could only be ran for set ups that are independent from the back end. For example SPAs that only communicate with AJAX.

I closed my mind into thinking that it had to be ran with a development server. You would make the webpack config file and use that to run the dev server. That would do all the cool things like Hot Module Replacement and having all the JS in RAM so changes would be blazing fast. Then, when you needed to actually use it for production, you would do a build and be done with it.

I blame the tutorials and webpack docs partly, because when I started looking into webpack around 2 years ago all the examples where like what I mentioned before, independent set ups.

So the only time I used webpack was for personal projects. But on my professional projects I would use gulp with require/browserify/jspm whatever was in flavor besides webpack. Until I came across a project that used it the way I wanted to.

You can use webpack to develop in a set up where you have the back end connected with the front, for example with a templating language. All you need to do is define an input file and output directory in your webpack config. Then you run webpack -w and that’s it. It will watch for changes, and then do what it does, and throw it to the output directory you specified. After that, you just point to the output file in your template like <script src="./build/index.js" />. This project does just that, as simple as possible.

You won’t benefit from HMR, but at least you CAN use webpack for these connected set ups which are much more common in the professional world.

Webpack can be simple too.

Example

I went ahead and created a very simple example for you. Click here to download it through github.

Install dependencies:

run webpack:

this will bundle what’s in the entry file and its imports and output it in the /build directory.

Check out the changes by navigating to the index.html file, or start a server in the project’s root directory with:

Some info on the project

The javascript is simple, it just imports a module and calls it. This is to demonstrate what the core of webpack is all about: bundling.

So to get that code above to work, webpack needs to be set up:

This is all webpack needs to do its job. An entry place to your app, and where to output the generated bundle. That’s it.

All the other stuff, loaders, plugins, etc. are to enhance webpack, and accommodate to your needs of using babel, SASS, css modules, etc…

2017

I didn’t set any yearly goals for this year. Yet it’s been the single most successful year I have had so far.

I am not saying the lack of goals made me more successful, in fact I think the opposite, that you can achieve more by setting goals.

Years before this one, I had a list of goals that I wanted achieved by the end of the year, and I would work towards them. They made me progress, a lot. If it wasn’t (partly) for them, I wouldn’t be where I am today.

My life had a big fucking change the last year. And it was all because of my hard work. Before this year, I was living at my grandma’s working a low paying web developer job, 50+ hours a week. I was grinding during my off-time, I read books, created side-projects, all to better myself and climb up. 3 years went by like this.

It all changed, drastically, on November last year. I started out a new job, at a place where they actually value developers. It all changed so much.

Last year I was partly dependent. This year I am fully independent. Got my own place, got my own car, got an awesome remote job as a developer, got promoted to senior developer…

23755704_10159521642830577_8965605043823763509_n

Oh and, I even got married!

It’s why I think I didn’t set any goals for this year. I was fine with the current state of things, I had actually achieved a lot of things that I wanted to. This year was like taking a breather.

I start the grind again in 2018, I have a list of goals already written down. They are more general goals though, where before I was more focused on career, I am now focused in life goals alongside my developer goals.

Happy new year!

Boilerplate: Webpack + React + Redux

A boilerplate for playing around with react, redux and react-router with the help of webpack.

Contains:

  • a working example of a filterable table which you can play around with (look below).
  • ES6 – 7 Support with Babel
  • Redux dev tools to help you keep track of the app’s state
  • hot module replacement support so you can change modules or react components without having to reload the browser
  • a webpack production config so you can build the app and make it ready for production
  • Sass support, just import your styles wherever you need them
  • eslint to keep your js readable
  • much more…

Run the app

  1. npm install
  2. npm start

Once running, if you want to hide the redux dev monitor: CTRL+H

Yes, it takes a while to load the first time you open the app.

Is the hot module replacement really working?

Yup! Take a look:

The app updates without the browser having to reload. You don’t lose state!

Build the app

npm run build

This will build the app into the “dist” directory in the root of the project. It contains the index.html along with the minified assets, ready for production.

It should look something like the above image.

I don’t understand anything!

I went ahead and wrote a detailed series of posts on this project for you. I hope it helps you understand better:

Why doesn’t it have async?

To keep it unopinionated. You choose what async library you want. If you want to check out a full example with async in it, check this simple todo-app

Understanding a Simple React, React-Router and Redux Application in ES2015. Part 2

This is the third article in a series of posts on react, redux and webpack. Others:

  1. configuring webpack
  2. Understanding a simple react, redux and react-router app in es2015, part1.

Here, we will cover the routes configuration, the actions and all the react components starting from the Root.

Continue reading “Understanding a Simple React, React-Router and Redux Application in ES2015. Part 2”