Proxy Content from URL with Webpack Dev Server

Posted by in Software, Tutorial

An application I’m working with has a large amount of static files (path starting with ‘/files/’) deployed on a mounted volume in Docker. They are subsequently served via nginx. for local development, I thought of two options: Add files to the local dev server (e.g. copy assets) Build a proxy to pipe the request to the nginx-served site The first option is somewhat restrictive: I’d have to make sure the files are kept in sync with the latest version. I’d have to integrate the syncing process with the build scripts….read more

Load FontAwesome Fonts with Webpack 2

Posted by in Software

TL;DR:: Add the (s)css dependency to your main (s)css file and specify where to find the fonts too. Then use the proper loaders in your webpack.config.js file. The past few days I had trouble loading the font-awesome fonts with webpack. I tried quite a few solutions: Using the font-awesome-sass-loader Manual solution webpack + font-awesome test Looking at SO (How to configure font file output directory …) and so on… Nothing seemed to work propoerly. I either had the fonts ignored or got errors of files not found. Finally, I have…read more

Make Electron work with Knex.js

Posted by in Software, Tutorial

To make my life easier (and because I hate writing SQL statements), I thought of installing an ORM. After some search, I’ve decided to use knex. Unfortunately, the moment I integrated it into my app, webpack started generating errors like: ERROR in ./~/knex/lib/dialects/maria/index.js Module not found: Error: Can’t resolve ‘mariasql’ in ‘/…/node_modules/knex/lib/dialects/maria’ @ ./~/knex/lib/dialects/maria/index.js 59:11-30 @ ./~/knex/lib/dialects ^\.\/.*\/index\.js$ @ ./~/knex/lib/index.js @ ./~/knex/knex.js @ ./src/main.ts and warnings like: WARNING in ./~/knex/lib/seed/index.js 150:11 Critical dependency: the request of a dependency is an expression Not nice! To get rid of the errors I…read more

Electron App
Use SCSS, Luke!

Posted by in Project Management, Software

Traditionally, I’ve been a LESS supporter. The way it does mixins for example seems to me more intuitive. However, I noticed that my go-to framework (bootstrap) is now doing SASS-first and then LESS. So, one adapts… and the option in angular-cli makes things less painful. What was painful was to convert a bunch of LESS code to SCSS :/ Here are some findings relative to using SCSS in my application: Webpack does it nicely via the sass-loader You can use relative, absolute and ~ paths to refer to other resources….read more

Electron and WebPack – Live Reloads

Posted by in Software, Tutorial

I wanted to create a skeleton with Electron, Angular 2, capable of live reload while in development. I’ve settled on the following framework: Electron (d’oh!) Angular 2 Angular CLI (because it makes it easy to generate boilerplate code) SASS (SCSS in fact) Webpack 2 and Babel After a lot of trial and error (and also scouring the internet for solutions), I think I reached a nice-ish solution. Following articles outline the steps and functionalities I implemented. Why angular-cli Is it alive? Use SCSS, Luke! Adding Webpack Electron-ize Send Menu Command…read more

Rise and Fall of WebPack Dev Server in My Project

Posted by in Software

Disclaimer: This is a log of my journey developing an electron app. I’m working at a small electron app and I was experimenting with webpack-dev-server, so I can try to do live reloads. First, I’ve started the app as a web app (no electron dependencies whatsoever). At this stage, running:

off npm run would allow me to load and reload every time I did a change. Perfect solution I thought and I started to add electron via a simple app. The idea was to load the scripts off a…read more