Building in Public but Hiding your API Keys

How to build in public, but protect those private API keys...

Building in Public: Using GitHub, Netlify, and Firebase with Environment Variables

Building in public is an excellent way to engage with the developer community, get feedback, and share your progress. It is a popular hashtag on Twitter/X and has a thriving community that often give one-another feedback and support.

I have been trying to #buildInPublic for a while, this involves leaving the GitHub repo open to any interested passers-by. This was working fine when I was using PHP/SQL sites because I was used to the concept of the .env file and keeping that away from my repo. However, having fallen out of love with the terrible free PHP hosting sites, I decided to rebuild my PHP projects using React & Firebase instead. This gave me a challenge that I was not initially expecting. My previous React/Firebase projects had been behind closed doors, they were not in public repo's so I didn't care about the FirebaseConfig.js file holding the API details. Building in Public meant that I did need to be a little more careful with that data.

GitHub, Netlify & Firebase

In this guide, we will explore how to use GitHub for version control, Netlify for hosting, and Firebase for the backend. I will also discuss how to securely handle environment variables to keep sensitive information like API keys safe.

Step 1: Setting Up the Public GitHub Repository

First, create a new repository on GitHub. Ensure it is public so that others can see your progress and contribute. Push your Vite/React project to this repository.

Step 2: Hosting on Netlify

Netlify is a popular choice for hosting static websites. It provides continuous deployment from your GitHub repository, making it easy to keep your site updated.

  1. Login to Netlify: Sign in to your Netlify account or create a new one.
  2. Create a New Site: Click on "New site from Git" and connect your GitHub account.
  3. Select Repository: Choose the repository you created earlier.
  4. Configure Build Settings:
    • Build command: npm run build
    • Publish directory: dist
  5. Deploy Site: Click on "Deploy site" to start the deployment process.

Step 3: Using Firebase Realtime Database

Firebase provides a powerful realtime database that is easy to integrate with your Vite/React app. However, keeping your Firebase configuration secure is crucial, especially when your code is public.

Step 4: Secure Environment Variables

This is where we move away from a standard React/Firebase build into something we want public, but with some little secrets.

To keep your Firebase API keys and other sensitive information secure, use environment variables. Here's how to do it:

  1. Create a .env File: In the root of your project, create a .env file and add your Firebase configuration.

    VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_DATABASE_URL=your_database_url
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
VITE_FIREBASE_APP_ID=your_app_id

  2. Update firebaseConfig.js: Create or update your firebaseConfig.js file to use these environment variables.

    // firebaseConfig.js
import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  databaseURL: import.meta.env.VITE_FIREBASE_DATABASE_URL,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID
};

const app = initializeApp(firebaseConfig);

export default app;

  3. Add .env to .gitignore: Ensure your .env file is added to .gitignore to prevent it from being pushed to your public repository.

    # .gitignore
.env

Step 5: Configure Netlify Environment Variables

To ensure your environment variables are available during the build process on Netlify:

  1. Navigate to Site Settings: In your Netlify dashboard, go to the settings of your deployed site.
  2. Build & Deploy: Under the "Build & deploy" section, click on "Environment" and then "Edit variables".
  3. Add Variables: Add each environment variable from your .env file with their respective values.

BuildInPublic

Building in public is a fantastic way to learn and share your journey with the community. By using GitHub, Netlify, and Firebase, and securely managing environment variables, you can develop and deploy applications effectively while keeping your sensitive information safe.

Special thanks to the @mayuresh_empire who directed me to this article. These original instructions worked well for a Create React App, but I needed to adapt it for Vite as above.

Happy coding!