React's declarative nature makes building user interfaces intuitive. And reusable React components increase development speed and reduce time to production.

To further improve the development experience when building user interfaces, several React frameworks have emerged. One such framework is refine.

refine is a React-based framework for building web applications. It is similar to React-admin, Redwood, and Retool.

The refine ecosystem comes with out-of-the-box integrations for user authentication, routing, networking, internalization, and more.

In this article, you will learn refine by building a simple admin panel. This will help highlight the main building blocks of the refine framework. We will also explore the main features and possible use cases of refine.

What is refine?

refine is an open-source, MIT-licensed React-based framework for building front-end applications. It is similar to React-admin, Retool, and Redwood. refine is a "headless" React framework. It is not opinionated about your styling and design choices.

This means that you can use refine with a custom design or a UI component library. It ships with integrations for the most popular component libraries and design systems, such as Material UI, Chakra UI, and Ant design.

refine has built-in router providers for the most popular routing libraries, such as React Router, Remix Router, Next.js Router, and React Location. You can choose a routing library that meets your project's requirements.

You can use refine to build data-intensive applications such as admin panels, dashboards, internal tools, and storefronts. The command line tool, which is part of the React ecosystem, can help you set up a refine application fast.

You can get up and running fast if you have beginner to intermediate knowledge of React, since refine is a React-based framework. You can also use refine with other React frameworks like Next and Remix.

Prerequisites – Development Tools

You will need the following tools to run some of the examples in this article.

The Node runtime environment

If you don't have Node, download and install it from the Node downloads page. After installation, run the command below on the command line to check if the installation was successful.

node -v

The command above will display the Node version on your machine if the installation is successful.

Recent versions of Node also ship with npm. Run the command below on the terminal to be sure you have npm. It should display the version of npm that you installed with Node.

npm -v

A text editor

You will need a text editor like VS Code or Sublime Text. My favorite is VS Code. You can download it from the VS Code downloads page. Alternatively, download Sublime Text for your system from the Sublime Text downloads page.

How to Set Up a refine Application

You can set up a custom refine application or use the refine command line utility to bootstrap a refine application fast. If you are just starting out, I recommend you use the refine command line tool for a quick project setup.

The command line tool will create a refine project with all the required configurations. Follow the steps below to create a simple refine project using the command line tool. You should have the development tools I highlighted in the previous section to follow the steps below.

Step 1 — Create a refine application

Navigate to the directory where you want to create the refine application and run the command below on the command line. I am using npm as a package manager. But you can also use a different package manager.

Also note that if it is your first time creating a refine project, the command below will prompt you to install the create-refine-app package.

npm create refine-app@latest

The command above will launch the installation process. Respond to the prompts during the installation. I chose the refine-react project template, RESTful back-end integration, and Material UI as the UI framework for this project.

You will notice I have opted out of the other setup configurations.

✔ Downloaded remote source successfully.
✔ Choose a project template · refine-react
✔ What would you like to name your project?: · refine-demo
✔ Choose your backend service to connect: · data-provider-custom-json-rest
✔ Do you want to use a UI Framework?: · mui
✔ Do you want to add example pages?: · no
✔ Do you want to add dark mode support?: · no
✔ Do you want to customize the Material UI theme?: · no
✔ Do you want to customize the Material UI layout?: · no
✔ Do you need any Authentication logic?: · none
✔ Do you need i18n (Internationalization) support?: · no
✔ Do you want to add kbar command interface support?: · no
✔ Choose a package manager: · npm
✔ Would you mind sending us your choices so that we can improve superplate? · no

Step 2 — Open the project in a text editor

Once the installation is complete, open the project directory in a text editor. If you are using VS Code, use the code global command with the name of the project directory to open the project directory in VS Code.

The command below assumes that the name of your project directory is refine-demo.

code refine-demo

Step 3 — Launch the development server

You can start the development server by running the command below on the command line.

npm run dev

The above command will launch the development sever for your refine project in your default browser on localhost, port 3000. The welcome page should look like the screenshot below:

Main Concepts in refine

You will encounter several possibly unfamiliar concepts when working with refine. Below are the explanations of some of these common concepts you might encounter.

Data providers

More often than not, you have to communicate with an API when building data-intensive front-end applications with React. Unlike React, refine abstracts HTTP requests to APIs in data providers.

A data provider makes network requests to an API and forwards the response to the component that needs it.

The refine ecosystem has data providers for REST API, GraphQL API, cloud databases like Firebase, and some of the popular headless content management systems like Strapi.

You can declare a custom data provider if you don't intend to use the data providers in the refine ecosystem. A refine data provider needs to have the shape and methods below.

const dataProvider = {
    create: ({ resource, variables, metaData }) => Promise,
    createMany: ({ resource, variables, metaData }) => Promise,
    deleteOne: ({ resource, id, variables, metaData }) => Promise,
    deleteMany: ({ resource, ids, variables, metaData }) => Promise,
    getList: ({
        resource,
        pagination,
        hasPagination,
        sort,
        filters,
        metaData,
    }) => Promise,
    getMany: ({ resource, ids, metaData }) => Promise,
    getOne: ({ resource, id, metaData }) => Promise,
    update: ({ resource, id, variables, metaData }) => Promise,
    updateMany: ({ resource, ids, variables, metaData }) => Promise,
    custom: ({
        url,
        method,
        sort,
        filters,
        payload,
        query,
        headers,
        metaData,
    }) => Promise,
    getApiUrl: () => "",
};

The method names in a data provider are self-explanatory. The create method creates an item in a resource like its name suggests and returns a promise. And it takes several parameters. The other method names are self-descriptive too.

Your refine application interacts with data providers via data hooks. To perform a CRUD operation, you can trigger the methods in your data provider using data hooks.

Data hooks

As pointed out above, you can trigger any of the methods in the data provider from a component using data hooks. Each method in a data provider has a corresponding data hook. For example, the useCreate hook triggers the create method in your data provider.

You can use the useCreate hook in your component like so:

import { useCreate } from "@pankod/refine-core";

const MyComponent = () => {
  const { mutate } = useCreate();
  const clickHandler = () => {
    mutate({ resource: "posts", values: { title: "Refine hello world!" } });
  };
  return <button onClick={clickHandler}>Click to Create an item</button>;
};

Though the useCreate hook returns an object with several properties, we are interested in the mutate function in the above example.

Invoking the mutate function like we did triggers the create method in your data provider. After that, the create method makes a network request to your API and forwards the response to your component.

There are several data hooks that you can look up in the Refine documentation.

Resources

As hinted above, working with APIs is inevitable when building front-end applications. The API usually consists of resources you can access via endpoints and perform CRUD operations on.

The Refine component is the entry point for any refine application. When you create any refine application using create-refine-app, the App.tsx component will always render the Refine component like in the example below.

function App() {
  return (
    <Refine
      dataProvider={dataProvider(apiUrl)}
      routerProvider={routerProvider}
      resources={[
        {
          name: "users",
          list: List,
          show: Show,
          create: Create,
          edit: Edit,
        },
      ]}
    />
  );
}

One of the props you pass to theRefine component is the resources prop. The value of the resources prop is an array of resource objects. Each resource object needs to have a name property.

As in the example above, you can pass additional properties such as list, show, create, and edit.

The values of list, show, create, and edit are components. In the example above, the value of the name field is "users".

The name field determines the routes in your front-end application. When you navigate to the /users route in your app, refine will render the List component.

Similarly, when you navigate to the /users/show route, refine will render the Show component. The table below summarizes the relationship between the fields in the above resource object and the routes in your application.

Instead of creating components from scratch, you can also generate them based on your resources using an Inferencer.

Inferencer

Inferencer is one of the packages in the refine ecosystem of packages. It increases your development speed by generating CRUD pages after analyzing your data model. You can then customize the auto-generated components to meet the requirements of your project.

Instead of setting the values of the resource object properties list, show, create, and edit to a custom component like in the previous sub-section, the inferencer can generate the components for you. You can then customize the components to your needs.

import { HeadlessInferencer } from "@pankod/refine-inferencer/headless";

function App() {
  return (
    <Refine
      dataProvider={dataProvider(apiUrl)}
      routerProvider={routerProvider}
      resources={[
        {
          name: "topics",
          list: HeadlessInferencer,
          show: HeadlessInferencer,
          create: HeadlessInferencer,
          edit: HeadlessInferencer,
        },
      ]}
    />
  );
}

The code above assumes you are using HeadlessInferencer. You can also use MuiInferencer if you are using Material UI.

The Inferencer relies on the @pankod/refine-react-hook-form and @pankod/refine-react-table packages internally to generate forms and tables. So be sure to install them.

npm i @pankod/refine-react-table @pankod/refine-react-hook-form

How to Build an Admin Panel with refine

In this section, you will build a simple admin panel by modifying the refine app you created above.

Remember, we chose the RESTful API back-end integration while bootstrapping the app using create-refine-app. So we will use a fake RESTful API for this illustration.

In a real-world application, you will work with a different back-end integration. It can be a RESTful API, GraphQL API, cloud databases like Firebase, or a Content Management System like Strapi.

You need to read the refine documentation on using the different back-end integrations available in the refine ecosystem.

The fake RESTful API has several endpoints for accessing the available resources. We will build an admin panel for the users resource. Follow the steps below if you have opened the refine project we created at the beginning of this article in a text editor.

Step 1 — Install Inferencer dependencies

We will use MuiInferencer to generate CRUD pages. The Inferencer relies on @pankod/refine-react-hook-form and @pankod/refine-react-table packages internally. Run the command below on the terminal to install them.

npm i @pankod/refine-react-table @pankod/refine-react-hook-form

Step 2 — Import MuiInferencer

After successfully installing the required dependencies, open the src/App.tsx file and add the following import statement at the top:

import { MuiInferencer } from "@pankod/refine-inferencer/mui";

Step 3 — Generate components using Inferencer

As explained under the "Main concepts" section, the values of the list, show, create, and edit properties of the resource object are components. You can create these components from scratch or generate them using Inferencer. In this example, we will use the MuiInferencer to create them.

In the src/App.tsx file, the App component renders the Refine built-in component. Refine is the entry point for any refine application. Add the resources prop to your Refine component so that the App component looks like so:

function App() {
  return (
    <ThemeProvider theme={LightTheme}>
      <CssBaseline />
      <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
      <RefineSnackbarProvider>
        <Refine
          dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
          notificationProvider={notificationProvider}
          Layout={Layout}
          ReadyPage={ReadyPage}
          catchAll={<ErrorComponent />}
          routerProvider={routerProvider}
          resources = {[
            {
              name: 'users',
              list: MuiInferencer,
              show: MuiInferencer,
              create: MuiInferencer,
              edit: MuiInferencer

            }
          ]}
        />
      </RefineSnackbarProvider>
    </ThemeProvider>
  );
}
}

Step 4 — Preview the changes

View the list of users

After saving the above changes, refine will generate the CRUD pages and redirect to the /users route. Your welcome page should look like the image below. The component generated by the Inferencer renders a table of users from the users resource.

The table has several columns, some of which are hidden from view if you use a small screen. Scroll horizontally to see all of them.

Create a new user

You can also navigate to the users/create route to create a new user by clicking the "CREATE" button. refine will render the component generated by the Inferencer. It has a form that looks like the image below for creating a new user.

Update an existing user

To update an existing resource, navigate to the /users/edit/:id route. The id route parameter should be the id of an object in the users resource.

To edit the details of the user whose id is 1, navigate to the /users/edit/1 endpoint by clicking the edit button of the first record in the users table.

The edit button is under the last column labeled "Actions". The edit page should look like the image below.

View a specific user

To view the details of a user with a specific id, navigate to the /users/show/:id route. The id should be that of an existing object in the users resource.

To view the details of the first user, click the show button of the first record in the users table. The show button is under the last column labeled "Actions".

When you navigate to the /users/show/1 endpoint, you should see the details of the first user whose id is 1.

Step 5 — View the code generated by Inferencer

The Inferencer created components for us using the response from the /users endpoint of our fake RESTful API. In each of the pages you visited above, there is a button at the bottom right with the label "SHOW CODE".

Click it to display the code generated by the Inferencer for each page.

Step 6 — Customize the generated components

In the previous steps, you generated CRUD pages using MuiInferencer. Using MuiInferencer will get you up and running by generating the boilerplate code. But in a real-world application, you almost always want to customize the components to suit your needs.

To customize the generated code, create a src/users directory. In the src/users directory, create four files with the following names. You can name them differently if you want.

• List.tsx

• Create.tsx

• Edit.tsx

• Show.tsx

In the previous step, you learned how to view the generated code for each page.

Copy and paste the code for /users page in the List.tsx file you have created. In the same way, copy and paste the code for the /users/create page in the Create.tsx file. You do the same for the other pages and their corresponding components.

Import the components you have created above in your App.tsx like so:

import { UserList } from "users/List";
import { UserCreate } from "users/Create";
import { UserShow  } from "users/Show";
import { UserEdit } from "users/Edit";

In the App.tsx file, the App component renders the built-in Refine component. Modify the resources prop you are passing to the Refine component to look like so:

<Refine
  ...
  resources={[
    {
      name: "users",
      list: UserList,
      show: UserShow,
      create: UserCreate,
      edit: UserEdit,
    },
  ]}
/>;

Hopefully, you noticed how the values of the list, show, create, and edit properties of the resource object have changed from MuiInferencer to UserList, UserShow, UserCreate, and UserEdit, respectively. You can now modify the code in the components you have created.

That is just about how easy it is to create dashboards and admin panels with refine.

Within a few minutes, you have bootstrapped a project template based on your data model. You can then customize it further. Bootstrapping such a project from scratch would require a lot of work.

Conclusion

refine is an open-source MIT-licensed React-based framework for building front-end applications. It comes in handy when building dashboards, admin panels, internal tools, and storefronts. You can use it pretty much in any application that uses React.

refine comes with out-of-the-box functionalities for networking, authentication, routing, and internationalization. It also has integrations for the most popular cloud databases, such as Firebase and Supabase, and content management systems, like Strapi.

If you are looking to start using refine, use the command line tool. With the command line tool, you can choose a headless setup or use one of the built-in component or design systems such as Material UI and Ant design.

Hopefully, this article has introduced you to the very basics of refine. refine has several other features and use cases that I haven't highlighted here. Check out the documentation to fully understand refine and its capabilities.

Further reading

• Refine documentation

• Refine project GitHub repository

This isn't always easy, as the range of user accessibility needs can complicate things even further.

Thankfully, various guidelines exist for designing and building more accessible websites and web applications. This article will look at the seemingly mundane, lesser-known, and often overlooked web accessibility feature: the "skip to main content" link.

Because they are invisible by default, many users navigating a website using the usual point-and-click method won't even notice skip-to-main-content links. But these links are critical, as they make navigating complex and large websites simpler for keyboard-only and some screen reader users.

In the section below, we shall have a detailed look at "skip to main content" links and why you should consider implementing them in your website or web application.

What are "Skip to Main Content" Links?

Most websites usually come with navigation menus to make navigation easier. But although they make your website or web application navigable for the point-and-click users, navigation menus can also cause a poor user experience for keyboard-only and some screen reader users.

It is not uncommon for a typical website to have a navigation menu with up to ten menu items at the top of each web page. So a keyboard-only user will needlessly tab through all the navigation links before accessing the main content on pages they visit.

Some screen reader users may undergo a similar experience by traversing all the menu items before reaching the main content.

This creates a negative experience for your users. Adding skip-to-content links can make navigating such complex sites easier and less laborious for keyboard-only and some screen reader users.

A "skip to content" link is an ordinary link, usually before the main navigation menu at the top, linking to the main content on the web page. Since a point-and-click user doesn't need it, a "skip to main content link" is usually hidden and made visible when it is in focus.

It helps keyboard-only and screen reader users skip to the main content instead of traversing all the menu items. And this greatly improves their browsing experience.

The image below shows the skip-to-main-content link for the a11y project. As mentioned above, the skip-to-main-content link is visible only after being focused on.

To test it, navigate to a11yproject.com and hit the Tab key. The skip-to-main-content link immediately becomes visible. After that, you can hit the Enter key to skip the navigation menu.

Skip to main content link on a11y project website

In the next section, we shall implement a simple skip-to-main-content link.

How to Add a Skip to Main Content Link to Your Site

Now that we know what "skip to main content" links are, let's look at how to implement them and some best practices when using them.

As already mentioned in the introduction, skip-to-main-content links are ordinary links.

But again, they are usually not visible to an ordinary point-and-click user. You can change the visibility of the skip-to-main-content link for the keyboard user when it is in focus.

The code below shows the markup for a typical navigation menu. A real-world application may be more complex with nested menu items in addition to the top-level menu items. But I have kept it simple in the example below.

  <body>
    <a href="#main" class="skip-to-main-content-link">Skip to main content</a>
    <nav>
      <ul>
        <li>
          <a href="/">Home</a>
        </li>
        <li>
          <a href="/about.html">About</a>
        </li>
        <li>
          <a href="/blog.html">Blog</a>
        </li>
        <li>
          <a href="/contact.html">Contact</a>
        </li>
        <li>
          <a href="/portfolio.html">Portfolio</a>
        </li>
      </ul>
    </nav>
    <main id="main">
      <h1>Your sweet heading</h1>

      <!-- Page content goes here! -->
    </main>
  </body>

The first element of the <body> tag in the above example is the skip-to-main-content link. Its href attribute points to the main element via its id attribute. Clicking or pressing the Enter key when the skip-to-main-content link is in focus will scroll the main content into view in the viewport.

As pointed out in the previous section, the skip-to-main-content link is primarily for keyboard-only and some screen reader users. So we need to apply some styling to hide it from view when out of focus and display it when it receives focus.

So we select it using the given class and apply the styling below. You can hide and display the skip link with different styling. It doesn't have to be the same code as below.

.skip-to-main-content-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: black;
  color: white;
  opacity: 0;
}
.skip-to-main-content-link:focus {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}

You can also apply transition animation to your skip-to-main-content link, though I haven't included it in the example above.

Good Practices When Adding a Skip to Main Content Link

Though skip-to-main-content links are easy to implement, there are some potential problems that can easily slip by you.

Follow what I consider good practices below when implementing skip-to-main-content links. I have picked them up from the WCAG techniques.

• If the skip to main content link is for skipping the main navigation menu at the top of a web page, it should be the first focusable element on the web page.

• The text of the skip link should describe the intent. The text "Skip to main content" will usually suffice.

• It is a requirement that the skip-to-content link is either always visible or visible when in focus. Since our skip-to-content link is for keyboard-only and some screen reader users, you can hide it and make it visible as we did in the example above.

• The focus should shift to the main content after activating the skip link.

It is worth pointing out that using skip links is not only limited to navigation menus. You can also implement links to help users skip focusable elements that are difficult or laborious to navigate with the keyboard.

Conclusion

A navigation menu is a handy feature for navigating to different sections or pages of a website. And although it's meant to provide a better user experience, a navigation menu can become an accessibility obstacle for some users who only use the keyboard or who use a screen reader.

This is why it's a good idea to add skip-to-main-content links on each page. When users need to traverse the navigation menu items, they can use that link to bypass the navigation menu.

The skip-to-main-content link is an ordinary link that's invisible to the point-and-click user. It is visible to screen reader users and when in focus. Clicking it will shift focus to the main content on the web page.

Hopefully, this article has given you insights on skip-to-main-content links and how to implement them in your website or web application.

Accessibility is a journey. Every step you take in the right direction makes your site or web application more accessible. Implementing skip-to-main-content links is one such step. Take that step and make the web more accessible if you haven't. By doing so, you are enriching the digital experience for your clients.

Since developers deal with tight deadlines and competing priorities, it is easy to accidentally ship unresolved accessibility issues to production. And things becomes even more complex when working with JavaScript frameworks such as React which involves writing JSX.

But fortunately, there are tools that you can take advantage of to lint or evaluate common accessibility issues in your text editor or the browser.

This article will shed light on these existing accessibility tools and how you can use them to build more accessible React applications.

What is web accessibility?

A website or web app is said to be accessible if it doesn’t exclude people with disabilities from using it on account of their disability.

Having an accessible website removes barriers and ensures that both disabled and non-disabled persons have equal access to the web content and functionality.

The benefits of making your website accessible to people with disabilities will extend to all users including non-disabled persons.

Why you should pay attention to accessibility

I can't emphasize the importance of accessibility enough. If you don't pay attention to it right from the beginning of your project, you risk turning accessibility into a burden and an expensive one in the future if you start retrofitting.

Making your site accessible should be an integral part of your project right from the word go. It should not be an afterthought.

I have highlighted below why you need to focus on accessibility right from the beginning:

Follows SEO best practices

Some of the basic accessibility requirements such as using semantic HTML elements, proper use of heading elements, and adding descriptive alt attributes to img tags are also SEO best practices.

Improves UX for all users

Improving accessibility for people with disabilities will improve the experience for all your users.

For example, adding a sufficient contrast ratio is not only helpful for people with low vision, color blindness, or cognitive impairment but it's also helpful to people working in different lighting conditions.

Similarly adding an alt attribute with appropriate text will help people using screen readers as well as those with slow internet connections when the image fails to load or takes too long to load.

It's the right thing to do

By making your website accessible, you are doing the right thing. They too have the right to access the service you are offering and some are your clients. Besides, it won’t be good for you or your business if you are accused of discrimination because your site is inaccessible to PWDs. It will damage your brand and reputation.

Avoids legal issues

Finally, you might run into legal accessibility requirements depending on where you live and work. Some countries have legislation that requires websites to be accessible to people with disabilities.

Accessibility standards and guidelines

There are several different accessibility standards and guidelines. The most notable and widely recognized standards were developed by the World Wide Web Consortium (W3C) through its Web Accessibility Initiative (WAI).

I have highlighted some of these standards and guidelines in the sub-sections below.

Web Content Accessibility Guidelines (WCAG) 2.1

WCAG is one of the internationally recognized standards for web content accessibility.

It was developed by W3C through a participatory process with input from a number of individual and institutional stakeholders from around the world.

This standard explains how to make web content more accessible to people with disabilities. It has also been ISO approved.

According to W3C, WCAG was created primarily to serve as a go-to standard for individuals, organizations, and governments internationally on matters of web content accessibility.

Authoring Tools Accessibility Guidelines (ATAG) 2.0

ATAG is a set of accessibility guidelines that you can use for designing tools for authoring web content.

This guideline helps you make sure that you produce authoring tools that are accessible to people with disabilities. The tools should, in turn, help authors create accessible web content.

User Agent Accessibility Guidelines (UAAG) 2.0

The UAAG 2.0 is a sister to the WCAG. This set of guidelines spell out how you can make browsers, browser extensions, media players, and other user agents accessible to people with disabilities.

It is used by browser vendors and browser extension makers to address certain accessibility issues such as text customization in the browser.

In the next section, we shall highlight a couple of tools that can help you flag basic accessibility issues in your React applications.

Accessibility Tools for Your React Applications

It is easy to unintentionally ship accessibility issues to production despite your best efforts to do otherwise. In this section, we'll shed light on some tools you can use to highlight common accessibility issues.

It might be tempting to omit certain accessibility features if you are dealing with tight deadlines. So it's helpful to have accessibility tools in your setup that notify you of accessibility defects you might have missed.

This is is by no means an exhaustive list of accessibility tools. If there are other tools that you think are useful but are not included here, do get in touch with me on Twitter. I will be happy to update this article. Someone might find them useful too.

Though these tools will catch some common accessibility issues that you can measure programmatically, they won't do your job for you. It is your responsibility to make a deliberate effort to develop more accessible and inclusive digital products right from the project's conception.

I have categorized the tools we are going to cover into two categories, namely:

• Accessibility tools you can integrate into your React project that have been developed with React in mind.

• General accessibility audit tools which you can use to audit sites built with or without React.

In the sub-sections below, I'll highlight the tools that you can use in your React projects. They are purposely created for use with React or JSX.

Accessibility Tools Built for React

eslint-plugin-jsx-a11y

You can use this tool for linting accessibility issues on JSX elements in your React projects. You can use it in conjunction with tools such as eslint for linting your project for accessibility standards right in your text editor.

Since it is distributed via npm, you can install it by running the command below in your project:

# using npm as package manager

npm install eslint-plugin-jsx-a11y --save-dev

# using yarn as package manager

yarn add eslint-plugin-jsx-a11y --dev

Any React project which you've created using create-react-app comes with this tool already configured – but it has only a subset of the configurable accessibility rules enabled by default.

You can enable additional rules by creating an .eslintrc configuration file in your project and adding the following code to it. The code below activates the recommended rules:

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"],
  "plugins": ["jsx-a11y"]
}

If you want to flag accessibility issues in a custom React project, you need to install eslint and add "jsx-a11y" to the plugins field of your .eslintrc configuration file.

It will then flag accessibility issues that it can identify programmatically and warn you right in your text editor depending on your configuration.

{  "plugins": [    "jsx-a11y"  ]}

For more info about how to configure this linting tool in a custom React project, check the project README on GitHub.

axe accessibility linter

Axe accessibility linter is a Visual Studio Code extension that you can use for linting React, HTML, Vue, and Markdown for some common accessibility defects.

It checks for accessibility issues in .js, .jsx, .ts, .tsx, .vue, .html, .htm, .md and .markdown files.

You don’t need configuration to start using axe accessibility linter after installation. You install it from VS code marketplace and it automatically starts linting compatible files for accessibility defects out of the box without the need for additional configuration.

For a complete list of rules used by axe accessibility linter, check the extension page on VS Code marketplace.

You can also go ahead and configure the tool if you wish by turning some rules on and off by adding the axe-linter.yml configuration file at the root of your project.

You have an option of disabling accessibility rules individually or in a group using the WCAG standard. Using this feature in your project will ensure all members of your team adhere to the same accessibility standard.

You can add the following to your axe-linter.yml file to enable or disable certain rules individually. For a complete list of configurable rules, check the axe accessibility linter extension page at the VS Code marketplace.

# To enable/disable rules at individual level
rules:
  accessibility-rule: false # turn off rule
  another-accessibility-rule: true # turn on rule

Alternatively, you can add the following to your axe-linter.yml configuration file to disable rules as a group using specific WCAG standards.

For a complete list of the configurable WCAG standards, check the axe accessibility linter extension page at the VS Code marketplace.

# To enable/disable rules at group level based on WCAG standard

tags: 
  - wcag2a # Disable all rules for WCAG 2.0 level A
  - wcag21a # Disable all rules for WCAG 2.1 level A

axe-core-react

This accessibility testing tool is developed and maintained by Deque Labs, the same folks behind axe accessibility linter.

axe-core-react was originally referred to as react-axe. You can run it in your React project in development and accessibility defects are highlighted in the Chrome DevTools console whenever your component updates.

It can really help you catch some accessibility issues early in development. At the moment, axe-core-react works best with Google chrome. Unlike the first two, it tests the accessibility of the rendered DOM instead of the JSX element you write in the React components.

npm install @axe-core/react --save-dev

You can then run the package in development after the installation.

The code below illustrates how you can run axe-core-react in your React application using the most basic configuration. There are additional configuration options which you can read about on the package README on GitHub.

const React = require('react');
const ReactDOM = require('react-dom');

// Make sure to run @axe-core/react in development

if (process.env.NODE_ENV !== 'production') {
  const axe = require('@axe-core/react');
  axe(React, ReactDOM, 1000);
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

You can use the tools mentioned above directly in your React application to catch and fix common accessibility issues.

In the next section, we will look at a few other accessibility tools that are not directly related to React but are useful for identifying basic accessibility defects in a React application.

Other accessibility tools

There are a number of tools out there that you can use to detect common accessibility issues in the browser. I have highlighted a couple of these tools below.

Axe DevTools browser extension

This is a browser extension you can use for conducting a simple audit of your web page for common accessibility issues.

Your app needs to be hosted somewhere before using this browser extension to check for accessibility issues. It categorizes accessibility defects into critical, serious, moderate, and minor.

WAVE Evaluation Tool browser extension

This is another chrome browser extension you can use to identify accessibility issues in your website.

Just like the Axe DevTools chrome browser extension, this extension requires you to host the app before you use it for auditing your web app for accessibility defects.

Google’s Lighthouse in Chrome DevTools

You can use Google’s Lighthouse Chrome DevTools to audit your website for accessibility issues. It generates a report which you can use to fix defects in your website.

There is an endless list of general web accessibility evaluation tools out there. You can pick the one that meets your needs.

For a comprehensive list, you can check the web accessibility evaluation tools list by W3C or accessibility tools by a11y project.

Conclusion

Using tools such as eslint-plugin-jsx-a11y, axe accessibility linter, and axe-core-react in your project will go a long way in helping you develop more accessible and inclusive products using React.

Though they come in handy, the tools mentioned here will only flag a certain percentage of accessibility defects – mainly those that are possible to detect programmatically.

So it's really important to integrate automated testing, manual testing, and actual user testing in your development because automated testing alone may not be able to detect even 50 percent of accessibility issues in your project.

To get the data, you'll have to resort to web scraping.

In this article, I'll go over how to scrape websites with Node.js and Cheerio.

Before we start, you should be aware that there are some legal and ethical issues you should consider before scraping a site. It's your responsibility to make sure that it's okay to scrape a site before doing so.

The sites used in the examples throughout this article all allow scraping, so feel free to follow along.

Prerequisites

Here are some things you'll need for this tutorial:

• You need to have Node.js installed. If you don't have Node, just make sure you download it for your system from the Node.js downloads page

• You need to have a text editor like VSCode or Atom installed on your machine

• You should have at least a basic understanding of JavaScript, Node.js, and the Document Object Model (DOM). But you can still follow along even if you are a total beginner with these technologies. Feel free to ask questions on the freeCodeCamp forum if you get stuck

What is Web Scraping?

Web scraping is the process of extracting data from a web page. Though you can do web scraping manually, the term usually refers to automated data extraction from websites - Wikipedia.

What is Cheerio?

Cheerio is a tool for parsing HTML and XML in Node.js, and is very popular with over 23k stars on GitHub.

It is fast, flexible, and easy to use. Since it implements a subset of JQuery, it's easy to start using Cheerio if you're already familiar with JQuery.

According to the documentation, Cheerio parses markup and provides an API for manipulating the resulting data structure but does not interpret the result like a web browser.

The major difference between cheerio and a web browser is that cheerio does not produce visual rendering, load CSS, load external resources or execute JavaScript. It simply parses markup and provides an API for manipulating the resulting data structure. That explains why it is also very fast - cheerio documentation.

If you want to use cheerio for scraping a web page, you need to first fetch the markup using packages like axios or node-fetch among others.

How to Scrape a Web Page in Node Using Cheerio

In this section, you will learn how to scrape a web page using cheerio. It is important to point out that before scraping a website, make sure you have permission to do so – or you might find yourself violating terms of service, breaching copyright, or violating privacy.

In this example, we will scrape the ISO 3166-1 alpha-3 codes for all countries and other jurisdictions as listed on this Wikipedia page. It is under the Current codes section of the ISO 3166-1 alpha-3 page.

This is what the list of countries/jurisdictions and their corresponding codes look like:

You can follow the steps below to scrape the data in the above list.

Step 1 - Create a Working Directory

In this step, you will create a directory for your project by running the command below on the terminal. The command will create a directory called learn-cheerio. You can give it a different name if you wish.

mkdir learn-cheerio

You should be able to see a folder named learn-cheerio created after successfully running the above command.

In the next step, you will open the directory you have just created in your favorite text editor and initialize the project.

Step 2 - Initialize the Project

In this step, you will navigate to your project directory and initialize the project. Open the directory you created in the previous step in your favorite text editor and initialize the project by running the command below.

npm init -y

Successfully running the above command will create a package.json file at the root of your project directory.

In the next step, you will install project dependencies.

Step 3 - Install Dependencies

In this step, you will install project dependencies by running the command below. This will take a couple of minutes, so just be patient.

npm i axios cheerio pretty

Successfully running the above command will register three dependencies in the package.json file under the dependencies field. The first dependency is axios, the second is cheerio, and the third is pretty.

axios is a very popular http client which works in node and in the browser. We need it because cheerio is a markup parser.

For cheerio to parse the markup and scrape the data you need, we need to use axios for fetching the markup from the website. You can use another HTTP client to fetch the markup if you wish. It doesn't necessarily have to be axios.

pretty is npm package for beautifying the markup so that it is readable when printed on the terminal.

In the next section, you will inspect the markup you will scrape data from.

Step 4 - Inspect the Web Page You Want to Scrape

Before you scrape data from a web page, it is very important to understand the HTML structure of the page.

In this step, you will inspect the HTML structure of the web page you are going to scrape data from.

Navigate to ISO 3166-1 alpha-3 codes page on Wikipedia. Under the "Current codes" section, there is a list of countries and their corresponding codes. You can open the DevTools by pressing the key combination CTRL + SHIFT + I on chrome or right-click and then select "Inspect" option.

This is what the list looks like for me in chrome DevTools:

In the next section, you will write code for scraping the web page.

Step 5 - Write the Code to Scrape the Data

In this section, you will write code for scraping the data we are interested in. Start by running the command below which will create the app.js file.

touch app.js

Successfully running the above command will create an app.js file at the root of the project directory.

Like any other Node package, you must first require axios, cheerio, and pretty before you start using them. You can do so by adding the code below at the top of the app.js file you have just created.

const axios = require("axios");
const cheerio = require("cheerio");
const pretty = require("pretty");

Before we write code for scraping our data, we need to learn the basics of cheerio. We'll parse the markup below and try manipulating the resulting data structure. This will help us learn cheerio syntax and its most common methods.

The markup below is the ul element containing our li elements.

const markup = `
<ul class="fruits">
  <li class="fruits__mango"> Mango </li>
  <li class="fruits__apple"> Apple </li>
</ul>
`;

Add the above variable declaration to the app.js file

How to Load Markup in Cheerio

You can load markup in cheerio using the cheerio.load method. The method takes the markup as an argument. It also takes two more optional arguments. You can read more about them in the documentation if you are interested.

Below, we are passing the first and the only required argument and storing the returned value in the $ variable. We are using the $ variable because of cheerio's similarity to Jquery. You can use a different variable name if you wish.

Add the code below to your app.js file:

const $ = cheerio.load(markup);
console.log(pretty($.html()));

If you now execute the code in your app.js file by running the command node app.js on the terminal, you should be able to see the markup on the terminal. This is what I see on my terminal:

How to Select an Element in Cheerio

Cheerio supports most of the common CSS selectors such as the class, id, and element selectors among others. In the code below, we are selecting the element with class fruits__mango and then logging the selected element to the console. Add the code below to your app.js file.

const mango = $(".fruits__mango");
console.log(mango.html()); // Mango

The above lines of code will log the text Mango on the terminal if you execute app.js using the command node app.js.

How to Get the Attribute of an Element in Cheerio

You can also select an element and get a specific attribute such as the class, id, or all the attributes and their corresponding values.

Add the code below to your app.js file:

const apple = $(".fruits__apple");
console.log(apple.attr("class")); //fruits__apple

The above code will log fruits__apple on the terminal. fruits__apple is the class of the selected element.

How to Loop Through a List of Elements in Cheerio

Cheerio provides the .each method for looping through several selected elements.

Below, we are selecting all the li elements and looping through them using the .each method. We log the text content of each list item on the terminal.

Add the code below to your app.js file.

const listItems = $("li");
console.log(listItems.length); // 2
listItems.each(function (idx, el) {
  console.log($(el).text());
});
// Mango
// Apple

The above code will log 2, which is the length of the list items, and the text Mango and Apple on the terminal after executing the code in app.js.

How to Append or Prepend an Element to a Markup in Cheerio

Cheerio provides a method for appending or prepending an element to a markup.

The append method will add the element passed as an argument after the last child of the selected element. On the other hand, prepend will add the passed element before the first child of the selected element.

Add the code below to your app.js file:

const ul = $("ul");
ul.append("<li>Banana</li>");
ul.prepend("<li>Pineapple</li>");
console.log(pretty($.html()));

After appending and prepending elements to the markup, this is what I see when I log $.html() on the terminal:

Those are the basics of cheerio that can get you started with web scraping.

To scrape the data we described at the beginning of this article from Wikipedia, copy and paste the code below in the app.js file:

// Loading the dependencies. We don't need pretty
// because we shall not log html to the terminal
const axios = require("axios");
const cheerio = require("cheerio");
const fs = require("fs");

// URL of the page we want to scrape
const url = "https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3";

// Async function which scrapes the data
async function scrapeData() {
  try {
    // Fetch HTML of the page we want to scrape
    const { data } = await axios.get(url);
    // Load HTML we fetched in the previous line
    const $ = cheerio.load(data);
    // Select all the list items in plainlist class
    const listItems = $(".plainlist ul li");
    // Stores data for all countries
    const countries = [];
    // Use .each method to loop through the li we selected
    listItems.each((idx, el) => {
      // Object holding data for each country/jurisdiction
      const country = { name: "", iso3: "" };
      // Select the text content of a and span elements
      // Store the textcontent in the above object
      country.name = $(el).children("a").text();
      country.iso3 = $(el).children("span").text();
      // Populate countries array with country data
      countries.push(country);
    });
    // Logs countries array to the console
    console.dir(countries);
    // Write countries array in countries.json file
    fs.writeFile("coutries.json", JSON.stringify(countries, null, 2), (err) => {
      if (err) {
        console.error(err);
        return;
      }
      console.log("Successfully written data to file");
    });
  } catch (err) {
    console.error(err);
  }
}
// Invoke the above function
scrapeData();

Do you understand what is happening by reading the code? If not, I'll go into some detail now. I have also made comments on each line of code to help you understand.

In the above code, we require all the dependencies at the top of the app.js file and then we declared the scrapeData function. Inside the function, the markup is fetched using axios. The fetched HTML of the page we need to scrape is then loaded in cheerio.

The list of countries/jurisdictions and their corresponding iso3 codes are nested in a div element with a class of plainlist. The li elements are selected and then we loop through them using the .each method. The data for each country is scraped and stored in an array.

After running the code above using the command node app.js, the scraped data is written to the countries.json file and printed on the terminal. This is part of what I see on my terminal:

Conclusion

Thank you for reading this article and reaching the end! We have covered the basics of web scraping using cheerio. You can head over to the cheerio documentation if you want to dive deeper and fully understand how it works.

Feel free to ask questions on the freeCodeCamp forum if there is anything you don't understand in this article.

Finally, remember to consider the ethical concerns as you learn web scraping.

Node-cron is a handy npm package which you can use to schedule jobs to run at specific times or intervals. It is most suitable for scheduling repetitive jobs such as email notifications, file downloads, and database backups.

Even if you are not interested in scheduling a job in Node, you may still find the knowledge you gain from this article about cron syntax very useful.

For example, Github Actions uses cron syntax when scheduling a workflow to run at a specific time. Similarly, cloud platforms such as Google Cloud require cron syntax when describing job schedules.

Node-cron is written for node in pure JavaScript and it is based on GNU crontab syntax. Though it is based on crontab, our focus in this article will be on learning node-cron and cron syntax.

For more about cron, crontab, and how they are used in Unix-like operating systems, you can take a look at this Wikipedia article on the topic (but you don't have to know it to follow along with this article).

What you will learn in this article

By the end of this article, you will be able to do the following:

• Explain the cron syntax

• Schedule jobs using node-cron

Prerequisites

Before proceeding, make sure you have the prerequisites completed that are outlined below.

• You need to have the JavaScript runtime environment Node installed on your machine.

• You should have at least a basic understanding of JavaScript and Node. If you are a total beginner with Node and JavaScript, you can ask questions on the freeCodeCamp forum if you get stuck. We shall be happy to help.

How to Use node-cron to Schedule a Job

As I already mentioned above, node-cron was written for Node and is distributed via npm. After installation using the command npm i node-cron, it must be required into the project like any other Node package:

const nodeCron = require("node-cron");

To schedule a job, you need to invoke the nodeCron.schedule method with two arguments. There is a third optional argument that you can pass to the method for additional configuration.

Below is the function signature for the nodeCron.schedule method.

nodeCron.schedule(expression, function, options);

The code snippet below is an example of how you can invoke the schedule method.

const job = nodeCron.schedule("* * * * * *", function jobYouNeedToExecute() {
  // Do whatever you want in here. Send email, Make  database backup or download data.
  console.log(new Date().toLocaleString());
});

The first argument you need to pass to nodeCron.schedule is the cron expression. You use this expression to specify the time (or times) at which the job should be executed.

This expression should be in the * * * * * * format. You can replace each * field with an appropriate number (or characters where possible) so that the expression describes the time at which the job should be executed.

If you pass "* * * * * *" without replacing any *, like in the above example, the job gets executed every second. For a detailed explanation of how to come up with a cron expression, read the "How to understand cron expressions" sub-section below.

The second argument is a function and it is the job that gets executed when the expression in the first argument ticks.

You can do whatever you want in this function. You can send an email, make a database backup, or download data. This function gets executed when the current system time is the same as the time provided in the first argument. In the above example, I am just printing the current date.

And the third argument is an optional configuration object for job scheduling. I didn't pass the third argument in the above example since it is optional.

Below is an example of what the third argument looks like.

{
   scheduled: false,
   timezone: "America/Sao_Paulo"
}

By default scheduled is true. If you set it to false, you will have to schedule the job by invoking the start method on the job object. job is the object returned by a call to the schedule method.

job.start();

The default timezone we use is for the system on which the job is scheduled. You can pass a different timezone if you wish.

How to Understand Cron Expressions

The cron expression, which is the first argument to schedule, is a string that takes the form "* * * * * *". We use it to describe the time at which the job should be executed. Each * in the expression is a field and you can see the field represented by each * in the illustration below.

"* * * * * *"
 | | | | | |
 | | | | | |
 | | | | | day of week
 | | | | month
 | | | day of month
 | | hour
 | minute
 second(optional)

As you can see from the above illustration, the first field is the second field, the second field is the minute field, and the third is the hour field, and so on.

The table below shows the fields and their corresponding allowed values:

The job is executed when the second, minute, hour, and month fields match the current time, and when at least one of the two day fields (day of month, or day of week) match the current time. – crontab documentation

There are different ways to populate the fields in a cron expression. Each field in a Node expression can be populated using single integer values, a range of values, multiple values separated by commas, step values, or using names (as explained in the sub-sections below).

How to Use Single Integer Values to Populate a Chron Expression

You can replace each asterisk with a single integer value in the allowed range of values.

For example, passing "30 20 * * * *" will make node-cron run your job at the thirtieth second of the twentieth minute of each hour. Since you didn't specify a value for the hour field, node-cron interprets * to mean every hour. The same applies to the day of the month field, and so on.

const job = nodeCron.schedule("30 20 * * * *", () => {
  console.log(new Date().toLocaleString());
});

Similarly, passing "30 5 13 * * *" will run your task at 1:05:30pm every day.

const job = nodeCron.schedule("30 5 13 * * *", () => {
  console.log(new Date().toLocaleString());
});

How to Use a Range of Values to Populate Chron Expressions

You an also use ranges of numbers to populate your chron expressions. A range refers to two numbers separated by the - character. The end values are part of the range.

For example, if the hour field is set to2-4, it specifies execution at hours 2, 3, and 4.

const job = nodeCron.schedule("* 2-4 3 * *", () => {
  console.log(new Date().toLocaleString());
});

In the above code snippet, I have excluded the optional second field. It will execute your job every minute from 2 am to 4 am on the third day (because the day of the month field has a value of 3) of each month.

How to Use Multiple Values to Populate Chron Expressions

You can also pass multiple values separated by commas or a range of values separated by commas.

For example, passing 2,3,4 as the value of the minute field will execute your job at minutes 2, 3, and 4.

const job = nodeCron.schedule("2,3,4 * * * *", () => {
  console.log(new Date().toLocaleString());
});

In the above code snippet, I have again excluded the optional second field. It will execute your job at the first, second, and third minutes of each hour.

How to Use Step Values to Populate Chrone Expressions

You can use step values with ranges. Following a range with /<number> skips the number's value through the range.

For example, using 0-8/2 in the hour field will execute the code at 0,2,4,6 and 8 hours. You can also use step values with *. For example */3 executes every three hours.

const job = nodeCron.schedule("*/2 * * * *", () => {
  console.log(new Date().toLocaleString());
});

In the above code snippet, the job will be executed every two minutes. Once again I've omitted the optional second field.

How to Use Names to Populate Chron Expressions

For the month and day of the week fields, you can use names. These can be short or long names. For example January or Jan.

const job = nodeCron.schedule("* * * January,September Sunday", () => {
  console.log(new Date().toLocaleString());
});

Once again I have omitted the optional second field. The job will run every minute on Sundays in January and September. You can also use short names like Jan, Sep.

That is all you need to know about the basics of cron syntax. In the next section, you will implement what you have learned to schedule a simple job.

There is a handy tool called crontab guru which can interpret crontab expressions for you. If you enter an expression, it will validate the expression and tell you when the job will be executed. You can use it if you are not sure of the expression.

How to Schedule a Job using node-cron

In this section, you will apply what you have learned in the previous sections. You will build a simple app that scrapes world population data from worldometers site and logs it to the console.

When you navigate to the worldometers world population page, you will notice the current world population changing rapidly. You will schedule a job that will scrape the data and print it on the terminal.

In a real app, you will normally save it to a database. Follow the steps below to build the app.

Step 1 - How to Create a Directory

In this step, you will create a directory for your project and navigate to it. Open the terminal and run the command below to create a directory called learn-node-cron. The name of the directory doesn't matter. You can give it a different name if you wish.

mkdir learn-node-cron

You should see the learn-node-cron folder created after running the above command successfully. You can open the folder in your favorite text editor. In the next step, you will initialize the project.

Step 2 - How to Initialize the Project

In this step, you will initialize the project by running the command below on the terminal.

npm init -y

After successfully running the above command, you should be able to see the package.json file created at the root of the project directory.

Step 3 - How to Install Dependencies

In this step, you will install the project dependencies by running the command below on the terminal.

npm i node-cron puppeteer ora chalk

The above installation will take a bit of time, so just be patient. After successfully installing the above dependencies, you should see them in the package.json file under the dependencies field.

node-cron is the most important dependency here because it is what this article is all about.

We'll use puppeteer to scrape data from a web page. According to the documentation puppeteer is:

A Node library that provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default but can be configured to run full (non-headless) Chrome or Chromium - puppeteer documentation

If the above statement doesn't make sense to you, there is a nice article on toptal that explains puppeteer, headless browsers, and why they are necessary. It is still okay if you are not interested in puppeteer. This article is about node-cron and how to use it to schedule a job.

ora is a simple npm package that we will use for displaying messages and a spinner on the terminal as we scrape the data. This will provide a better user experience.

chalk is another npm package that we'll use for displaying colorful messages on the terminal.

In the next step, you will implement the cron job.

Step 4 - How to Implement the Cron Job

In this step, you will implement a simple cron job. Create a new JavaScript file by running the command below:

touch app.js

Successfully running the above command will create an app.js file at the root of the project. Copy and paste the code below in the file you have just created:

const nodeCron = require("node-cron");
const puppeteer = require("puppeteer");
const ora = require("ora");
const chalk = require("chalk");

const url = "https://www.worldometers.info/world-population/";

async function scrapeWorldPopulation() {
  // Log a message on the terminal as the scheduled job starts
  // We are using chalk to make the message on the terminal look colorful
  console.log(chalk.green("Running scheduled job"));
  // Launch a loading spinner with an appropriate message on the terminal
  // It provides a good user experience as the scraping process takes a bit of time
  const spinner = ora({
    text: "Launcing puppeteer",
    color: "blue",
    hideCursor: false,
  }).start();

  try {
    // This will help us compute the duration of the job later
    const date = Date.now();
    // Launch puppeteeer
    const browser = await puppeteer.launch();
    // Change the message on the terminal as we launch
    // a new headless browser page
    spinner.text = "Launching headless browser page";
    // Launch a new headless browser page
    const newPage = await browser.newPage();
    // Change the message on the terminal as we navigate
    // to the URL of the page we are scraping
    spinner.text = "Navigating to URL";
    // Navigate to the URL of the page we are scraping. This takes a bit of time
    // You can change the timeout to an appropriate value if you wish otherwise
    // we wait until the page loads
    await newPage.goto(url, { waitUntil: "load", timeout: 0 });

    // Change the message on the terminal as we start scraping the page
    spinner.text = "Scraping page";
    // Start scraping the page
    // If world population is 7,876,395,914 then digitGroups will be
    // ["7", "876", "395", "914"]
    const digitGroups = await newPage.evaluate(() => {
      const digitGroupsArr = [];
      // For selecting span elements containing digit groups
      const selector =
        "#maincounter-wrap .maincounter-number .rts-counter span";
      const digitSpans = document.querySelectorAll(selector);
      // Loop through the digit spans selected above
      digitSpans.forEach((span) => {
        if (!isNaN(parseInt(span.textContent))) {
          digitGroupsArr.push(span.textContent);
        }
      });
      return JSON.stringify(digitGroupsArr);
    });
    // Change the message on the terminal since we are about
    // to close the headless browser
    spinner.text = "Closing headless browser";
    // Close the headless browser
    await browser.close();
    // Print success message with duration it took to scrape the data in ms
    spinner.succeed(`Page scraping successfull after ${Date.now() - date}ms`);
    // Remove the spinner from the terminal
    spinner.clear();
    // Print world population on the terminal if scraping is successful
    console.log(
      chalk.yellow.bold(`World population on ${new Date().toISOString()}:`),
      chalk.blue.bold(JSON.parse(digitGroups).join(","))
    );
  } catch (error) {
    // Print failed on the terminal if scraping is unsuccessful
    spinner.fail({ text: "Scraping failed" });
    // Remove the spinner from the terminal
    spinner.clear();
    // Print the error message on the terminal
    console.log(error);
  }
}
// Schedule a job to run every two minutes
const job = nodeCron.schedule("*/2 * * * *", scrapeWorldPopulation);

In the above code snippet, we required all the dependencies we needed at the top of the file. They include node-cron, puppeteer, chalk, and ora. We are scraping the data from https://www.worldometers.info/world-population/, so I assigned it to the url variable.

Since our job is to scrape data from a site, I have named the function responsible for executing our job scrapeWorldPopulation.

I have tried my best to give self-explanatory variable names and commented on almost every line of code. You should be able to follow what is happening in the scrapeWorldPopulation function.

Since this article is about job scheduling, I won't dive into puppeteer. You can also implement a different job if you wish.

I scheduled the job to run every two minutes by invoking the nodeCron.schedule method at the bottom.

You can run the command node app.js on the terminal to schedule the job. You should see the job run every two minutes. This is what I see on my terminal after running node app.js.

Conclusion

In this article, you learned crontab syntax and how to implement a cron job in Node using node-cron.

There are several projects you can try out to learn cron syntax, for example:

• scheduling a job to fetch the latest COVID-19 vaccination coverage for your country and logging the output to the console

• fetching trending hashtags from Twitter (this might need an API key), or

• getting the latest news headlines at intervals of time and so on.

References

• node-cron

• crontab guru

• Puppeteer

Netlify provides rich features that help you easily deploy Single Page Applications built using frameworks like React, Vue and Angular among others. This takes away the burden of coding and maintaining server-side code.

In some cases, a front-end app needs to communicate with an external third-party API. Some of the third-party APIs require secret API keys to access.

Let's imagine a situation where you want to include weather alerts on your front-end app. As a result, you sign up for open weather map API's paid plan which requires a secret API key to access.

In such situations, you'll need to take care to ensure that you don't expose the secret API key on the front end.

Netlify provides functionality on its web user interface which you can use to hide API keys. But the API key can be accessed from the client side if the environment variable in which it is stored is accessed from the front-end code.

What You'll Learn in This Article

In this article, you are going to hide the secret API key on the Netlify UI and securely access it using Netlify functions in a React app created using create-react-app(CRA). Using Netlify functions makes sure that the API key is not exposed on the client-side.

The process should be similar for other frameworks, though we are using React in this article.

By the end of this article, you will be able to do the following:

• Add a Netlify function to a React app

• Use Netlify functions to securely access secret API keys

• Use the netlify-cli tool to test your Netlify functions

Prerequisites

Outlined below are some of the prerequisites for this article. It is worth pointing out that you can still follow along even if you don't check off every one.

You can Google if there is something you don't understand or post a question on the freeCodeCamp forum. We shall be happy to help.

• Have at least a basic understanding of JavaScript, the React framework, and a version control system like Git.

• Have Node installed on your machine. If you don't have it installed, you can download it for your system from the Node downloads page.

• Have Git installed on your machine. If you don't have it installed, you can do so from the Git downloads page.

• Have a text editor like VS code or Atom installed.

• Have a Netlify account. If you don't have one, you can sign up at no cost using your email address.

• Have a basic knowledge of Netlify's continuous deployment feature. You will use it to deploy your React app to Netlify from GitHub.

• Have a GitHub account because we'll be using Netlify's continuous deployment feature. If you don't have an account, you can sign up using your email address.

How to Use Environment Variables in a React App Created using create-react-app

In this section, you will learn how to use environment variables in a React app created using CRA. If you are already familiar with how to do this, then you can skip to the next section.

React apps created using CRA come configured so you can create custom environment variables in .env file and then access them in your codebase using process.env.

To use this feature, you can follow the steps below. These steps assume you have already created a React app using CRA.

Step 1 - Create a .env file at the root of the project directory

Start by creating a .env file at the root of the project directory. You can then add your environment variables in the .env file so that they look like the below.

REACT_APP_FIRST_SECRET=12345678
REACT_APP_SECOND_SECRET=123456789

In the above .env file, the environment variables are REACT_APP_FIRST_SECRET and REACT_APP_SECOND_SECRET. Their corresponding values are on the right-hand side. You need to take note of a few things when using environment variables with CRA:

• The environment variable should always start with REACT_APP and then be followed by the variable name for it to work. For example, you can name the variable containing your API key REACT_APP_API_KEY.

• There should be no spacing before and after the =.

Step 2 - Access the environment variable in your app using process.env

You can then access those environment variables in your React app using process.env.REACT_APP_FIRST_SECRET and proces.env.REACT_APP_SECOND_SECRET. These variables are added to your codebase at build time, so you should restart your development server if you are running the app on localhost for the changes to take effect.

Accessing the environment variable like that prevents you from pushing your secret API key to a remote Git hosting service like GitHub.

CRA adds the .gitignore file by default. You just need to add .env file to it so that Git will ignore your .env file when you commit your changes.

What you have just learned about environment variables will keep your secrets safe in development.

But what will happen if you do the same thing in production since the environment variables are added to your codebase at build time? The next section will answer that question.

Accessing environment variables from a React app created using creat-react-app exposes your API keys

Yes, indeed it does. Unfortunately, some absolute beginners think otherwise. That included me when I was just starting. But even the create-react-app documentation states that:

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files - create-react-app documentation

To illustrate this, I have built a simple demo app and deployed it to Netlify. This is a simple React app created using CRA. If you are interested, you can fork the project repository and deploy the app to Netlify under your account.

In this app, I am fetching a placeholder todo item from the JSON placeholder API and then displaying it to the user.

The JSON placeholder API does not need an API key to access. But for this illustration, I am using the base URL as the "secret" which I don't want to expose.

Most web-based APIs require passing the API key as a query parameter when authorizing users. While deploying the app, I have set the value of REACT_APP_TODO_BASE_URL to https://jsonplaceholder.typicode.com/todos on Netlify's web interface.

There are two ways you can access the value which I have hidden in the environment variable from the front-end:

1. By inspecting the app's codebase

2. By inspecting the Network tab in the Chrome DevTools

How to inspect the app's codebase

To inspect the app's codebase, follow the steps below:

1. Navigate to the deployed demo app.

2. Open the browser developer tools. You can open them by pressing the key combination CTRL + SHIFT + I on Chrome or right-clicking and then selecting the Inspect option in Chrome. Click the Sources tab. This is what it looks like for me in Chrome if the Sources tab is active. It might look different in other browsers though.

   

3. In the Sources tab, you should see top folder under the Page tab. Then navigate from the top folder to main.e54a1b49.chunk.js by following the path top/netlify-secrets-demo-app.netlify.app/static/js/main.e54a1b49.chunk.js. main.e54a1b49.chunk.js is a one-line minifed file that is not readable.

   

4. Click the{} symbol at the bottom left of the panel to pretty-print the code in a readable format.

5. The secret that we hid in the environment variable is right there in the codebase on line 37 as shown in the image below.

   

How to inspect the Newtwork tab in the Devtools

1. Navigate to the deployed demo app

2. Open the browser developer tool and then open the Network Tab. The network Tab should look like in the image below in chrome. It might look different in other browsers.

   

3. Click the Get another todo button in the browser. You should be able to see another row in the open panel indicating that another request has been made. Mine looks like in the image below.

   

4. Click the last row. Another panel will open showing the request and response headers. Again our "secret" has been exposed.

   

As you can see from the above, your API key may not be visible in the codebase that has been committed to GitHub but it is still accessible on the client-side. Now you know what would happen if your key is for a paid plan.

To keep your secret key secret, you need to access your environment variable using Netlify functions.

In the next section, you will learn how to securely access environment variables using Netlify functions. You will do that by adding Netlify functions to a React app and then deploying it to Netlify.

How to Securely Access Environment Variables with Netlify Functions

In this section, you will fork a simple React app which was created using CRA and then add a Netlify function to it. You will then use your function to access the environment variable instead of accessing it from your front-end code.

This will ensure that you don't expose your secret API key as illustrated in the section above. You will then deploy the app to Netlify using Netlify's continuous deployment feature.

What is a Netlify function?

This is a function that you can use for executing server-side code without having to deploy your own server.

According to the documentation, if you use Netlify functions, you are indirectly using AWS’s serverless Lambda functions which are used for running on-demand, server-side code without having to run a dedicated server.

Below are some of the reasons why you might need to use Netlify functions.

• Fetch live data from an API

• Return dynamic images

• Send automated emails

To start using Netlify functions, create a folder at the root of the project directory and name it netlify.

Inside the Netlify folder, you have to create another folder called functions. In the functions folder, you can create a file that contains a function that executes your code. As a result, the path to the files containing your functions should be netlify/functions.

This is the default location where Netlify will look for your functions. If you want to change the directory where your functions are located inside netlify folder, then you need to add that information to a netlify.toml configuration file at the root of the project directory so that Netlify knows where to look for them.

Using netlify.toml is outside the scope of this article. We shall be using the default configuration.

Below is what a Netlify function looks like. Let's assume that I have created a todo.js file in netlify/functions and added the code below to it.

const axios = require("axios");

exports.handler = async function (event, context) {
  //Securely access environment variables here
};

You will notice that the function has two parameters, event and context. If the function needs a dependency, make sure you add it to your project's package.json file.

In this case, I have added axios as a dependency. This function is executed whenever we hit the netlify/functions/todo endpoint.

There are other ways of triggering Netlify functions, but for this article let's focus on the simplest use case.

Data that have been passed from the front-end can be accessed in the event parameter. In the body of the function, you can do whatever you want including securely accessing your API key and sending data back to the front-end.

That is what you need to know to start using Netlify functions. If you want to dive deeper and explore what else you can do with them, take a look at the documentation.

Now that you understand the basics of Netlify functions, follow the steps below to learn how to implement them in a codebase.

You will fork this demo app and then add Netlify functions to it. It is a simple React project created using CRA.

Step 1 - How to fork the project under your own GitHub account

In this step, you are going to fork the demo app under your own GitHub account. It is necessary to fork the project under your account so that you will be able to deploy it to Netlify.

If you are not interested in forking the project but would like to implement Netlify functions to your project, then skip to step 6.

If you don't know how to fork a GitHub repository, you can follow the steps described in the how to fork a repo section of the GitHub documentation.

Step 2 - How to clone the project to your local machine

In this step, you are going to clone the project to your local machine by running the command below (assuming you forked the project under your accoun). Do not forget to replace GITHUB_USER_NAME with your GitHub username.

git clone git@github.com:GITHUB_USER_NAME/netlify-secrets-demo-app.git

or

git clone https://github.com/GITHUB_USER_NANE/netlify-secrets-demo-app.git

After successfully cloning the project to your machine, you should be able to see the netlify-secrets-demo-app folder containing your project in the directory where the project was cloned.

You can navigate to the project directory and open it in your favorite text editor.

In the next step, you will install dependencies.

Step 3 - How to install dependencies

In this step, you will install dependencies by running the command below on the terminal.

npm install

The above command will install the dependencies you need. The installation process might take a couple of minutes so you need to be patient.

In the next step, you will create a .env file and add environment variables to it.

Step 4 - How to create a .env file

In this step, you are going to create a .env file at the root of the project directory by running the command below on the terminal:

touch .env

You should be able to see the .env file created at the root of the project directory. Copy and paste the contents of the example.env file in it.

Since we'll be using Netlify functions to access environment variables, you don't need to prefix the variable name with REACT_APP as described at the beginning of the article. Change REACT_APP_TODO_BASE_URL environment variable to TODO_BASE_URL and set its value to https://jsonplaceholder.typicode.com/todos.

In the next step, you will add Netlify functions to your app.

Step 5 - How to add Netlify functions to your app

In this step, you will add a Netlify function to the app and use it to securely access your environment variables.

As I mentioned above, by default, Netlify will look for your functions inside the functions directory which must be located inside the netlify folder.

If you are keeping the functions in a different directory inside the netlify folder, then you need to provide additional information inside netlify.toml configuration file at the root of the project directory. This will make sure that Netlify knows where to locate your functions. But in this article, we'll be using the Netlify default configuration.

Create a folder at the root of the project directory and name it netlify. In the netlify folder create another folder and call it functions. In the functions folder, create todo.js file.

Copy and paste the code below in the todo.js file:

const axios = require("axios");

exports.handler = async function (event, context) {
  console.log(event);
  console.log(context);
  try {
    const { id } = event.queryStringParameters;
    const response = await axios.get(`${process.env.TODO_BASE_URL}/${id}`);
    return {
      statusCode: 200,
      body: JSON.stringify({ title: response.data.title }),
    };
  } catch (err) {
    return {
      statusCode: 404,
      body: err.toString(),
    };
  }
};

We'll send data from the front-end as the value of the id parameter in the query string. It is accessible in the queryStringParameters property of the event object.

You can also console.log the event and context parameters to see what their properties are.

We securely access the environment variable and use axios to fetch our todo. If it is successful, we send back a response object with a statusCode of 200 with the data in the body of the response object. If there is an error we return a statusCode of 404 and the error is sent back in the body of the response object.

The function you have added above will be exposed to your front-end code via /.netlify/functions/todo endpoint. It will be executed whenever you hit the /.netlify/functions/todo endpoint. Now let's execute the function from the front-end.

Navigate to the App.js component in the src folder. In the useEffect hook on line 15, instead of accessing process.env. on the front-end, we instead make a GET request to our endpoint exposed by the Netlify function we declared in the previous step.

So change line 15 from:

const url = `${process.env.REACT_APP_TODO_BASE_URL}/${todoId}`;

to:

const url = `/.netlify/functions/todo?id=${todoId}`;

Your App.js component should now look like this:

import { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [todoId, setTodoId] = useState(1);
  const [todo, setTodo] = useState("");
  const [loading, setLoading] = useState(false);

  function getNewTodo() {
    setTodoId((todoId) => (todoId === 20 ? 1 : todoId + 1));
  }

  useEffect(() => {
    async function fetchTodo() {
      const url = `/.netlify/functions/todo?id=${todoId}`;
      try {
        setLoading(true);
        const todo = await fetch(url).then((res) => res.json());
        setTodo(todo.title);
      } catch (err) {
        console.log(err);
      } finally {
        setLoading(false);
      }
    }
    fetchTodo();
  }, [todoId]);

  return (
    <div className="App">
      <p>
        <button onClick={getNewTodo}> Get another todo </button>
      </p>
      <p>{loading ? "Loading..." : todo}</p>
    </div>
  );
}

export default App;

In the code above we are storing todo and todoId in state. Notice that the GET request we are making to the /.netlify/functions/todo endpoint in the useEffect hook. We are passing the todoId as the value of the query parameter id.

After making the fetch request, our todo.js function will be invoked. Inside todo.js as explained above, we'll access the environment variable and fetch the todo which is returned by the function for the front-end code to use. This keeps our environment variable safe since it is not accessible from the front-end. The front-end only consumes what the function returns.

In the next step, you will test whether the function you have just defined works as intended.

Step 6 - How to test your Netlify function

In this step, you will use netlify-cli to test whether the function you defined works as intended.

Run the command below to install netlify-cli globally. The installation will take a bit of time, so be patient:

npm install netlify-cli -g

After netlify-cli is installed globally, run this command to test your function:

netlify dev

Running the above command successfully will start a local development server on port 8888. You will also see the event and context parameters printed on the console when your function is invoked.

You can also test the function by running the command below on another terminal. Make sure the server is running before running the command below otherwise you will get an error.

netlify functions:invoke --querystring "id=1"

This command will invoke the function with the specified query string. You will be prompted to make some selections on the terminal. Just press enter.

Successfully running the above command will fetch our todo which will then be printed on the terminal.

{"title":"delectus aut autem"}

In the next step, you will deploy the project on your local machine to GitHub.

Step 7 - How to commit your changes and push to GitHub

In this step, you will commit the changes on your local machine and push them to GitHub using the commands below.

git commit -m "Add netlify functions"
git push origin master

In the next step, you will use netlify's continuous ceployment feature to deploy the app from GitHub.

Step 8 - How to deploy the app to Netlify from GitHub

In this step, you will use Netlify's continuous deployment feature to deploy from GitHub.

This step requires you to have a Netlify account. If you haven't signed up, you can do so from the signup page at no cost.

Log in to your Netlify account and follow the process for linking a GitHub repository to Netlify for continuous deployment as described in the documentation. Do not forget to add the environment variable TODO_BASE_URL and set its value to https://jsonplaceholder.typicode.com/todos under the advanced settings as you deploy the app to Netlify.

And there you have it! That is how you hide secret API keys using Netlify functions. I hope you enjoyed reading the article.

Conclusion

In this article we learned how to:

• Add a Netlify function to a React app

• Use Netlify functions to securely access secret API keys

• Use the netlify-cli tool to test your Netlify functions

With netlify's serverless functions, you can send emails, fetch data from an API like we just did, and much more. It has equipped front-end developers with the tools to write back-end code without worrying about server maintenance.

You can explore more about what else you can do with Netlify functions in the functions section of the documentation.

Finally, if you have any questions about what we've covered in this article, feel free to ask on the freeCodeCamp forum or DM me on Twitter. You can also ask your question in the Netlify forum.

Thanks for reading!

Here are some key reasons for writing software tests:

• Testing prevents you from introducing breaking changes to your codebase in the future. In other words, the tests you write now might save you from your own self in the future.

• Testing makes sure that the product you build meets the required specification.

• Well tested code gives you more confidence about the quality of your code.

• Testing reduces the likelihood that you have code in your codebase with unknown behavior which might become a source of errors.

• Testing makes it easier to maintain your code. You cannot tell how changing a small section of your codebase might affect the entire codebase if you don't have a high code coverage.

In this article, you will learn how to generate a code coverage report using codecov and gitHub actions.

What is code coverage?

Code coverage is a metric which helps you know how much of your source code has been tested. There are a number of tools which you can use to generate code coverage reports. These tools include:

• codecov

• coveralls

• istanbul

• uberalls

Most code coverage anysis tools use a set of metrics for reporting code coverage anysis. These metrics include:

• Function coverage The number of declared functions that have been invoked after running your test suites.

• Statement coverage The number of statements that have been executed after running the test suites.

• Branch coverage How much of the branch code, such as if code blocks, have been executed.

• Condition coverage The number of boolean sub-expressions that have been tested for true and false values.

• Line coverage Lines of code that have been tested.

In this article, we'll focus primarily on how to use codecov and gitHub actions to generate a code coverage report for a Node project.

Why is code coverage important?

Good code coverage gives you confidence about the code you are shipping, especially if your tests are robust and well-thought out.

When you write tests to increase your code coverage, it is more likely you will detect bugs and fix them before shipping to production.

What is Codecov?

Codecov is a tool you can use to generate coverage reports for your projects. You can upload code coverage data generated in your local file system to codecov and easily visualize the coverage report on different charts.

In this article, though, you are going to use GitHub actions so that the processes of generating coverage reports and uploading them to codecov is automated.

You can integrate codecov as part of your continuous integration workflow. Codecov is capable of making pull request comments and much more. These comments will help other developers know how merging their pull request will affect the code coverage without leaving their GitHub UI.

You can also display a badge showing the coverage report on your GitHub repository for all the collaborators of your project to see. You just have to integrate codecov into your continuous integration workflow.

You can read more about all the other features codecov offers in the documentation.

Hpw tp create a project and generate a coverage report

In the steps below, you are going to create a simple Node project and generate a codecov coverage report for it.

Prerequisites

You need to have the following installed on your machine to be able to run the commands in the next subsections.

• Node

• Text editor like VS code or atom

• Git

Step 1: Create a directory and navigate to it

In this step you are going to create a directory called learn-test-coverage and then navigate to it. You can give the directory a different name if you wish, provided it is a meaningful name.

Run the following commands in the terminal:

mkdir learn-test-coverage
cd learn-test-coverage

In the next step, you are going to initalize the project.

Step 2: Initialize the project

In this step you are going to initialize the project by running the command below in the terminal:

npm init --yes

Successfully running the above command will create a package.json file at the root of your project directory.

In the next step, you are going to install jest as a development dependency.

Step 3: Install Jest as a dependency

In this step, you are going to install jest as a development dependency. Jest is a simple JavaScript testing framework which usually works out of the box in Node with minimal setup.

Run the command below in the terminal:

npm install --save-dev jest

After successfully running the above command, you should be able to see the node_modules directory and package-lock.json file created at the root of your project directory. You should also be able to see Jest installed as a development dependency in the package.json file.

In the next step you will initialize a git repository in your project.

Step 4: Initialize a Git repository

In this step you are going to intialize a git repository in your project by running the command below:

git init

Create a .gitignore file at the root of the project directory and add the following code to it. This will ignore node_modules file so that it is not committed to the remote repository later.

/node_modules

In the next step we will declare a simple function and write a test for it.

Step 5: Declare a function and write a test for it

In this step, you will declare a simple function called sum in the sum.js file. This function takes two parameters and returns their sum. You will also write tests for your code in the sum.test.js file.

Run the command below in the terminal:

touch sum.js sum.test.js

You should be able to see the two files created in your project. Copy and paste the code below in sum.js:

function sum(num1, num2) {
  return num1 + num2;
}

module.exports = sum;

Similarly, copy and paste the code below in sum.test.js:

const sum = require("./sum");

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

Change the value of the "test" property in your package.json to "jest --coverage" so that the value of the "scripts" property looks like this:

{
    "test": "jest --coverage"
}

In the terminal run npm test to run your test. After the test completes, you should be able to see the code coverage summary in the terminal and a coverage directory generated.

Here's what I see in my terminal:

You can also view the summary in the browser by opening the index.html file inside the coverage/lcov-report folder. You should be able to see the following:

You are able to generate the coverage report because Jest comes bundled with istanbul. Make sure you delete the coverage file, as you don't need it since we'll automate the process using GitHub actions.

You should be able to identify which metrics istanbul uses to generate coverage report (the metrics I mentioned at the beginning of the articl).

In the next step we'll add GitHub actions' Continuous Integration to our project.

Step 6: Add GitHub actions' continuous integration workflow

In this step you will add GitHub actions' continuous integration workflow to your project so that codecov will automatically generate a report on creating a pull request.

Create a .github file at the root of your project folder. Inside the .github folder, create a workflows folder. Then inside workflows create a codecov.yml file. The file doesn't need to be named codecov. You can give it any name you like.

Copy and paste the code below inside your codecov.yml file.

This is the workflow configuration file. It will run your test when the two events push and pull_request occur. You can read more about YAML syntax and gitHub actions to understand the contents of the file below.

name: Running Code Coverage

on: [push, pull_request]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x, 13.x, 14.x, 15.x]

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2
      with:
        fetch-depth: 2

    - name: Set up Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install dependencies
      run: npm install

    - name: Run tests
      run: npm run test

    - name: Upload coverage to Codecov
      uses: codecov/codecov-action@v1

The last step is responsible for uploading the coverage report to codecov in the above configuration file.

In the next step, you are going to create a repository on GitHub and push your project to it

Step 7: Create a repository on GitHub and push your changes to it

In this step, you are going to create a repository on gitHub and push your changes to it.

Navigate to GitHub. Create an empty repository and name it learn-test-coverage.

At the root of your project directory on your machine, run the following commands to initialize your project repository and commit your changes.

git add .
git commit -m "Initial commit"

You can then add the remote repository you created above to your local repository using the command below:

git remote add origin <Remote repository>

Finally, you can push your changes to your remote repository using the command below:

git push origin master

In the next step, we are going to link our GitHub repository to codecov. This makes sure that our coverage data is automatically uploaded whenever we create a pull request so that a report is generated.

Step 8: Link your remote repository to codecov

In this step you are going to link your repository to codecov. But you need to sign up first.

Codecov allows you to sign up with your GitHub account in just a couple of minutes. You can then select the GitHub repository you want to link on the codecov dashboard.

After selecting the repository, you will be redirected to a page with a token. You don't need this token for public repositories.

For private repositories, you will need to add it to your GitHub secrets and then add the following at the bottom of your workflow configuration file so that it looks like this:

- name: Upload coverage to Codecov
    uses: codecov/codecov-action@v1
    with:
        token: ${{ secrets.YOUR_SECRET_TOKEN }}

Step 9: Test your continuous integration workflow

In this step, you are going to test your continuous integration workflow.

Create a README.md file at the root of your project. Copy and paste the codecov badge on your codecov dashboard under the settings tab in your README.md file. This is what the badges look like.

Commit and push the changes to GitHub. You should be able to see the code coverage indicated on your badge after the CI workflow run completes.

You can also view the coverage report on your codecov dashboard. Try creating a pull request to see what happens.

For more insights on what else you can do, check out the Codecov documentation.

If you get stuck, you can also check out my project on GitHub.

How does codecov generate its coverage report?

Codecov uses the terms hit, partial and miss to describe the code coverage in your project. Coverage is the ratio of hits to the sum of hits, partials and misses.

If the code is described as a hit, it means that the source code was executed by the test suite.

If it is described as partial, it indicates that the source code was not fully executed by the test suite. There are remaining branches that were not executed.

A miss indicates that the source code was not executed by the test suite.

A code base that has 5 lines executed by tests out of 12 total lines will receive a coverage ratio of 41% (rounding down) - Codecov documentation

That is how you integrate codecov as part of your contnuous integration workflow. If you want to explore more features, you can check out the Codecov documentation.

Conclusion

In this article we looked at how you can integrate codecov as part of your continuous integration workflow.

Increasing code coverage will help you in so many ways. But having higher code coverage just for the sake of it can get you into trouble if your tests are not robust and well thought out.

Code coverage analysis tools are just tools meant to make your work easier. But you shouldn't substitute them for code reviews. A tool is only as good as its user.

References

• Codecov documentation

• Jest documentation

• Instanbul documentation

One way of doing so is by using HTML forms. But there are also tons of frameworks out there that you can use to build web apps very quickly.

One such framework is React. You can bootstrap a single page application (SPA) very easily using create-react-app (CRA). Then you can deploy it to platforms such as Netlify, Vercel, Firebase and Digital Ocean in just a couple of steps.

The main focus of this article will be on how to add Netlify form functionality to a React app bootstrapped using create-react-app. At the end of this tutorial you will be able to:

• Quickly set up a single page app using create-react-app

• Add functionality to utilize Netlify's builtin form handling feature

• Deploy the app to Netlify

• Configure the builtin form handling feature on Netlify to send email notifications whenever a form has been submitted by a client

Whether you are beginner trying to deploy your first React app or you are an experienced React developer, this article will help you learn to use Netlify's builtin form functionality without writing any server side code.

If you are an experienced React developer, you can skip the introduction and go to step 6. If you are a beginner in React, you can follow along right from the beginning.

Prerequisites

To follow along with this article, you should:

• Have an intermediate knowledge of JavaScript. If you are a beginner, you can still follow along and ask questions on the freeCodeCamp forum if there is something you don't understand. You can also copy the code samples in each section and play with them in your text editor to make sense of what is going on.

• Have at least basic knowledge of the React library

• Have Node installed on your machine

• Have a Netlify account. If you don't have one, you can signup for an account at no cost using your email address.

• Have a text editor like VS code or Atom installed on your machine. You can try out the code samples as you follow along. It will make it easier for you to understand.

Step 1: Check whether you have node and npm installed on your machine

Before we get started, you should check whether you have node installed on your machine.

Node is a JavaScript runtime environment, and it's important to have it installed to be able to run the project. Open a terminal and type the following command in the command prompt.

node - v

Instead of the above command, you can also type the command below. Both of them do the same thing.

node --version

If Node is installed, you should be able to see the version printed on the terminal. Your version might be different from mine but you should see something like:

v15.13.0

If Node is installed, that means npm is also installed because recent versions of Node come with npm. If you are curious, type the command npm --version or npm -v. You should be able to see the version of npm which has been installed.

On the other hand, if you don't have Node installed on your machine, you can download and install for your platform from here.

Step 2: Navigate to the directory where you want to create your project

Next, you need to navigate to a directory where you want to create your project. You can work from the Desktop or from any directory of your choice.

I like keeping my personal projects in a directory called projects on the desktop for easy access. This is just personal choice.

Open the terminal and navigate to the directory where you want to create your project. I am using cd (change directory) in the commands below.

Take note: I already have a directory named projects on the Desktop. If you don't, you will have to first run the command mkdir projects before you cd into it. Like I said above, you can decide to work from another directory and then you won't have to run the commands below.

1. cd Desktop

2. cd projects

Step 3: How to bootstrap a single page app using create-react-app

How we are going to bootstrap a React project using create-react-app. In the directory where you want to create your project, run the command below.

npx create-react-app netlify-form

I have named the project netlify-form. You can give it a different name if you wish.

If you don't have create-react-app installed, you will see a prompt on the terminal asking whether it should be installed. Type Y on the command prompt (for "Yes"). It will install create-react-app and then create a React project in the netlify-form directory.

If you already have create-react-app in your system, it will go straight to creating a React project in the netlify-form directory. This will take a couple of minutes, so just be patient.

In the next step, you will start the development server.

Step 4: Start the development server

In this step, we are going to start the development server. This ensures hot reloading when we make changes to the project during development so that we are able to see how our project is taking shape.

You can open the netlify-form directory in your text editor of choice. When you are in netlify-form, open the terminal and run the command below.

npm run start

The above command starts the development server on port 3000. If there is another project or service running on port 3000, you will be prompted to start the server on another port.

A new browser tab will be opened in your default browser where you can see the project. Any changes you make will automatically be reflected in the browser.

In the next step, you are going to create a component which will contain your form.

Step 5: Create a new component inside the src directory

Now you are going to create a component named Form inside the src directory. In this component, you will have the form which will be rendered in your app.

Create a Form.js file in the src directory then copy and paste the code below in it:

import React from "react";

export default function Form() {
  return (
    <form name="contact" method="post">
      <p>
        <label htmlFor="name">Name</label> <br />
        <input type="text" id="name" name="name" required />
      </p>
      <p>
        <label htmlFor="email">Email</label> <br />
        <input type="email" id="email" name="email" required />
      </p>
      <p>
        <label htmlFor="message">Message</label> <br />
        <textarea id="message" name="message" required></textarea>
      </p>
      <p>
        <input type="submit" value="Submit message" />
      </p>
    </form>
  );
}

The above component returns an ordinary form. I have enclosed each label-input pair and label-textarea pair in its own p tag.

There is nothing special about the p tag. You can use div if you wish. I just used it because I want to apply spacing between successive label-input pairs without using CSS.

You can import the Form component and render it inside App. To clean up App.js, you can also delete some items which come with create-react-app, so that it looks like:

import "./App.css";
import Form from "./Form";

function App() {
  return (
    <div className="App">
      <h1> Get in touch </h1>
      <Form />
    </div>
  );
}

export default App;

You can also clean up App.css so that it has only the following CSS:

.App {
  padding: 1em;
}

When you check your form in the browser it should look like the image below.

Right now deploying that app to Netlify won't enable us to capture a client's form submissions. To do that, we need to add necessary information to our app so that Netlify's bots will be able to detect our form.

In the next step, we are going to add all the necessary information to make the JSX form in React detectable by Netlify.

Step 6: Add necessary information to make the form detectable by Netlify's bots

In this step, you are going to add some information to your app so that Netlify will be able to detect your app's form setup. If your form is deployed in plain HTML, the process of making it detectable is quite simple. You can read about it in the documentation.

But if you are dealing with a JSX form in React like in this simple app we are building, then you will have to do a bit more work. You can follow the steps outlined below.

Add the HTML version of the form to the index.html file

Copy and paste your JSX form into the index.html file just after the opening body tag. This will ensure that Netlify detects our form because build bots parse the HTML files directly at deploy time. The JSX form cannot be parsed by the bots.

You can remove the label elements and the submit input element because we will add a hidden attribute to the form so that it is not visible to users and screen readers.

You can only leave the type and name attributes on the input elements and name attribute on textarea so that we keep the form minimal.

This is illustrated in the code below:

<form name="contact" netlify netlify-honeypot="bot-field" hidden>
     <input type="text"  name="name">
     <input type="email" name="email">
     <textarea name="message"></textarea>
</form>

As you can see in the above code snippet, there are additional attributes netlify and netlify-honeypot on the form. Netlify bots will use them while parsing your HTML so make sure to add them.

Do not forget to add the hidden attribute, because this form needs to be hidden from the users of your website. It is also worth pointing out that the name attributes in the HTML form must be exactly the same as those in the corresponding JSX form.

Add a hidden input element in your JSX form

You also need to add a hidden input element in your JSX form with the attributes name and value as illustrated in the code below:

<input type="hidden" name="form-name" value="contact" />

The value of the name attribute should always be "form-name" and the value of the value attribute should be the name of the HTML form, which in our case is contact.

Your Form.js file should now look like this:

import React from "react";

export default function Form() {
  return (
    <form name="contact" method="post">
      <input type="hidden" name="form-name" value="contact" />
      <p>
        <label htmlFor="name">Name</label> <br />
        <input type="text" id="name" name="name" required />
      </p>
      <p>
        <label htmlFor="email">Email</label> <br />
        <input type="email" id="email" name="email" required />
      </p>
      <p>
        <label htmlFor="message">Message</label> <br />
        <textarea id="message" name="message" required></textarea>
      </p>
      <p>
        <input type="submit" value="Submit message" />
      </p>
    </form>
  );
}

If you check the app in the browser, you should be able to see the form – but you won't be able to submit it from your local setup. You can only submit forms after deploying your app to Netlify.

So let's do that now.

Step 7: Deploy the app to Netlify

In this step, you are going to deploy our app to Netlify so that you are able to test whether clients can make form submissions.

There are a couple of ways you can deploy your app to Netlify. One method is by building the app locally and deploying it from the command line, or by dragging and dropping the production build to Netlify. The second method is by configuring automatic deployment via GitHub, BitBucket, or GitLab.

In this app, you will build the app locally and use the simplest method of dragging and dropping. This step requires you to login to your Netlify account. If you don't have an account, you can signup for one.

Run the command npm run build in the terminal. This will build the app for production to the build folder. This will take a bit of time. You should be able to see the build directory after running the command successfully.

Login to your Netlify account. On the Netlify dashboard, click the Sites menu item. At the bottom of the page, there is an area where you can drag and drop the production build of your app. After dragging and dropping the build folder, the build process begins.

After the site is built successfully, you can check the project dashboard to find out whether Netlify is detecting your form. If it is detecting the form, you will usually see a message stating so in the forms section at the bottom left.

What is left for you to do is to fill out the form and submit it. After submission, you should be able to see the information submitted.

Next, we'll learn how to configure email alerts so you get notified whenever a user submits a form.

Step 8: Configure email updates whenever a user submits a form

In this section, you will configure your app to send email notifications to an email address whenever a form is submitted.

To do this, navigate to the site settings. On the left, you will see a list of menu items. Click the forms option.

Under outgoing notifications, click Add notification and select the Email notification option. You will then configure your preferences accordingly.

That is all you need to do to use Netlify's builtin form functionality with CRA. You don't need server side code to get feedback from your clients.

If you have managed to successfully follow the above steps, congratulations! You can now go ahead and explore other features.

If you encounter errors or issues relating to Netlify forms while following this tutorial, feel free to check out this netlify form error debugging tip.

You can also read the netlify forms documentation.

If you fail to find a solution after using the above resources, you can ask a quesion in the netlify forum. There are quite a number of friendly folks in that community who might help you out.

Conclusion

In this article, we look looked at:

• How to create a React app using create-react-app

• How to add a JSX form to your React app

• How to add necessary information so that your form can be detected by Netlify's bots

• How to deploy a production build to Netlify

• How to set up email notifications whenever a client submits a form

References

• Netlify forms documentation

• Create react app documentation

• React documentation

• Netlify form error debugging