https://github.com/mohamedsamara/react-frontend-optimization
⚡ Frontend Optimization with React
https://github.com/mohamedsamara/react-frontend-optimization
background-sync offline push-notifications pwa service-worker
Last synced: about 1 year ago
JSON representation
⚡ Frontend Optimization with React
- Host: GitHub
- URL: https://github.com/mohamedsamara/react-frontend-optimization
- Owner: mohamedsamara
- License: mit
- Created: 2024-12-03T14:14:34.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-26T12:43:34.000Z (over 1 year ago)
- Last Synced: 2025-01-26T13:37:00.723Z (over 1 year ago)
- Topics: background-sync, offline, push-notifications, pwa, service-worker
- Language: TypeScript
- Homepage:
- Size: 154 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Frontend Optimization
This project serves as a template for building Progressive Web Apps (PWAs) that include offline functionality, background syncing, push notifications, and code splitting. The app leverages service workers for offline support and background syncing, ensuring data is kept up-to-date.
## Features
- Progressive Web App (PWA): Works offline and can be installed for use on mobile and desktop.
- Offline Functionality: Create, edit, and delete content without an internet connection. Data is stored using IndexedDB.
- Background Syncing: Changes are automatically synced when the device is online. This sync process updates the server with the most recent data.
- Push Notifications: Notifications alert users to updates and changes within the app.
- Code Splitting: Improves initial load performance by loading only the necessary code.
## Setup Instructions
1. Start the Backend Server and Frontend
To start the server and frontend together, use the following steps:
1. Install dependencies: First, navigate to your project directory and install the required dependencies for both the client and server.
```bash
yarn install
```
2. Start both server and frontend: To start both the backend and frontend at the same time, run the dev script from your root project directory. This will run the server (Express API) and the frontend (React app) concurrently.
```bash
yarn dev
```
2. Build the Application for Production
To create a production build of the app (both frontend and backend), run:
```bash
yarn build
```
After building the app, you can start both the server and frontend in production mode using:
```bash
yarn start
```
3. Generate VAPID Keys for Web Push
First, navigate to server directory and run the command:
```bash
npx web-push generate-vapid-keys
```
4. ENV
Create `.env` file for both client and server. See examples:
[Frontend ENV](client/.env.example)
[Backend ENV](server/.env.example)