DEV Community: Md Sana ullah

How to Host a Project on Firebase Hosting

Md Sana ullah — Fri, 10 Jan 2025 18:08:20 +0000

Step 1: Install Firebase CLI

Open your terminal and install Firebase CLI globally:

npm install -g firebase-tools

Verify the installation:

firebase --version

Step 2: Log in to Firebase

firebase login

Follow the instructions in your browser to complete the authentication.

Step 3: Initialize Firebase Hosting
Navigate to your project folder:


cd your-project-folder

Initialize Firebase Hosting:

firebase init

Follow the prompts:

Select Features: Use arrow keys to select Hosting: Configure files for Firebase Hosting (press space to select, then press enter).
Select Project: Choose an existing Firebase project or create a new one.
Public Directory: Enter the folder containing your built files (e.g., dist or build).
Single-Page App: Choose Yes for "Configure as a single-page app."
Overwrite Files: Choose No if it asks to overwrite index.html. Step 4: Build Your Project If your project requires building (e.g., React or Vue), run:

npm run build

Ensure the output folder (e.g., dist or build) contains the production-ready files.
**
Step 5: Deploy Your Project**
Deploy the project to Firebase Hosting:

firebase deploy

Once deployed, Firebase will provide a live URL for your project. Step 6: Update and Redeploy

Make changes to your project locally.
Build your project again:

npm run build

Deploy the updated project:

firebase deploy

Step 7: Debugging Common Issues

Incorrect Public Directory: Ensure the folder specified during initialization contains your index.html.
Cache Issues: Clear your browser cache and hard reload the page.
Error Logs: Check deployment logs in the terminal for debugging.
Congratulations! Your project is now live on Firebase Hosting. 🎉

How to Host a Project on Vercel Using a GitHub Repository

Md Sana ullah — Fri, 10 Jan 2025 17:58:10 +0000

Step 1:

Create a GitHub Repository
Go to GitHub and log in to your account.
Click on the New Repository button.
Provide a name for your repository, add a description, and set it to Public or Private.
Click Create Repository.

***Step 2:* Push Your Project to GitHub**
Open your project folder in your terminal.
Initialize a Git repository and push your project:
bash

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin <your-repo-url>
git push -u origin main

**
Step 3: **Log in to Vercel

to Vercel and sign in using your GitHub account.
Authorize Vercel to access your GitHub repositories.

Step 4: Import Your GitHub Repository

After logging in, click on the New Project button
Select Import Git Repository and pick your repository from the list.
Click Import.

Step 5: Configure Your Project

Review the configuration settings, such as:

Framework Preset: Vercel detects your framework automatically (e.g., React, Next.js, or Vue.js). If it doesn’t, select it manually.
Build Command: Set your build command (e.g., npm run build).
Output Directory: Specify the folder where your built files will be stored (e.g., dist or build).

Click Deploy.

Step 6: Wait for Deployment

Vercel will start deploying your project.
Once the deployment is complete, you will see a live link to your project.

Step 7: Update Your Project

Make changes to your code locally.
Push the updates to your GitHub repository:

git add .
git commit -m "Update project"
git push origin main

Vercel will automatically rebuild and deploy the updated version

Step 8: Access Your Project

Go to your Vercel Dashboard.
Click on your project to view details.
Use the provided Live URL to access your project online.

Congratulations! Your project is now live on Vercel. 🎉

How to Implement Dark Mode in Tailwind CSS in One Command

Md Sana ullah — Fri, 10 Jan 2025 17:38:12 +0000

Step 1: Run the Setup Command
Open your terminal and run the following command to create a complete Tailwind project with dark mode functionality:

mkdir dark-mode-tailwind && cd dark-mode-tailwind && npm init -y && npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init && echo '@tailwind base;\n@tailwind components;\n@tailwind utilities;' > styles.css && echo '<!DOCTYPE html>\n<html lang="en" class="dark">\n<head>\n<meta charset="UTF-8" />\n<meta name="viewport" content="width=device-width, initial-scale=1.0" />\n<title>Dark Mode with Tailwind CSS</title>\n<link rel="stylesheet" href="dist/styles.css" />\n</head>\n<body class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200">\n<div class="min-h-screen flex flex-col items-center justify-center">\n<h1 class="text-4xl font-bold mb-4">Tailwind CSS Dark Mode</h1>\n<p class="mb-6">Toggle the button below to switch themes!</p>\n<button id="theme-toggle" class="px-4 py-2 bg-blue-500 text-white rounded shadow-md dark:bg-yellow-400 dark:text-black">Toggle Dark Mode</button>\n</div>\n<script src="script.js"></script>\n</body>\n</html>' > index.html && echo 'const themeToggleBtn = document.getElementById("theme-toggle");\nconst htmlElement = document.documentElement;\n\nif (localStorage.getItem("theme") === "dark") {\nhtmlElement.classList.add("dark");\n}\n\nthemeToggleBtn.addEventListener("click", () => {\nif (htmlElement.classList.contains("dark")) {\nhtmlElement.classList.remove("dark");\nlocalStorage.setItem("theme", "light");\n} else {\nhtmlElement.classList.add("dark");\nlocalStorage.setItem("theme", "dark");\n}\n});' > script.js && npm run build && npx tailwindcss -i ./styles.css -o ./dist/styles.css --watch

Step 2: Open the Project
After the command completes, open the folder in your code editor. Your files are ready, and you can test the project in any live server, such as:

npx live-server

What the Command Does
Creates a project folder (dark-mode-tailwind) and navigates into it.
Initializes the project with npm and installs Tailwind CSS dependencies.
Configures Tailwind CSS and creates the required styles.css file.
Adds a basic index.html with a dark mode toggle button.
Writes a script.js file to handle dark mode logic using localStorage.
Builds the Tailwind CSS file for immediate use.
Test the Dark Mode
Open index.html in a browser.
Click the "Toggle Dark Mode" button to switch themes.
Your preference will persist even after refreshing, thanks to localStorage!
Enjoy coding! 😊