This project was bootstrapped with Create React App. It uses Google Firebase services for authentication, hosting, data persistence, and analytics.
Clone the repository. From the root of the project, run npm install to install packages and dependencies. As of writing, we have been using Node v.16.x.x, which is the active LTS version. To run the app in development mode, run npm start.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
The
.firebasercfile stores your settings for managing project aliases and managing deploy targets.
You define your Firebase Hosting configuration in your
firebase.jsonfile. Firebase automatically creates yourfirebase.jsonfile at the root of your project directory when you run thefirebase initcommand.You can find a full
firebase.jsonconfiguration example (covering only Firebase Hosting) at the bottom of the Firebase Docs page. Note that afirebase.jsonfile can also contain configurations for other Firebase services.You can check the deployed
firebase.jsoncontent using the Hosting REST API.
Cloud Firestore automatically creates indexes to support the most common types of queries, but allows you to define custom indexes and index overrides as described in the Cloud Firestore guides.
You can create, modify and deploy custom indexes in the Firebase console, or using the CLI. From the CLI, edit your index configuration file, with default filename
firestore.indexes.json, and deploy using thefirebase deploycommand.
You can deploy rules using the Firebase CLI. Using the CLI allows you to keep your rules under version control with your application code and deploy rules as part of your existing deployment process.
With Cloud Firestore Security Rules, you can focus on building a great user experience without having to manage infrastructure or write server-side authentication and authorization code.
Security rules provide access control and data validation in a simple yet expressive format. To build user-based and role-based access systems that keep your users' data safe, you need to use Firebase Authentication with Cloud Firestore Security Rules.
Update the pokemon.json list (and pokemon.js list) with new pokemon that are released, and then run the following bash script to save the sprites for our Living Pokédex. This requires jq.
for POKEMON in $(cat src/pokemon.json | jq -r '.[].slug')
do
echo $POKEMON
curl -o "public/sprites/$POKEMON.avif" "https://img.pokemondb.net/sprites/scarlet-violet/icon/avif/$POKEMON.avif"
doneManual - Firebase CLI
Windows
npm run build
$Date = Get-Date -Format "dddd-MM-dd-yyyy-HH-mm-ss"
$Channel = "Preview-" + $Date
firebase hosting:channel:deploy $Channel --expires 7d --project living-pokedex-de070 --jsonLinux
npm run build
Date=$(date +'%A-%m-%d-%Y-%H-%M-%S')
Channel="Preview-"$Date
firebase hosting:channel:deploy $Channel --expires 7d --project living-pokedex-de070 --jsonWindows
npm run build
firebase deploy --only hosting --project living-pokedex-de070 --jsonLinux
npm run build
firebase deploy --only hosting --project living-pokedex-de070 --jsonAutomatic - Firebase Hosting GitHub Action
- Create a Pull Request to merge new feature branch into the Main branch.
- Firebase Hosting GitHub Action will build and deploy the new changes to a Preview Channel on Firebase Hosting.
- After testing the features at the Preview Channel URL, merge the Pull Request into the Main branch.
- Firebase Hosting GitHub Action will build and deploy the new changes to the Live Channel on Firebase Hosting.
- Improve README about Sprites. Add bash script for PowerShell.
GitHub FIREBASE_TOKEN secret was created using firebase login:ci to create a token so that we can use the Firebase Tools CLI on the CI/CD system in GitHub Actions. When I get the list of existing preview channels.
