What is public/manifest.json file in create-react-app?

When working with a create-react-app project, you may have noticed a public/manifest.json file in the project structure. But what exactly is this file and what is its purpose?

The manifest.json file is a JSON (JavaScript Object Notation) file that provides metadata about your web application. It allows you to define various properties such as the name of your application, its description, icons, and more.

One of the main benefits of using the manifest.json file is that it enables your web application to be installed on a user’s home screen or desktop, similar to a native mobile or desktop application. This is known as the Progressive Web App (PWA) experience.

Structure of manifest.json

The manifest.json file consists of a set of key-value pairs that define different properties of your web application. Here’s an example of a basic manifest.json file:

{
  "name": "My React App",
  "short_name": "React App",
  "description": "A simple React application",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

In this example, we have defined the following properties:

name: The name of your web application.
short_name: A shorter name for your application, typically used when there is limited space.
description: A brief description of your application.
icons: An array of icons for different sizes and types.
start_url: The URL that should be loaded when the application is launched.
display: Defines how the application should be displayed (e.g., fullscreen, standalone, minimal-ui, browser).
theme_color: The color that will be used for the application’s theme.
background_color: The background color of the application.

Using manifest.json in create-react-app

When you create a new React application using create-react-app, the public/manifest.json file is included by default. You can modify this file to suit your application’s needs.

By default, the manifest.json file includes a single icon with a size of 192×192 pixels. You can replace this icon with your own by simply replacing the icon.png file in the public directory with your desired icon.

Once you have made the necessary modifications to the manifest.json file, you can test the PWA experience by running your application and opening it in a supported browser. You should see an option to install the application on your home screen or desktop.

Conclusion

The public/manifest.json file in a create-react-app project allows you to define metadata about your web application, enabling it to be installed as a Progressive Web App. By customizing the properties in the manifest.json file, you can enhance the user experience and make your application feel more like a native app.

Remember to keep the manifest.json file up to date as you make changes to your application’s branding, icons, or other properties.

What is public/manifest.json file in create-react-app?