Creating a robust application with Angular 4 requires a clear strategy for managing different environments, particularly when integrating with Firebase. Whether you’re in the development phase, testing new features, or deploying your app to production, maintaining separate environments is crucial for preventing data mix-ups and ensuring a smooth workflow. This guide will walk you through the steps needed to create dedicated backend environments for development and production using Angular 4 and Firebase.

Why Maintain Separate Environments?

Using distinct environments for development and production offers numerous benefits:

• Safety: Protect your production data from accidental loss or corruption during testing.
• Testing Features: Experiment with new features without impacting live users or services.
• Configuration Management: Easily switch settings tailored for development or production.

Step 1: Create Your Firebase Projects

Before diving into coding, the first step is to set up two Firebase projects:

1. Development Project: Used for building and testing new features.
2. Production Project: Your live app that end-users interact with.

To create these, go to the Firebase console, fill in the necessary details, and initiate each project. Ensure you retain the project credentials safely as you will need them shortly.

Step 2: Set Up Environment Files

Next, you’ll need to create the environment configuration files in your Angular project:

1. Using Angular CLI: If you create your app with Angular CLI, default environment files are created automatically. They are typically located at src/environments/ and include two files:

• environment.ts (for development)
• environment.prod.ts (for production)

1. If Cloning Existing Apps: In case you’re using an existing project, like the Fire Starter app from GitHub, set these files up manually.

Important Security Step

Make sure to add these files to your .gitignore to safeguard sensitive credentials from being pushed to public repositories. This is critical for maintaining the security of your Firebase projects.

Step 3: Add Firebase Configuration

After setting up your environment files, the next step is to paste your Firebase configuration into each file:

• For environment.ts, paste your development project credentials.
• For environment.prod.ts, include your production project credentials.

Here’s a basic template of what an environment file might look like:

export const environment = {
  production: false,
  firebase: {
    apiKey: 'YOUR_DEV_API_KEY',
    authDomain: 'YOUR_DEV_AUTH_DOMAIN',
    databaseURL: 'YOUR_DEV_DATABASE_URL',
    projectId: 'YOUR_DEV_PROJECT_ID',
    storageBucket: 'YOUR_DEV_STORAGE_BUCKET',
    messagingSenderId: 'YOUR_DEV_MESSAGING_SENDER_ID'
  }
};

Make sure to update the variables with your actual Firebase credentials.

Step 4: Bootstrap the Environment in the App Module

Now that the environment files are set up, you need to bootstrap the Firebase configuration in your app module. Open your app.module.ts file and import the environment settings:

import { environment } from '../environments/environment';
import { AngularFireModule } from '@angular/fire';

@NgModule({
  declarations: [...],
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    ...
  ],
  providers: [...],
  bootstrap: [AppComponent]
})
export class AppModule { }

This code hooks your Angular app up to the appropriate Firebase project based on the environment configuration, setting the stage for everything to function correctly.

Step 5: Serve or Compile the Application

With everything in place, you can now serve your application using Angular CLI. To serve the app in development mode, use:

ng serve

For production mode, you simply need to add the --prod flag:

ng serve --prod

This command serves the app in production mode, ensuring all necessary optimizations are applied and the correct Firebase configuration is being used.

Final Thoughts

By following these steps, you will have effectively set up separate backend environments for your Angular 4 application using Firebase. These environments help streamline the development process, allowing you to test new features safely before launching them to the public.

Whether you’re a seasoned developer or just starting with Angular and Firebase, understanding how to manage environment configurations effectively is an essential skill in your toolkit.

Feel free to reach out with your experiences or any questions you might have about setting up your own Angular environments!