Webpack in development and semantic-ui setup

How do I setup webpack for development? #

Webpack documentation is so good that the answer takes up an entire section of the guide. It took me a few minutes to understand how to configure webpack-dev-server. I wanted it to serve via the public directory. The result impressed me: I could already automatically reload the application every time I saved a file. You can have a look at the configuration here.

Source maps and flow #

Reading the documentation wasn’t sufficient to make source maps work. I had to research a bit and stumbled upon an issue. It did the trick for me and I had working source maps in this commit. I’m not sure why I had to do it that way, but I assumed the documentation was out of sync and moved on to flow.

I had wanted to learn more about flow for a long time before I started my journey. I like the way flow is designed and I have always wondered how it would feel to set it up and work with it. The setup was easy, I encountered only minor issues:

• The package is called flow-bin. I assumed the package would be called flow.
• flow checks everything in the current directory, that means it checks node modules too and I did not want that.

I found an issue regarding the second point and it taught me two things:

• yarn why is awesome.
• flow can be configured to avoid checking node modules. I disagree with the design decision of having such a wide default setting. However, I don’t mind when a software has strong opinions as long as I can get along with them. Yarn is easy to configure and it is well documented, so we get along.

I pushed the configuration here; it was finally time to move on to code organisation.

Application layout #

I knew this step wasn’t strictly necessary for a toy application like passata. But the point of my journey is to learn the technology and not to just get something done. Moreover, I’m using this journey as a warm-up exercise for a bigger project where all those aspects are relevant.

My first question was:

Where do I put what?

It can take years for a community to agree on how to layout a project. I often argue that this is one of the main reasons why Rails grew popular so fast: the framework tells you where to put things. It comes handy when navigating a new code base, and that is important to me: it’s about how you communicate with other developers via simple structures and conventions. I researched the topic and read the following articles:

-Organize large React applications -How to better organize your React applications

I think I like the idea of laying out the folders of a project by its parts. I can think of pages and flows as the parts that compose a project. As I said, passata is so small that I can keep all the code in the same directory for a long time. I ended up doing a tiny commit to keep things going, but I was very happy with the experience and with what I learned.

Loading CSS with JavaScript #

At the time, I did not even know you can load CSS via JavaScript nowadays, so I had no idea how to make it work in practise. I read webpack documentation and understood I needed a new rule and a new loader. I stumbled upon a survivejs.com article and liked the website, I thought I would be consulting it often from then on. Then I realised I needed two loaders to load images and fonts too, and I made it work here. It’s not much code but this was a difficult commit. I had to declare the style-loader before the css-loader, otherwise it wouldn’t have worked. As I am new to this world, I couldn’t explain why; I did not find any documentation explaining or even just stating that this is the right order.

semantic-ui #

My initial plan was to use bootstrap, I’m familiar with it and it saved me from building embarrassingly looking pages many times. I found two React components libraries for bootstrap:

• reactstrap
• react-boostrap

They both looked nice and both gave me the impression my timing wasn’t great as they were doing major refactoring of the projects at the time. I became a tad doubtful and decided to look around to see if I could find something else. I discovered there’s an incredible number of open source UI components and I found semantic-ui. I decided to give it a try as it looked well-maintained, the react components got me excited.

Getting everything to work was the first roadblock of my experience with React and its ecosystem. It was hard to correctly import the library, the examples in the documentation did not work for me. The problem seemed too big for me to solve at once, so I made components work and then moved on to loading CSS via webpack. I tried loading semantic-ui CSS from a CDN link and everything worked, that made me realise the problem had to be in the build process. This issue helped me to figure it out. The problem was fixed in version 2.2.6, but yarn complained there was no such version. It was hard to figure out how to make all the different parts work. At that point, passata was ready to do something. I sketched the screens of the application with pencil and paper. I ended up with three screens and a dynamic menu which I will be sharing next week.

Thank you for reading me and stay tuned for the next article!