Hosting by Firebase and infinityFree
Step 1: Install Tools on Your Computer
1. Install [Link]
Firebase CLI requires [Link] to work.
Download [Link] from here:
[Link]
Choose the LTS version (the one labeled Recommended).
After installation, open Terminal (or CMD) and type:
node -v
npm -v
If it shows a version number, you are good to go
2. Install Firebase CLI (Command Line Tool)
npm install -g firebase-tools
After installation, verify it works by typing:
firebase --version
Step 2: Create a Firebase Project
1. Open this link:
[Link]
2. Click "Add project"
3. Choose a name for your project (e.g., anood-shop)
4. Disable Google Analytics (optional), then click "Create Project"
Now you have a ready Firebase project
Step 3: Enable Firestore Database
1. Open your project in Firebase Console
2. From the left menu:
Build → Firestore Database
3. Click "Create database"
4. Choose:
• Start in test mode (allows temporary read and write access without
restrictions)
• Select your database location (e.g., europe-west or us-central)
Important: In test mode, the database is open to everyone, so do not use it
in a real app without restrictions.
Step 4: Login to Firebase CLI
1. Open Terminal and type:
firebase login
A browser will open; log in with the Google account you used to create the project.
Step 5: Prepare Your Project Folder
1. On your computer, create a new folder for your project, for example:
• On your desktop, create a folder named firebase-app
2. Open Terminal inside this folder
3. Run the command:
firebase init
You will see setup steps, answer as follows:
Question Answer
What do you want to use? Press Space to select Hosting then Enter
Associate with project Choose your project from the list
Public directory? Type public
Configure as single-page app? Type y
Question Answer
Overwrite [Link]? Type n so you can write your code manually
Now you have:
• A folder named firebase-app
• Inside it, a folder named public
• Your Firebase project is linked
Step 6: Write the HTML Page Code to Upload Data to Firestore
1. Open the file:
firebase-app/public/[Link]
Delete everything inside, then paste this full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Anood's Store</title>
<script src="[Link]
<script src="[Link]
</head>
<body>
<h1>Add Product</h1>
<form id="productForm">
<input type="text" id="productName" placeholder="Product Name" required><br><br>
<input type="number" id="productPrice" placeholder="Price" required><br><br>
<button type="submit">Add Product</button>
</form>
<script>
// Copy this data from Firebase Console > Project Settings > General > SDK Setup and Config
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.[Link]",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.[Link]",
messagingSenderId: "XXXXXXXXXX",
appId: "APP_ID"
};
// Initialize Firebase
[Link](firebaseConfig);
const db = [Link]();
// التعامل مع الفورم
const form = [Link]("productForm");
[Link]("submit", async (e) => {
[Link]();
[Link]("Form submitted!"); // << هذه الرسالة ستظهر فيConsole لتأكيد عمل الحدث
const name = [Link]("productName").value;
const price = parseFloat([Link]("productPrice").value);
try {
await [Link]("products").add({ name, price });
alert(" Product added successfully!");
[Link]();
} catch (err) {
alert(" Error: " + [Link]);
}
});
</script>
</body>
</html>
Step 7: Copy Firebase Config Data
Where do you get the data inside firebaseConfig?
• Open Firebase Console
• Select your project
• From the side menu:
Settings > Project settings
• Scroll down to:
Your apps → Web (</>)
• Click “Add app” if you haven’t created a Web app yet
• After creation, you will see code like this:
const firebaseConfig = {
apiKey: "AIzaSyD_....",
authDomain: "[Link]",
projectId: "your-project-id",
...
};
Copy the values and paste them into the HTML code inside firebaseConfig.
Step 8: Deploy the Website on Firebase Hosting
Inside your project folder (firebase-app), run the following command in the terminal:
firebase deploy
After a few moments, you will see a message like:
✔ Deploy complete!
Hosting URL: [Link]
Open the link — you’ll see your site with the product form
Step 9: Make Sure the Data is Being Added to Firestore
Go back to Firebase Console
Select from the menu:
Firestore Database
You’ll notice a new collection called products containing the products you’ve added
from the form.
Step-by-Step Guide to Upload a PHP + MySQL Project on InfinityFree:
1. Create an Account on InfinityFree
• Go to: [Link]
• Click Sign Up Now or Create Account.
• Enter your email, password, and other required information.
• Activate your account via the verification link sent to your email.
2. Create a New Website (Hosting Account)
• After logging in, click on Create Account or New Hosting Account.
• Choose a site subdomain (e.g., [Link]).
• Complete the steps and wait for your hosting account to be created.
3. Upload Your Project Files (PHP files and HTML pages)
Options to upload:
Upload your entire project (the htdocs folder containing [Link], [Link], etc.)
Make sure to place all files inside the htdocs (or public_html) folder as required
by InfinityFree.
Ways to upload:
A. Using File Manager from InfinityFree Control Panel:
• Go to your hosting Control Panel.
• Open the File Manager.
• Navigate to the htdocs folder.
• Upload your project files ([Link], [Link], and other required files).
• Ensure the files are directly inside htdocs (not inside a subfolder).
B. Using FTP Client (like FileZilla):
• In the control panel, find your FTP account info (hostname, username,
password).
• Open FileZilla and enter the FTP details.
• Connect to the server.
• Upload your files to the htdocs folder.
4. Create a MySQL Database on InfinityFree
• In the control panel, look for the MySQL Databases section.
• Create a new database:
o Choose a database name.
o Create a new user and password.
• Save the following info:
o Database Name
o Username
o Password
o Host Name (usually like: [Link])
5. Upload the Database (Create Tables)
If you have an .sql file:
• Open phpMyAdmin from the control panel (for the database you created).
• Select the database.
• Use the Import tab to upload your .sql file.
If you don’t have an SQL file, use this SQL code:
CREATE TABLE tasks (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(255) NOT NULL,
is_done TINYINT(1) DEFAULT 0
);
• Go to the SQL tab in phpMyAdmin, paste this code, and click Go to run it.
6. Edit [Link] to Connect to the New Database
In your [Link] file, make sure it looks like this:
<?php
$servername = "your_database_host"; // e.g., [Link]
$username = "your_database_username";
$password = "your_database_password";
$dbname = "your_database_name";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
?>
Replace the 4 values with the actual info from the database you created.
7. Test Your Website
• Open your assigned InfinityFree domain (e.g., [Link]).
• Make sure the site loads and shows your To-Do List app.
• Try:
o Adding a new task
o Marking a task as done
o Deleting a task
[Link] Fawaz
