Ensuring Proper Environment Variables for Landing Page Development

[mbaneshi]

when we are in development phase , we need solid ENV variable , so suppose we are going to implement landing page with our stack which mentioned before

[mbaneshi]

During the development phase of building your EDCopo landing page with the stack you've mentioned (Svelte for frontend, Rust for backend, PostgreSQL, Docker, and GitHub Actions for CI/CD), it's essential to have a robust environment variable management strategy. Environment variables are crucial for keeping sensitive information like API keys, database credentials, and other environment-specific configurations safe and separate from the source code.

Managing Environment Variables in Development

To implement a robust environment variable setup, you can follow these best practices to manage environment variables in development, staging, and production environments.

---

1. Defining Environment Variables

In a typical web application, environment variables can be defined in multiple places depending on the environment:

• Local Development: For local development, you’ll typically use a .env file.
• Docker: When using Docker, environment variables are often defined in a docker-compose.yml file or passed to containers via .env files.
• CI/CD Pipeline (GitHub Actions): You’ll also need to manage environment variables securely within GitHub Actions workflows.
• Cloud Deployment: If you’re deploying to a cloud provider like AWS, DigitalOcean, or other platforms, you should set the environment variables securely in the cloud environment.

Let’s go step-by-step through setting up environment variables for each of these areas.

---

2. Environment Variables in Local Development

Frontend (Svelte)

In Svelte, environment variables are typically used for things like API URLs, public keys, or configurations that are safe to expose in the frontend. Svelte uses Vite as its bundler, which has built-in support for environment variables.

• Create a .env file: In the root of your frontend project (i.e., frontend/.env), define your environment variables. Svelte expects variables to be prefixed with VITE_ to distinguish between public and private variables.

# frontend/.env
VITE_API_URL=http://localhost:8080/api
VITE_PUBLIC_KEY=your_public_key_here
VITE_APP_NAME=EDCopo Landing Page

In your Svelte components or stores, you can access these variables like this:

// Example usage in a Svelte component or store
const apiUrl = import.meta.env.VITE_API_URL;
console.log('API URL:', apiUrl);

• Note: Never store sensitive information like private API keys in the frontend, as those are exposed to the browser.

Backend (Rust)

For the backend, environment variables are typically used to store sensitive data, such as database credentials, API keys, and other configurations that should not be exposed to the client.

• Use .env file: For local development in Rust, you can use a .env file to store your environment variables. To load these variables into the Rust environment, you can use a library like dotenv to read the .env file.

1. Add the dotenv crate to your Cargo.toml:

[dependencies]
dotenv = "0.15"

2. Create a .env file in the root of your backend project (i.e., backend/.env):

# backend/.env
DATABASE_URL=postgres://username:password@localhost:5432/edcopo_db
RUST_LOG=info
SECRET_KEY=your_secret_key_here

3. In your Rust application, load the environment variables using the dotenv crate:

use dotenv::dotenv;
use std::env;

fn main() {
    dotenv().ok();  // Load the .env file

    // Access environment variables
    let db_url = env::var("DATABASE_URL").expect("DATABASE_URL must be set");
    println!("Database URL: {}", db_url);
}

• Note: Be sure to add your .env file to .gitignore to keep sensitive information secure:

# .gitignore
*.env

PostgreSQL (Docker)

When you're using Docker for local development, you can define the database connection details and other configuration variables inside your docker-compose.yml file, or pass them as environment variables to Docker containers.

version: '3.7'

services:
  backend:
    build:
      context: ./backend
    environment:
      - DATABASE_URL=postgres://user:password@postgres:5432/edcopo_db
      - RUST_LOG=info
    ports:
      - "8080:8080"
    depends_on:
      - postgres
  postgres:
    image: postgres:latest
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
      POSTGRES_DB: edcopo_db
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

Here, DATABASE_URL is set as an environment variable for the backend container. It’s important to make sure that the database environment variables (such as POSTGRES_USER, POSTGRES_PASSWORD, and POSTGRES_DB) are also defined inside the Docker service for PostgreSQL.

---

3. Environment Variables in CI/CD (GitHub Actions)

When using GitHub Actions for CI/CD, it's essential to securely manage environment variables. These variables could include deployment credentials, API keys, or Docker-related secrets.

You can securely store environment variables in GitHub Secrets, which are encrypted and only accessible to your workflows.

Steps to add environment variables to GitHub Actions:

1. Store Secrets in GitHub:

   • Navigate to your GitHub repository.
   • Go to Settings > Secrets and add your environment variables, such as DATABASE_URL, SSH_PRIVATE_KEY, etc.

2. Use Secrets in GitHub Actions Workflow:
   In your GitHub Actions workflows, you can reference these secrets like this:

name: CI/CD Pipeline

on:
  push:
    branches:
      - develop
      - main

jobs:
  build-and-test:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout Code
      uses: actions/checkout@v2

    - name: Set up Node.js for Svelte
      uses: actions/setup-node@v2
      with:
        node-version: '16'

    - name: Install Dependencies
      run: |
        cd frontend
        npm install

    - name: Run Frontend Tests
      run: |
        cd frontend
        npm test

    - name: Set up Rust for Backend
      uses: actions/setup-rust@v1
      with:
        rust-version: stable

    - name: Install Backend Dependencies
      run: |
        cd backend
        cargo build --release

    - name: Run Backend Tests
      run: |
        cd backend
        cargo test

    - name: Deploy to Server
      run: |
        ssh -o StrictHostKeyChecking=no user@your-server-ip "
        cd /path/to/your/app &&
        git pull origin main &&
        docker-compose down &&
        docker-compose up -d
        "
      env:
        DATABASE_URL: ${{ secrets.DATABASE_URL }}
        SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}

In this example, we’ve securely injected the DATABASE_URL and SSH_PRIVATE_KEY into the workflow as environment variables using GitHub Secrets.

• Note: Be careful not to log secrets in GitHub Actions; use them only in the environment when needed.

---

4. Production Environment (Cloudflare and Server)

For the production environment, you should configure environment variables securely on your server or cloud environment. If you're using a Ubuntu server behind Cloudflare and deploying with Docker, you can manage environment variables as follows:

Using Docker Compose for Production:

You can use environment variables for production via a .env file or inline in the docker-compose.yml file:

version: '3.7'

services:
  backend:
    build:
      context: ./backend
    environment:
      - DATABASE_URL=${DATABASE_URL}
      - SECRET_KEY=${SECRET_KEY}
    ports:
      - "8080:8080"
  frontend:
    build:
      context: ./frontend
    ports:
      - "80:80"

  postgres:
    image: postgres:latest
    environment:
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
      POSTGRES_DB: ${POSTGRES_DB}
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

Using Cloudflare:

If you're hosting on Ubuntu behind Cloudflare, the environment variables (e.g., DATABASE_URL, SECRET_KEY) can be set on the Ubuntu server as system environment variables, in your Docker container’s .env file, or through Docker secrets in production.

To set environment variables on your server:

# Set environment variables on your Ubuntu server
export DATABASE_URL=postgres://user:password@localhost:5432/edcopo_db
export SECRET_KEY=your_secret_key_here

You can also configure environment variables in the systemd service file for production applications or in your cloud provider’s dashboard (AWS, GCP, DigitalOcean, etc.).

---

Conclusion

Managing environment variables is critical to your app’s security, maintainability, and ease of deployment. Here’s a recap of how to set up environment variables:

• Use .env files for local development and Docker.
• Store sensitive information like API keys and database credentials securely in GitHub Secrets for

CI/CD.

• Use Docker's built-in environment variable support for staging and production deployments.
• Configure environment variables on your production server or in your cloud provider's environment settings.

By adhering to these practices, you can ensure that your development, staging, and production environments are secure and easy to manage.