In this article, we will create a React PWA that has reusable React components and styling using Create React App and styled-components. The application will use data fetched from an external REST API.
Pre-requisite
- Basic understanding of JavaScript ES6
- Basic understanding of HTML and CSS
- Basic understanding of react
- Have Nodejs installed on your machine
What is a progressive Web Application (PWA)
Progressive Web Application (PWA) is a web application that behaves like a mobile application.
It is usually faster and more reliable than regular web applications as it focuses on an offline/cache-first approach. This makes it possible for users to still open our application when they have no or a slow internet connection due to its focus on caching. Also, users can add our application to the home screen of their smartphone or tablet and open it like a native application.
Project setup
Let’s get started as we create a new project using the create-react-app so go to a directory where you will store this project and type the following in the terminal
Install create-react-app CLI tool globally:
Create a new project with create-react-app by running the following command:
Creating a React PWA
Creating a PWA requires these two files
- serviceWorker.json
- manifest.js
Create React App comes with a configuration that supports PWA, which is generated when we initiate the build script. We can set up our Create React App project as a PWA by accessing the src/index.js
file and changing the last line, which will register the serviceWorker:
Now, when we run the build script, the minified bundle of our application will use the offline/cache first approach. Under the hood, react-scripts uses a package called workbox-webpack-plugin, which works together with webpack 4 to serve our application as a PWA. It doesn’t only cache local assets placed in the public directory; it also caches navigation requests so that our application acts more reliably on unstable mobile networks.
manifest.json
Most of the configuration for our PWA is placed here, which we can see if we open the public/manifest.json file.
The short_name and name fields describe how our application should be identified to users.
The short_name field should be no longer than 12 characters and will be shown underneath the application icon on the user’s home screen. For the name field, we can use up to 45 characters. This is the main identifier for our application and can be seen during the process of adding the application to the home screen.
The icon field configures the particular icon users see when they add our application to their home screen.
Finally, using the theme_color and background_color fields, we can set the colors (in HEX format) for the top bar when our application is opened from the home screen on a mobile device:
Now that we have setup our PWA environment, let’s build the Github profile tracker project.
Project Overview
Robot army PWA will show a list of robots with images received from an external API. Therefore, we need to fetch the official jsonplaceholder REST API and pull information from its endpoints. We’ll use the fetch API for this. We can retrieve our robot’s data by executing the following command.
API Reference
Our Robot army PWA will fetch robots data from https://jsonplaceholder.typicode.com/users While the robot image will be fetched from https://robohash.org/
Structuring our application
To begin, we’ll create two new directories called components and containers inside the src directory. The container directory will contain only the smart components (i.e component that has state). The files for the App component can be moved to the container directory and the App.test.js
file can be deleted since testing will not be covered in this article.
Styling in React with styled-components
Using CSS files to add styling to our React components forces us to import these files across different components, which makes our code less reusable. Therefore, we’ll add the styled-components package to the project, which allows us to write CSS inside JavaScript (so-called CSS-in-JS) and create components. By doing this, we’ll get more flexibility out of styling our components, will be able to prevent duplication or overlapping of styles due to classNames, and we’ll add dynamic styling to components with ease.
All of this can be done using the same syntax we used for CSS, right inside our React components. In this project, all the component styling will be based on styled-components.
The first step is installing styled-components using npm:
Header component
Create a new component called Header and add the following code to src/components/Header/Header.js
:
Robot Component
Create a new component called Robot and add the following code to src/components/Robot/Robot.js
:
This component recieves the robot data as props, using the props id to fetch the robot image from https://robohash.org
Robots Component
To retrieve our robots information, create a new container called Robots and add the following code to src/containers/Robots/Robots.js
:
This new component contains a constructor, where the initial value for state is set and a componentDidMount
life cycle method, which is used asynchronously to set a new value for state when the fetched API returns a result.
Now, import the Header
and Robots
component into the App component:
Serving the PWA
With the configuration of our PWA in place, it’s time to see how this will affect the application.
The PWA will only be visible when the build version of our application is open. To do this, execute the following command in the projects’ root directory:
This will initiate the build process, which minifies our application to a bundle that’s stored inside the build directory. Create React App suggest how we should serve this build version:
The npm install command installs the serve package, which is used to serve built static sites or, in this case, JavaScript applications. After installing this package, we can use it to deploy the build directory on our server or local machine by running the following:
If we visit our project in the browser at http://localhost:5000/, we’ll see that everything looks exactly like the version we’re running on http://localhost:3000/. There is one big difference, however: the build version is running as a PWA. This means that if our internet connections fails, the application will still be shown. We can try this out by disconnecting our internet connection or stopping the serve package from the command line. If we refresh the browser on http://localhost:5000/, we will see the exact same application.
Also, if we visit our live project demo at https://robot-army-pwa.netlify.app/ then disconnect our internet connection and refresh the browser, we will see the exact same application.
Conclusion
That’s it! We have succeeded in building our PWA with react.
In the process, we have learned:
- What is a PWA
- How to create a Progressive web application
- How to serve a progressive web application
- Styling in React with styled-components
You can find the complete project for this article on Github. Here is the link to the live demo of the project https://robot-army-pwa.netlify.app/. Happy coding.