DEV Community

Cover image for I Built a CLI to Automate Firebase Setup for JavaScript Projects
Ugesh Praavin D
Ugesh Praavin D

Posted on

I Built a CLI to Automate Firebase Setup for JavaScript Projects

#javascript #opensource #firebase #typescript

I Built a CLI to Automate Firebase Setup for JavaScript Projects

If you've connected Firebase to multiple JavaScript projects, you've probably repeated the same setup steps more times than you'd like.

Create or select a Firebase project.

Create a Firebase Web App.

Retrieve the Firebase configuration.

Set up environment variables.

Create the Firebase initialization file.

Make sure everything matches the framework you're using.

Then do it all again for the next project.

I wanted to automate that workflow, so I built FireConfig.

WHAT IS FIRECONFIG?

FireConfig is an open-source CLI that automates Firebase configuration for JavaScript and TypeScript projects.

You can start it with:

npx fireconfig init
Enter fullscreen mode Exit fullscreen mode

FireConfig detects the project environment and guides you through the Firebase configuration process.

The goal isn't to hide what's happening. It's to automate the repetitive parts while keeping important decisions under the developer's control.

WHAT DOES IT DO?

output

The workflow looks roughly like this:

Project
↓
Detect framework
↓
Check Firebase CLI
↓
Authenticate with Firebase
↓
Select or create Firebase project
↓
Select or create Firebase Web App
↓
Retrieve Firebase configuration
↓
Configure environment variables
↓
Generate Firebase initialization

Instead of manually going through these steps every time, FireConfig handles the repetitive parts for you.

FRAMEWORK SUPPORT

FireConfig currently supports:

  • React + Vite
  • React + Create React App
  • Next.js
  • React Native Android

Expo projects can currently be detected, but the Expo configuration workflow is not implemented yet.

SAFE ENVIRONMENT CONFIGURATION

One of the things I wanted to get right was handling existing .env.local files safely.

Imagine you already have:


API_URL=https://api.example.com
FEATURE_FLAG=true
Enter fullscreen mode Exit fullscreen mode

When FireConfig configures Firebase, it shouldn't simply delete or replace that file.

Instead, it can add the Firebase variables while preserving the existing configuration:

API_URL=https://api.example.com
FEATURE_FLAG=true

VITE_FIREBASE_API_KEY=...
VITE_FIREBASE_AUTH_DOMAIN=...
VITE_FIREBASE_PROJECT_ID=...
Enter fullscreen mode Exit fullscreen mode

Comments, unrelated variables, and existing configuration are preserved.

If a Firebase variable already exists with a different value, FireConfig asks before replacing it.

Running the configuration again with the same values is also designed to be idempotent, so it doesn't keep duplicating variables.

FIREBASE PROJECT AND WEB APP CREATION

Another part of the workflow I wanted to simplify was Firebase resource setup.

If a user doesn't have a Firebase project, FireConfig can offer to create one.

If the selected Firebase project doesn't have a Web App, FireConfig can offer to create one.

But it doesn't silently create cloud resources.

The user is asked for confirmation before creating external Firebase resources.

That distinction is important for a developer tool that operates on someone's Firebase account.

FRAMEWORK-AWARE ENVIRONMENT VARIABLES

Different frameworks handle environment variables differently.

For example:

Vite:
import.meta.env.VITE_FIREBASE_API_KEY

Create React App:
process.env.REACT_APP_FIREBASE_API_KEY

Next.js:
process.env.NEXT_PUBLIC_FIREBASE_API_KEY
Enter fullscreen mode Exit fullscreen mode

FireConfig detects the project framework and generates the Firebase configuration using the appropriate environment-variable access pattern.

GENERATED FIREBASE CONFIGURATION

FireConfig generates:

src/firebase/config.js

The generated configuration reads Firebase values from environment variables rather than embedding the configuration values directly into the source file.

It also handles repeated initialization safely.

The goal is to make the generated configuration usable while keeping it framework-aware and repeatable.
**
FIRECONFIG DOCTOR**

FireConfig also includes a diagnostic command:


fireconfig doctor
Enter fullscreen mode Exit fullscreen mode

The doctor checks the Firebase configuration and framework-specific setup and reports configuration problems that need attention.

WHY I BUILT IT

The idea behind FireConfig is pretty simple:

"Connecting Firebase to a project shouldn't require repeating the same configuration work every time."

I wanted to turn that repetitive setup process into a reusable developer tool.

The project is still evolving, and there are more Firebase workflows I want to support in future releases.

*TRY FIRECONFIG
*
Install it globally:

npm install -g fireconfigcli
Enter fullscreen mode Exit fullscreen mode

Or run it directly with npx:

npx fireconfig init
Enter fullscreen mode Exit fullscreen mode

LINKS

npm:
https://www.npmjs.com/package/fireconfigcli

GitHub:
https://github.com/Ugesh-Praavin/fireconfig

FireConfig is open source and released under the MIT license.

WHAT'S NEXT?

There are still several things I want to improve and expand.

In particular, I'd like to continue improving framework-specific workflows and make Firebase setup even more predictable across different project environments.

If you work with Firebase regularly, I'd be interested to know:

What's the most repetitive part of your Firebase setup workflow?

Maybe that's something FireConfig can automate next.

Top comments (0)