In this article I’d like to show you how to correctly configure Puppeteer in your React project.

Puppeteer is a library developed by Google that helps us to make UI testing way easier.

First of all, let’s start by creating a simple new app by running the create-react-app package.

$ npx create-react-app my-app --template typescript

This is our simple app:


Of course, we need to install some dev-dependencies:

$ npm i -D jest puppeteer start-server-and-test ts-jest ts-node @types/jest @types/puppeteer

Now, we can setup Jest.
Create a new file in the root path of the project called “jest.config.ts”:

React is one of the most modern solutions to build web applications.
In this article, I’d like to summarise in a practical way the peculiarities of this framework.

Let’s create a new React project

First, make sure you have Node and its package manager (NPM) installed.
Then, open a new terminal:

  1. Install the create-react-app package globally
    $ npm install -g create-react-app
  2. Create the React app folder template
    $ create-react-app my-awesome-app

➡ Note: you can execute create-react-app without installing it via NPX:
$ npx create-react-app my-awesome-app

Now we have our project folder ready.
It contains several packages, you can see what’s included here.

Let’s get started

Before getting to the…

The native way to make dynamic component-based web apps.

What are WebComponents and why should I use them?

WebComponents give you the possibility to create new HTML tags.

They aren’t new. They in fact were firstly announced back in 2011 and got very popular with the launch of Polymer, in 2014. The main issue was about the browser support, but nowadays, they have been natively implemented on all modern browsers.

The idea behind WebComponents is part of the success of many modern web frameworks: making elements that could be used multiple times. Just get a look at to see what I mean.

WebComponents can be considered as the native equivalent to React, Angular or Vue.js. This…

Security of your database is one of the most important factor to consider when building a new project.

There are several ways to implement a solid authentication system.
In this article I’ll show you how to make one using JWT, completely from scratch and without the need to use third party services.

What technologies are we going to use?

  • NodeJS: a tool to server-side execute JavaScript code.
  • Express: a micro-framework to make server development faster.
  • Mongoose: a library that helps us connect to our MongoDB instance.
  • JWT (JSON Web Token): an encrypted string that gets generated by the server and is stored by the client. …

Lo sviluppo di una applicazione Android può essere effettuato in svariati modi. Lo sviluppatore ha infatti la possibilità di decidere se creare:

  • una app nativa
  • una app ibrida
  • una webapp

App native

Le applicazioni native sono generalmente le più performanti e le più ottimizzate per il sistema operativo in uso. Sono le app che andremo a sviluppare durante questa “guida”.

App ibride

Le applicazioni ibride sono applicazioni che possono essere eseguite su più sistemi operativi, rinunciando in parte alle performance ottimali delle app native. I framework più utilizzati sono per esempio:

  • Apache Cordova (di Adobe), che permette di utilizzare HTML…

Matteo Lobello

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