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 your NextJS applications. …
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:
react-dom@17 as dependencies, plus
babel (babeljs.io) to transpile our Application code. …
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 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 babel-loader react-docgen-typescript-loader…
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.
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. …
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 Cloudflare Workers CLI tool named
wrangler, let’s start there by installing it and configuring it. …
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.
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.
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. …
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.
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:
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
package.json file is the main file on an NPM module. It includes all the information related to it: name, licenses, main files, dependencies, configurations, etc. …
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 can concatenate all resource files and apply them on bulk. …