Day 1: Introduction to PWAs and Setting Up a Basic React App

Today, you’ll begin building a Progressive Web App (PWA) using React. We’ll start by setting up a basic React app that will serve as the foundation for adding PWA features over the next few days.

What You Will Do Today:

1. Understand the basics of a PWA.
2. Set up a React app using create-react-app.
3. Configure the project structure.
4. Create a basic layout for the app to build on in future tutorials.

Step 1: Understanding the Basics of a PWA

A Progressive Web App (PWA) combines the features of a web app with native app capabilities, allowing users to install it on their devices, work offline, and load faster. Here are some key features of PWAs:

• Offline Capabilities: PWAs work offline or on low connectivity using cached assets and service workers.
• Installable: Users can add PWAs to their home screens without using app stores.
• Responsive and Fast: PWAs load quickly and adapt to various screen sizes and device types.

Step 2: Setting Up a React App

1. Create a new React app. In your terminal, run:

   npx create-react-app my-pwa
   cd my-pwa

This will create a new React project in a folder named my-pwa.

2. Start the development server. Run:

   npm start

The app should open at http://localhost:3000 in your default browser, displaying the default React page.

3. Clean up the default code to prepare for the PWA structure.

• Delete the files logo.svg, App.css, App.test.js, setupTests.js, and reportWebVitals.js in the src folder.
• Update App.js as follows:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Welcome to My PWA</h1>
      <p>This is a Progressive Web App built with React.</p>
    </div>
  );
}

export default App;

• Update index.js to remove unnecessary imports:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

Step 3: Setting Up the Project Structure

Now let’s organize the project structure to make it easy to expand in future tutorials.

1. Create the following folders in the src directory:

• components: for reusable UI components.
• pages: for pages of the app (e.g., Home, About).
• services: for utility functions like API requests.
• assets: for images, icons, and other static assets.

1. Create a Home.js file inside the pages folder for the home page:

   // src/pages/Home.js
   import React from 'react';

   function Home() {
     return (
       <div>
         <h2>Home Page</h2>
         <p>Welcome to the home page of this PWA.</p>
       </div>
     );
   }

   export default Home;

3. Import the Home component into App.js and set up basic routing.

   import React from 'react';
   import Home from './pages/Home';

   function App() {
     return (
       <div>
         <h1>Welcome to My PWA</h1>
         <Home />
       </div>
     );
   }

   export default App;

Step 4: Adding Basic Styling

To make your app visually appealing, you can add some global styles.

1. In the src folder, create a file called styles.css and add basic styles:

   /* src/styles.css */
   body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     background-color: #f2f2f2;
   }

   h1, h2 {
     color: #333;
   }

   p {
     color: #666;
   }

   div {
     padding: 20px;
     text-align: center;
     background-color: #fff;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     border-radius: 8px;
   }

2. Import styles.css in index.js:

   import './styles.css';

After saving, you’ll see a simple but clean design with centered content.

Step 5: Preparing the App for PWA Features

The default create-react-app setup includes some PWA functionality, such as a service worker file in public/service-worker.js. Over the next few days, you’ll configure this file and add additional PWA features.

1. Open public/index.html and set the theme-color to match your app’s design:

   <meta name="theme-color" content="#f2f2f2" />

2. Add a placeholder for the app icon in the public folder. You can replace it later with your own app icons:

   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

3. Finally, ensure that the manifest.json file in public has the basic settings for your PWA. Open public/manifest.json and edit it as follows:

   {
     "short_name": "MyPWA",
     "name": "My Progressive Web App",
     "icons": [
       {
         "src": "favicon.ico",
         "sizes": "64x64 32x32 24x24 16x16",
         "type": "image/x-icon"
       }
     ],
     "start_url": ".",
     "display": "standalone",
     "theme_color": "#f2f2f2",
     "background_color": "#ffffff"
   }

Summary

Today, you set up a basic React app with a clean structure to start building a PWA. You created a Home page, added some styling, and prepared the app with initial PWA configuration settings. You’re now ready to start adding PWA-specific features like service workers and offline capabilities in the next tutorial.

Tomorrow, you’ll learn how to add service workers to enable offline support.