Forem: Feralamillo

Deploy a React App to AWS S3 with GitHub Actions: A Step-By-Step Guide

Feralamillo — Mon, 08 Aug 2022 16:02:16 +0000

In this beginner-friendly article, you can find out how to deploy your React App to AWS S3 using GitHub Actions.

Photo by Lautaro Andreani on Unsplash

After reading different articles, it was a little bit difficult to get all the pieces of the puzzle together so I have decided to create a step-by-step guide for beginners so you can deploy your app in less than 10 minutes.

This is what is covered in case you want to jump to a particular section:

Create React App
AWS: Create IAM user
AWS: Create S3 Bucket
GitHub Actions

1. Create React App

From your favourite terminal, run:

yarn create react-app test-aws-github-actions --template typescript

For more information about the script, you can visit the documentation of create react app. If you run the project with yarn start you should be able to see the classic template.

Create React App Template

I also want to cover how to use environment variables so I’m going to add a .env file and update the main text. The environment variable is:

REACT_APP_MAIN_TEXT="Testing AWS"

It’s a very simple text but it will help us understand the process. You can see the change in the git history in the image. It’s just displaying the text on the main screen.

As you can see, the text from the environment variable is displayed on the main page below the React icon.

React with environment variable

Now you can push the code to a Github repository and let’s start looking at the AWS side of things.

2. AWS: Create IAM user

The first thing that you need is a user in AWS. From the IAM console, add a user. There are 5 steps in the process of creation

Create User Step 1

Name the user as you want. I’m creating a user only for this project so I have named it the same way. In GitHub actions, we need a key so you can select it in the initial screen.

IAM create user 1

Create User Step 2

The second step is to provide permissions to the user. You can select AdminsitratorAccess

IAM create user 2

Create User Step 3

This step allows you to add tags. Feel free to add any relevant things that can be useful for your admin.

IAM create user 3

Create User Step 4

Now you can review the information provided in the previous steps. This will create the user for you so check the details to ensure it’s all correct.

IAM create user 4

Create User Step 5

This is the summary of the user. You’ll see an access key and a secret that you need to save as it will be used by the GitHub actions.

IAM create user 5

3. AWS: Create S3 Bucket

In AWS, create an S3 bucket: https://s3.console.aws.amazon.com/s3/bucket/create

Here, it’s important to enable the ACLs; otherwise, you’ll get an error from GitHub actions.

Create AWS S3

And unblock the public access.

Create AWS S3

In the properties area, you can find a section for static website hosting. Enable the static website hosting and update the Index document and Error document to index.html.

After you save the changes, you will see the URL for the hosting.

Static Website Hosting AWS S3

That is all with AWS.

4. GitHub actions

In the repo, create a new file.

name: Deploy AWS
on:
  push:
    branches:
      - main

env:
  REACT_APP_MAIN_TEXT: "Successfully deployed in AWS"
  AWS_S3_BUCKET: ${{ secrets.AWS_BUCKET_NAME }}
  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
  AWS_REGION: ${{ secrets.AWS_REGION }}
  SOURCE_DIR: "build"

jobs:
  build:
    runs-on: ubuntu-latest

strategy:
      matrix:
        node-version: [16.x]

steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

- name: Yarn Install
      run: yarn install

- name: Staging Build
      run: yarn build

- name: Deploy to S3
      uses: jakejarvis/s3-sync-action@master
      with:
        args: --acl public-read --follow-symlinks --delete

In GitHub, update the action secrets including:

AWS_BUCKET_NAME
AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
AWS_REGION

GitHub secrets

Once you commit and push, you’ll see the action running:

GitHub Action

If you check your S3 bucket, you’ll see all the files from the build folder:

AWS S3 Files deployed from GitHub Actions

And you’ll be able to see your React app working:

React App Deployed in AWS

Troubleshooting

Issues with paths

If you haven’t set up the hosting, you will see an issue with some paths. This is because the bucket will manage the URLs and with React, as it’s a single-page app, it needs all the routes pointing at the index.html so React can manage the routing by itself.

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
</Error>

To fix it, you need to make a small update in the S3 configuration in the area of Website Hosting. See the step.

Issues with ACL

If you are getting an error related to ACL in your GitHub actions, it is because ACLs are disabled. You need to enable them in the AWS S3 config.

upload failed: build/asset-manifest.json to s3://***/asset-manifest.json An error occurred (AccessControlListNotSupported) when calling the PutObject operation: The bucket does not allow ACLs
upload failed: build/robots.txt to s3://***/robots.txt An error occurred (AccessControlListNotSupported) when calling the PutObject operation: The bucket does not allow ACLs
upload failed: build/logo512.png to s3://***/logo512.png An error occurred (AccessControlListNotSupported) when calling the PutObject operation: The bucket does not allow ACLs
upload failed: build/static/js/787.e67aebaf.chunk.js.map to s3://***/static/js/787.e67aebaf.chunk.js.map An error occurred (AccessControlListNotSupported) when calling the PutObject operation: The bucket does not allow ACLs
upload failed: build/static/css/main.e6c13ad2.css to s3://***/static/css/main.e6c13ad2.css An error occurred (AccessControlListNotSupported) when calling the PutObject operation: The bucket does not allow ACLs

To fix it, you need to make a small update on the AWS S3 config enabling ACLs.

That’s it, thank you.

Mocking date.now() with jest.

Feralamillo — Thu, 01 Oct 2020 10:18:28 +0000

Mocking Date.now() in a jest unit test.

jest
 .spyOn(global.Date, 'now')
 .mockImplementationOnce(() =>
    new Date('2010-10-10T10:10:10.100Z').valueOf()
  );

Gatsby Typescript and Sass conf

Feralamillo — Wed, 01 Apr 2020 18:01:01 +0000

If you are also very fan of React with Typescript and you want to start working with Gatsby this post is for you. I'm going to cover how to setup the basic environment including Typescript, Sass, linting and prettier for Gatsby.
I have been using React mainly with create-react-app as it is a nice tool that comes ready to use specially with npx create-react-app --template typescript. Recently I see that Gatsby is getting more and more importance so I'm very eager to try it.

Gatsby typescript

The create react app templates are called starters in Gatsby. I have been checking 2 typescript starters comparing with the javascript version and don't provide as much value as the original version:

Gatsby starter typescript
Gatsby starter typescript plus

Until these projects don't evolve a little bit I'm going to do small modifications to the basic Gatsby. These also has the benefit that the core version is usually better maintained. We are going to set it up in less than 5 minutes with these 3 steps:

Install Gatsby
Install typescript and update configuration
Update files

1. Install Gatsby

Gatsby can be installed globally in your computer and then using the cli commands or you can just use directly npx. I prefer to avoid installing more things so I'll go with the second one. From the terminal:
npx gatsby new <project-name>

This will take a couple of minutes and install all the necessary stuff. When opening the project, you can see inside the srcfolder:

| src
| -- components
| -- images
| -- pages

Components and pages have some javascript files. To verify that everything works you can run npm start and you'll see the app in localhost:8080.
If you want, as Gatsby doesn't come with a git, I suggest that you initialize it at this point.

2. Install typescript and update configuration

To have typescript in gatsby you need to install gatsby-plugin-typescript.

npm i -E gatsby-plugin-typescript

After it's installed, you'll need to update the gatsby config (gatsby-config.js ) including the plugin. The file should look something like this.

// gatsby-config.js
module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-plugin-typescript`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

Create the file tsconfig.json in the root of the project to include the typescript configuration:

// tsconfig.json
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "baseUrl": "src",
    "paths": {
      "src/*" : ["*"],
    }
  },
  "include": ["src"]
}

As before, to verify that everything works, just run npm start and it should work as before. The files are still in javascript so we haven't done much that can break for now.

3. Update files

At this stage, you can just update the .js/.jsx files to .ts/.tsx or, if you have already initialize git, update the filenames using git. Don't worry, here is the code:
Using git:

git mv src/components/header.js src/components/header.tsx
git mv src/components/image.js src/components/image.tsx
git mv src/components/layout.js src/components/layout.tsx
git mv src/components/seo.js src/components/seo.tsx
git mv src/pages/404.js src/pages/404.tsx
git mv src/pages/index.js src/pages/index.tsx
git mv src/pages/page-2.js src/pages/page-2.tsx

Updating the name directly:

mv src/components/header.js src/components/header.tsx
mv src/components/image.js src/components/image.tsx
mv src/components/layout.js src/components/layout.tsx
mv src/components/seo.js src/components/seo.tsx
mv src/pages/404.js src/pages/404.tsx
mv src/pages/index.js src/pages/index.tsx
mv src/pages/page-2.js src/pages/page-2.tsx

Last thing, for the formatting with prettier, you also need to update the scripts section in package.json:

"scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{tsx,ts,js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },

Now you can do npm start to verify that everything works as expected.

Gatsby with Sass

1. Install dependencies

We need to install node-sass and the plugin gatsby-plugin-sass so it can work.

npm i -E gatsby-plugin-sass node-sass

2. Update gatsby config

Include the plugin gatsby-plugin-sass in the gatsby configuration.

// gatsby-config.js
module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-sass`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-plugin-typescript`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

3. Update files

Once the configuration has updated, we can change the .css files to .scss. In the initial installation of gatsby there is only one file which is the layout:

git mv src/components/layout.css src/components/layout.scss

Remeber to also update the import of this file. It only shows in src/components/layout.tsx

/**
 * Layout component that queries for data
 * with Gatsby's useStaticQuery component
 *
 * See: https://www.gatsbyjs.org/docs/use-static-query/
 */
import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import Header from "./header"
import "./layout.scss"

Bob's your uncle! You can verify that everything works doing npm start

Improvements

As usual, there is always room for improvement. If you have any ideas or suggestions please leave a comment below.

Bootstrap in Create React App Typescript

Feralamillo — Wed, 11 Mar 2020 10:16:02 +0000

After setting up the basic configuration for linting and testing is time to start working on the proper project. To make the development faster, the best is to use some frontend component library so we can have a good styling.

Bootstrap is one of the most extended options out there, there is plenty of documentation so I’m going to cover how to set it up including a custom colour template. As usual, my aim is to have it working in less than 10 minutes.

1. Install dependencies

npm i bootstrap node-sass --exact

As a clarification, we are installing bootstrap for the library and node-sass to be able to work with .scss files.

2. Display some elements

To verify if we are doing things properly, let’s add a screen. To showcase the configuration I’m using the Album example from bootstrap mostly updatingclass for className and splitting the bits into components for easier readability.

Using App as the initial component that will have different components inside.

// src/App.tsx

import React from 'react';

import { Header } from './components/header';
import { Main } from './components/main';
import { Footer } from './components/footer';

import './styles.css';

export const App = () => {
 return (
  <>
   <Header />
   <Main />
   <Footer />
  </>
 );
};

export default App;

Header

// src/components/header.tsx

/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react';

export const Header = () => {
 return (
  <header>
   <div className="collapse bg-dark" id="navbarHeader">
    <div className="container">
     <div className="row">
      <div className="col-sm-8 col-md-7 py-4">
       <h4 className="text-white">About</h4>
       <p className="text-muted">
        Add some information about the album below, the author, or any
        other background context. Make it a few sentences long so folks
        can pick up some informative tidbits. Then, link them off to
        some social networking sites or contact information.
       </p>
      </div>
      <div className="col-sm-4 offset-md-1 py-4">
       <h4 className="text-white">Contact</h4>
       <ul className="list-unstyled">
        <li>
         <a href="#" className="text-white">
          Follow on Twitter
         </a>
        </li>
        <li>
         <a href="#" className="text-white">
          Like on Facebook
         </a>
        </li>
        <li>
         <a href="#" className="text-white">
          Email me
         </a>
        </li>
       </ul>
      </div>
     </div>
    </div>
   </div>
   <div className="navbar navbar-dark bg-dark box-shadow">
    <div className="container d-flex justify-content-between">
     <a href="#" className="navbar-brand d-flex align-items-center">
      <svg
       xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)"
       width="20"
       height="20"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
       className="mr-2"
      >
       <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
       <circle cx="12" cy="13" r="4" />
      </svg>
      <strong>Album</strong>
     </a>
     <button
      className="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbarHeader"
      aria-controls="navbarHeader"
      aria-expanded="false"
      aria-label="Toggle navigation"
     >
      <span className="navbar-toggler-icon" />
     </button>
    </div>
   </div>
  </header>
 );
};

Main

// src/components/main.tsx

import React from 'react';

import { Jumbotron } from './jumbotron';
import { Card } from './card';

export const Main = () => {
 return (
  <main role="main">
   <Jumbotron />
   <div className="album py-5 bg-light">
    <div className="container">
     <div className="row">
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
     </div>
    </div>
   </div>
  </main>
 );
};

Jumbotron

// src/components/jumbotron.tsx

/\* eslint-disable jsx-a11y/anchor-is-valid \*/
import React from 'react';

export const Jumbotron = () => {
 return (
  <section className="jumbotron text-center mb-0 bg-white">
   <div className="container">
    <h1 className="jumbotron-heading">Album example</h1>
    <p className="lead text-muted">
     Something short and leading about the collection below—its contents,
     the creator, etc. Make it short and sweet, but not too short so folks
     don't simply skip over it entirely.
    </p>
    <p>
     <a href="#" className="btn btn-primary m-2">
      Main call to action
     </a>
     <a href="#" className="btn btn-secondary m-2">
      Secondary action
     </a>
    </p>
   </div>
  </section>
 );
};

Card

// src/components/card.tsx

/\* eslint-disable jsx-a11y/anchor-is-valid \*/
import React from 'react';

export const Card = () => {
 return (
  <div className="col-md-4">
   <div className="card mb-4 box-shadow">
    <img
     className="card-img-top"
     src="[http://picsum.photos/200/200](http://picsum.photos/200/200)"
     alt="Card"
    />
    <div className="card-body">
     <p className="card-text">
      This is a wider card with supporting text below as a natural lead-in
      to additional content. This content is a little bit longer.
     </p>
     <div className="d-flex justify-content-between align-items-center">
      <div className="btn-group">
       <button
        type="button"
        className="btn btn-sm btn-outline-secondary"
       >
        View
       </button>
       <button
        type="button"
        className="btn btn-sm btn-outline-secondary"
       >
        Edit
       </button>
      </div>
      <small className="text-muted">9 mins</small>
     </div>
    </div>
   </div>
  </div>
 );
};

Footer

// src/components/footer.tsx

/\* eslint-disable jsx-a11y/anchor-is-valid \*/
import React from 'react';

export const Footer = () => {
 return (
  <footer className="text-muted py-5">
   <div className="container">
    <p className="float-right">
     <a href="#">Back to top</a>
    </p>
    <p>
     Album example is &copy; Bootstrap, but please download and customize
     it for yourself!
    </p>
   </div>
  </footer>
 );
};

If you have copied and pasted the code your app should look something like this.

App without bootstrap

As you can see the html is there but there is no styling at all. That makes sense as we haven’t included bootstrap yet. Let’s do it!

2. Bootstrap configuration

2.A. Full version

This is the easy way of importing bootstrap in case you are happy with the default variables such as colours and measures. It’s very straightforward and easy to configure.

First of all, you need to import bootstrap at the beginning of the project so it can be overridden with your customization. The first file from your project is usually src/index.tsx so we just need to add a line.

import 'bootstrap/dist/css/bootstrap.css';

So the file should look like this:

import 'bootstrap/dist/css/bootstrap.css';
import \* as React from 'react';
import { render } from 'react-dom';

import App from './App';

const rootElement = document.getElementById('root');
render(<App />, rootElement);

And that small line has a big impact.

App with bootstrap

2.B Bootstrap Themes

If you are interested in a proper customization overwriting bootstrap defaults, the good news is that it can be done!

In order to do that, you just need to create a custom scss file changing the bootstrap variables values and after import the bootstrap file. I usually place it in src/css/bootstrap.scss. Let’s start by only importing the bootstrap styling.

// src/css/bootstrap.scss

// Import Bootstrap and its default variables
[@import](http://twitter.com/import) "node\_modules/bootstrap/scss/bootstrap";

Now we import the custom styling in index.tsx and everything is still working.

// src/index.tsx

import './css/bootstrap.scss';

import \* as React from 'react';
import { render } from 'react-dom';

import App from './App';

const rootElement = document.getElementById('root');
render(<App />, rootElement);

Let’s update the main colours of the app for the ones in the palette that I have generated randomly using the brilliant tool coolors.

Usually the variables should go in their own file but to make it easier to read in this example, I’m going to include them directly on the bootstrap file. So the file should look like this:

// src/css/bootstrap.scss

$darkLiver: rgba(84, 73, 75, 1);
$isabelline: rgba(241, 247, 237, 1);
$etonBlue: rgba(145, 199, 177, 1);
$dingyDungeon: rgba(179, 57, 81, 1);
$flax: rgba(227, 208, 129, 1);

$theme-colors: (
  "primary": $isabelline,
  "secondary": $darkLiver,
  "light": $etonBlue,
  "dark": $dingyDungeon
);

$white: $flax;

$grid-breakpoints: (
  xs: 0,
  sm: 700px,
  md: 900px,
  lg: 1200px,
  xl: 1500px,
  xxl: 2300px
);

$container-max-widths: (
  sm: 600px,
  md: 800px,
  lg: 1100px,
  xl: 1300px,
  xxl: 2000px
);

[@import](http://twitter.com/import) "node\_modules/bootstrap/scss/bootstrap";

And the page reloads looking different

App with bootstrap and custom variables

Let’s see how the breakpoints have changed the visual also. As the card is set to change on breakpoints and we have increased the value to 900px we can clearly see the difference.

Improvements

As usual, there is always room for improvement. If you have any comments or suggestions please leave a comment below.

Create react app typescript: testing with jest and enzyme

Feralamillo — Wed, 26 Feb 2020 16:11:02 +0000

Istanbul coverage report

Get your unit testing configuration ready in less than 10 minutes. In this article, you can find how to get jest and enzyme ready for your tests and Istanbul to collect the coverage.

Pre-requisite

As a first step, I’m going to install create react app with the typescript template.

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

It will take some time installing. I have included two versions, one for non-ejected versions of create-react-app and one for the ejected versions. I think the best is to avoid ejecting create-react-app as all the webpack config is taken care of. So, if you haven’t ejected, don’t do it!

Step 1: Install dependencies

npm i -D ts-jest jest-fetch-mock enzyme enzyme-adapter-react-16 enzyme-to-json [@types/enzyme](http://twitter.com/types/enzyme) [@types/enzyme-adapter-react-16](http://twitter.com/types/enzyme-adapter-react-16) --save-exact

Step 2: Include config files

Without ejecting

package.json

"jest": {
    "collectCoverageFrom": [
      "src/\*\*/\*.{js,jsx,ts,tsx}",
      "!src/\*\*/\*.d.ts",
      "!src/index.tsx",
      "!src/serviceWorker.ts"
    ],
    "coveragePathIgnorePatterns": [
      "./src/\*/\*.types.{ts,tsx}",
      "./src/index.tsx",
      "./src/serviceWorker.ts"
    ],
    "coverageReporters": [
      "json",
      "lcov",
      "text-summary",
      "clover"
    ],
    "coverageThreshold": {
      "global": {
        "statements": 95,
        "branches": 95,
        "lines": 95,
        "functions": 95
      }
    },
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node\_modules/ts-jest"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node\_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
      "src/(.\*)$": "<rootDir>/src/$1"
    }
  }

src/setupTests.ts

import Enzyme from 'enzyme';
import ReactSixteenAdapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new ReactSixteenAdapter() });

Ejected version

In case you decide to eject create-react-app

config/jest/setupEnzyme.ts

import Enzyme from 'enzyme';
import ReactSixteenAdapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new ReactSixteenAdapter() });

config/jest/setupJest.ts

import { GlobalWithFetchMock } from 'jest-fetch-mock';

const customGlobal: GlobalWithFetchMock = global as GlobalWithFetchMock;
customGlobal.fetch = require('jest-fetch-mock');
customGlobal.fetchMock = customGlobal.fetch;

config/jest/typescriptTransform.js

// Copyright 2004-present Facebook. All Rights Reserved.
'use strict';
const tsJestPreprocessor = require('ts-jest/preprocessor');

module.exports = tsJestPreprocessor;

jest.config.js

module.exports = {
  roots: ['<rootDir>/src'],
  preset: 'ts-jest',
  globals: {
    'ts-jest': {
      diagnostics: true,
    },
  },
  collectCoverageFrom: [
    'src/\*\*/\*.{js,jsx,ts,tsx}',
    '!src/\*\*/\*.d.ts',
    '!src/serviceWorker.ts',
    '!src/setupTests.ts',
    '!src/index.tsx',
  ],
  setupFiles: ['./config/jest/setupJest.ts', './config/jest/setupEnzyme.ts'],  
  coveragePathIgnorePatterns: ['./src/\*/\*.types.{ts,tsx}'],
  coverageReporters: ['json', 'lcov', 'text-summary', 'clover'],
  coverageThreshold: {
    global: {
      statements: 95,
      branches: 95,
      lines: 95,
      functions: 95,
    },
  },
  snapshotSerializers: ['enzyme-to-json/serializer'],
  testMatch: ['<rootDir>/src/\*\*/\*.test.{js,jsx,ts,tsx}'],
  automock: false,
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node\_modules/ts-jest',
    '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
    '^(?!.\*\\.(js|jsx|ts|tsx|css|json)$)':
      '<rootDir>/config/jest/fileTransform.js',
  },
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node\_modules/ts-jest',
    '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
    '^(?!.\*\\.(js|jsx|ts|tsx|css|json)$)':
      '<rootDir>/config/jest/fileTransform.js',
  },
  modulePaths: [],
  moduleNameMapper: {
    '^react-native$': 'react-native-web',
    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
    'src/(.\*)$': '<rootDir>/src/$1',
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};

Step 3: scripts

Without ejecting

package.json

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
**"test:coverage": "react-scripts test --coverage --runInBand --watchAll=false",**
    "eject": "react-scripts eject",
    "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
    "format": "prettier --write src/\*\*/\*.{ts,tsx,scss,css,json}",
    "isready": "npm run format && npm run lint && **npm run test:coverage** && npm run build"
  },

Ejected version

package.json

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
**"test:coverage": "node scripts/test.js --env=jsdom --coverage --runInBand --watchAll=false",**
    "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
    "format": "prettier --write src/\*\*/\*.{ts,tsx,scss,css,json}",
    "isready": "npm run format && npm run lint && **npm run test:coverage** && yarn build"
  },

Step 4: Creating first tests

As we already have the component with a test let’s just update that one. I prefer to always create a folder called tests to separate them from the components.

tests/App.test.tsx

import React from 'react';
import { shallow } from 'enzyme';

import App from '../App';

test('renders the component', () => {
  const component = shallow(<App />);

  expect(component).toMatchSnapshot();
});

When running npm run test a new snapshot will be created and there will be a new folder generated __snapshots__ with it.

running tests

Improvements

I’m always looking for feedback so please leave any suggestions or recommendations below.

Create react app typescript: eslint and prettier

Feralamillo — Wed, 12 Feb 2020 15:11:01 +0000

Take your typescript create-react-app to the next level with a nice code format.

If you follow these steps, you’ll have linting and prettier set up in less than 10 minutes.

I’m just setting up a project and thought it could be helpful for others to have a small guide with the main steps. Create-react-app is quite awesome to be honest and including some extra configuration can take it even further. I’ll be creating some posts covering nice features without ejecting.

As always, there is always room for improvement. I’m using the predefined configurations form airbnb, react-app and prettier in order to go faster. If you prefer to have your own rules go ahead.

Let’s cut to the chase!

Pre-requisite

As a first step, I’m going to install create react app with the typescript template.

npx create-react-app formatting-project --template typescript

It will take some time installing.

Step 1: Install dependencies

For linting:

npm i -D --save-exact eslint eslint-config-airbnb eslint-config-airbnb-typescript eslint-config-prettier eslint-config-react-app eslint-import-resolver-typescript eslint-loader eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks babel-eslint [@typescript](http://twitter.com/typescript)-eslint/parser [@typescript](http://twitter.com/typescript)-eslint/eslint-plugin

For prettier:

npm i -D --save-exact prettier prettier-eslint prettier-eslint-cli eslint-plugin-prettier

Step 2: create config files

All these files go on the root level.

.eslintrc

// .eslintrc
{
  "plugins": ["prettier"],
  "extends": ["airbnb-typescript", "react-app", "prettier"],
  "settings": {
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true
      }
    }
  },
  "rules": {
    "object-curly-spacing": ["warn", "always"],
    "no-unused-vars": [
      "warn",
      {
        "vars": "all",
        "args": "none"
      }
    ],
    "[@typescript](http://twitter.com/typescript)-eslint/no-unused-vars": [
      "warn",
      {
        "vars": "all",
        "args": "none"
      }
    ],
    "[@typescript](http://twitter.com/typescript)-eslint/no-explicit-any": [
      "error",
      {
        "ignoreRestArgs": true
      }
    ],
    "max-len": [
      "warn",
      {
        "code": 80,
        "ignoreStrings": true,
        "ignoreTemplateLiterals": true,
        "ignoreComments": true
      }
    ],
    "no-plusplus": [
      "error",
      {
        "allowForLoopAfterthoughts": true
      }
    ],
    "react/jsx-key": "error",
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": [
          "\*\*/\*.test.js",
          "\*\*/\*.test.jsx",
          "\*\*/\*.test.ts",
          "\*\*/\*.test.tsx",
          "src/tests/\*\*/\*"
        ]
      }
    ],
    "react/jsx-props-no-spreading": "off",
    "import/prefer-default-export": "off",
    "react/jsx-boolean-value": "off",
    "react/prop-types": "off",
    "react/no-unescaped-entities": "off",
    "react/jsx-one-expression-per-line": "off",
    "react/jsx-wrap-multilines": "off",
    "react/destructuring-assignment": "off",
  }
}

.eslintignore

// .eslintignore
build/\*
public/\*
src/react-app-env.d.ts
src/serviceWorker.ts

.prettierrc

{
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2
}

Step 3: Add the running scripts

Look for the scripts area in package.json and include these:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",  
    "format": "prettier --write src/\*\*/\*.{ts,tsx,scss,css,json}",  
    "isready": "npm run format && npm run lint && npm run build"**  
  },

The first one npm run lint will run the linting and tell you what is wrong. The second one npm run format will format all the code based on your prettier and linting configuration. At last, a script that is very useful to run before committing and pushing code to git.

Step 4: Lint and format your code

Once you start running the scripts you will start getting errors.

$ npm run lint
$ npm run format

Some of them you may want to ignore so here the way to do it:

/* eslint-disable no-console, no-param-reassign */ For one or multiple lines
/* eslint-disable-next-line no-console */ For next line

Bob’s your uncle!!

Improvements

As I commented previously, there is room for improvement. If you have any comments or suggestions please leave a comment below.

Hello World!! This is a Junior Contributor

Feralamillo — Wed, 10 Apr 2019 13:18:31 +0000

After 6 months of commercial experience as a Junior Developer and a coding bootcamp, I feel there is still a long path to ahead. I really love developers that share because it is a great way to learn. In this sense, although I'm not an expert, I feel I can still contribute to the community in some sort of way.

Since uni, I have been involved with startups which is where I have met incredible people. Individuals that want to create an impact in the world improving how things are done. I have been in different roles related to business, sales, growth, project management, product and I have always felt that coding is a key skill. A couple of years ago, it was my time to focus on it. I joined a bootcamp and just when I finished, I landed a job in an upscale startup.

There is still a long journey and I'm doing great progress step by step. I would appreciate feedback from people on what are the best ways to contributing. Tips related to:

Generating content: what sites or tips to take into account?
Getting involved in open source projects.
Other alternatives to consider.