This is a comprehensive tutorial on Monorepos in JavaScript/TypeScript --- which is using state of the art tools for these kind of architectures in frontend applications. You will learn about the following topics from this tutorial: What is a monorepo? How to structure a monorepo architecture? How to create a monorepo? Which tools to use for a…

Let's start with a story: when people outside of my professional bubble ask me about what I am doing, I say "I build websites" . If they are curious, I add that these websites are rather complex. If they keep on asking, I try to elaborate with some examples: Facebook, Spotify, Twitter. It's not that I work for these companies, but I hope that it…

The default setup for my JavaScript projects: Prettier + ESLint. Whereas Prettier is used to autoformat my code to enforce an opinionated code format, ESLint makes sure to keep my code style in a good shape. In this brief setup guide, I want to show you how to combine Prettier with ESLint without wasting any tear. If you haven't set up Prettier yet…

A brief step by step tutorial on how to install and use ESLint in VS Code (Visual Studio Code) . ESLint supports you and teams to follow a common code style in your project. It can be used in VS Code by installing it from the VS Code Marketplace. Once you have integrated it in VS Code, you can configure ESLint to enforce a code style in your…

A brief step by step tutorial on how to install and use Prettier in VS Code (Visual Studio Code) . Prettier is an opinionated code formatter which ensures one unified code format. It can be used in VS Code by installing it from the VS Code Marketplace. Once you have integrated it in VS Code, you can configure Prettier to format your files when…

Personally I bootstrapped a lot of React projects over the last years. I always had to setup the project from scratch, however, eventually I have created my own boilerplate project on GitHub for it. As you might know, uncountable React boilerplate projects and repositories were created that way. But the article is not my attempt to advertise yet…

The previous tutorials have shown you how to set up a basic web application with Webpack 5. So far, Webpack is only used to bundle all your JavaScript files, to transpile new JavaScript features via Babel, and to serve your bundle in development mode via Webpack's Development Server. Basically that's everything that's needed to get started with…

Babel enables one writing code with JavaScript features that aren't supported by most browser yet. Perhaps you have heard about JavaScript ES6 (ES2015) , ES7, and other versions of ECMAScript specification which are up and coming for the JavaScript language. At the time of reading this, various versions may be already included in the JavaScript…

Webpack is a JavaScript bundler for your web application. In the past, you had to link JavaScript files manually in HTML files. Nowadays, Webpack takes care about it. In this tutorial, I want to walk you through a minimal Webpack setup for a JavaScript + HTML application. Afterward, you should be able to extend Webpacks features, advance your…