App Misadventures Part 2: Config

When starting a new project getting the base right is vital, you need to ensure that what you are working with will be robust enough to propel your project ahead. This is of course a daunting task, how can you ever know exactly where your project will lead you and even more if you are using unfamiliar technologies just how good will this setup be.

Config generally is something I am not a big fan working with, it always feels like a lot of work and is very time consuming to ensure things are working right. Now with a lot of bootstrapping projects that can be easier overall, however the issue remains when you need to bring together many complex pieces how can you achieve in a way that will support your project in the long term without having to do a complete rewrite.

I often feel I am somewhat unlucky with configurations, I usually am able to get to where I need to be, it just often takes sometime, some hair pulling and a bit of resetting things, that was exactly the case with this project.

I had hoped to make life easier for myself by finding a boilerplate project that would ease me in, as I have not really worked much with Electron in the past I was not sure where to start with the setup of some areas of it. I've played with it in a small way but it was still for small basic things now I have a goal of something much bigger so this has to work. I found a few promising candidates online, I've started countless React projects at this point and the React side didn't really phase me, even the boring parts of adding in Redux, React-Router-Dom, Devtool stuff, etc... the standard things although a bit of a pain they are at least managable and fairly cut and dry now.

The first boilerplate project I found looked promising as it had React and all that good stuff, and it did work for sometime. I did hit a wall when I tried adding Redux, this was the first warning sign, I just ignored it because I planned to add Redux later and could instead use Context with PouchDB as I had planned to add PouchDB and with Context it could take the place of Redux and may be better in Electron considering Redux state does not presist across windows.

Then I started to work on the login page adding in some local state, I started writing some emotion styled components trying initally to build some buttons that inherit styles from a base, this would be my second red flag, but it didn't work and errored out, it was fairly frustrating. I didn't think this was a big blocker as I told myself I'll fix this later and just use standard components for now and look into that later.

I continued on the login page and things started moving fairly well until I needed to use the useHistory hook from React Router. This was the final straw as I was using a boilerplate config created by just one guy there was of course no real support for this and considering it was telling me that I can't use a hook like I was using it, although it was not breakin any rules. I checked the React versions for mismatch it seemed that could have been the issue but even when I fixed it no dice. After about a week trying to get this to work and salvage what I had I decided it was best to try and look elsewhere for an Electron boilerplate.

This time I wanted to ensure I was using something that was very widespread and common I settled on Electron-Forge just because it seemed to contain all I wanted, I had to add in things around it. I did briefly try and use the new yarn packages but forge doesn't play so nice with it, apparently it can work but I don't think it is a major issue and one I can look into adding eventually. With Forge I decided to build out a lot of the items and somewhat frontload the functionality, considering the issues I had before I didn't want any surprises.

I had a lot of code I was aiming to move over which accelerated my pace, although I ran into issues with the Electron main process as I tried to import thrid party libraries it was throwing all kinds of errors. Luckily with a bit of a look into webpack with Electron it turns out that you need to add these external libraries into externals it is a bit obvious looking at it now but I've not had this type of issue with webpack before so was one I didn't fully expect.

This did slow me down a bit but once I added the externals everything booted as expected and I was able to get the thing running, at least from the node backend perspective. Next was the frontend and that proved a challenge before so I was not sure how it would be with this build.  

I decided I needed to add in all the React items I wanted to test and a simple test page to ensure things like routing and redux where working as expected and thankfully it worked with no issue this time. This gave me confidence in this build and after catching up to the previous build I decided this prototype would become the main build from now one and removed the old stuff for the new parts and haven't looked back since.

Setting up a project is a bit a nightmare and requires a lot of will power to get through I am pretty happy with my build now using Electron-Forge and the brand new React 17, it took me sometime to get here but now it is all working as expected and I can start to worry about the real thing, the actual application and product.

Photo by John Lockwood on Unsplash