Photo by Tiger Lily from Pexels

You started creating a frontend application for your company, then another, and another and eventually you end up with a dozen frontend applications with a ton of replicated code. Tooling code, linting, tests, helper libraries and domain specific code.

You probably seen this happen before. Is not effective and is prone to errors. The solution, co-locate all code and dependencies on a single repository, in other words create a monorepo.

I will not try to explain what a monorepo is or why do you need one. As usual on all my post I just to help you build one for…


Photo by P.R.R. from Pexels

When we think “React Application” we immediately think routing, paths, server-side rendering, App root, and a bunch of other concepts inherent to how we develop applications today.

In practice, React Applications are not constrained to require routing or be dependent on server render steps.

Then, what is an Embedded React Application?

Simply put, a React frontend application you can embed on any web page, where this page is made with React or not.

Let’s start with something simple, from the React documentation itself:

We imported react@17 and react-dom@17 as dependencies, plus babel (babeljs.io) to transpile our Application code. …


Photo by Roman Koval from Pexels

From time to time I go back to an old repository and update its dependencies.

This is the example repo I used on another blog post:

I use it as a starting point for creating a React component library or just to test some quick ideas.

A couple things where missing in that repo related to the Storybook settings. Specifically some Add-ons like: @storybook/addon-docs , @storybook/addon-a11y and @storybook/addon-viewport

Storybook Docs

The @storybook/addon-docs is the most important of all. It allows us to write stories with rich details using MDX (Markdown with JSX, https://mdxjs.com/)

To install it:

$ yarn add -D @storybook/addon-docs react-is…

https://www.pexels.com/photo/white-and-black-music-mixer-164746/

Cloudflare Workers had become my favorite Serverless platform. The introduction of Workers KV, a storage service, added a huge potential for new applications. One of this applications is Feature Flags.

What are Feature Flags?

Feature Flags or feature toggle is a software engineering technique to hide, enable or disable features on applications during runtime. Is also used to provide runtime configurations to applications making them environment agnostic.

Disabling, Enabling or Enhancing features is achieved by toggling a boolean Flag, false by default, once we want to enable it we don’t need to go back to the code change the logic and redeploy our application…


Photo by Daria Shevtsova from Pexels

In my previous post, we described how to use Cloudflare Workers to deploy a static generated website directly to the edge. We also described a way to do faster deploys and rollbacks using a commit hash to decide what version of our Application we will be serving to users.

In this post, we will continue working on top of that to add another piece of our Application’s puzzle, an API. We are going to build it on Cloudflare Workers on the edge and using Workers KV as a data store.

From the last post, we got a handle on the…


Photo by Abhiram Prakash from Pexels

Static Site Generators are becoming the de-facto way to build and deploy web applications that don’t require Server Side Rendering. These are apps with pages that don’t require an actual web server to dynamically render the content. The types of pages that do need a server are the often ones protected by an authentication wall. There may be other sites where the dynamic content is generated on the server for SEO.

Hugo, Gatsby, and NextJS are some of the most popular solutions in this space. They all build output composed of a set of files (HTML, CSS, JavaScript, Images) in…


This article is the first of several in a series of posts aimed at helping frontend devs build applications with the set of tools I use daily with fairly good success.

From https://www.pexels.com/

As a frontend engineer building a web application, your application will likely need to provide security with authenticated access to some user resources. This usually happens in the form of a login page which anybody can access and other user resource pages that should be secure and only accessible to authenticated users.

Auth0 (https://auth0.com/) is one of the leading authentication and authorization services. …


Photo by Sharon McCutcheon from Pexels

Code reusability is important, and component reusability in the world of User Interface development is very important. Users have a great sensibility for UI changes. Reusing components across your applications gives them a better overall experience.

You don’t necessarily need TypeScript to create a React component library, but adding it will make your library more robust and having type definitions certainly improves the reusability factor and developer experience. Plus, your library users will have an easier time integrating it into their applications.

Starting Base

A Component Library is like any other NPM Module. We can start with a regular TypeScript NPM module…


Creating an NPM module, public or private, is not a hard task, but it can be a little bit tedious for sure.

This post serves as a guide to quickly bootstrap an NPM module with a set of requirements:

  • TypeScript transpilation to ES5 and ES6: using TypeScript and Rollup
  • Tests: using Jest
  • Linting: via StandardJS
  • Formatting: with Prettier

1. Create a Folder

Use the name of your module.

If the name you picked is already used, you can use NPM scopes (https://docs.npmjs.com/about-scopes)

$ mkdir my-module
$ cd my-module

2. Create package.json File

package.json file is the main file on an NPM module. It includes all the information related…


Photo by Tom Fisk from Pexels

On previous post (https://itnext.io/deploy-an-app-on-kubernetes-gke-with-kong-ingress-letsencrypt-and-cloudflare-94913e127c2b) we learned how to deploy an application with 2 micro-services (frontend and backend) to Kubernetes, using Kong Ingress, LetsEncrypt to provide TLS certificates and Cloudflare for proxy and extra security.

In this post we want to do some updates to our deployed application, roll them back in the case of errors and last but not least use multiple environments so we can test our application before deploying to production.

First I will re-deploy my original application. (I always delete un-used applications, no need to spend money on hosting them)

One nifty feature of kubectl is you…

Ernesto Freyre

Software Engineer @ Coalition Inc., Miami FL

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store