Skip to main content

​
Overview

Jowy Portfolio uses environment variables to securely store API credentials and configuration values. These variables are accessed via import.meta.env in Astro and should be defined in a .env file at the root of your project.
Never commit your .env file to version control. Add it to .gitignore to keep your credentials secure.

​
Required Environment Variables

​
Spotify Integration

Required for displaying Spotify artist information and music content.
​
SPOTIFY_CLIENT_ID
string
required
Your Spotify application client ID. Get this from the Spotify Developer Dashboard.
​
SPOTIFY_CLIENT_SECRET
string
required
Your Spotify application client secret. Keep this confidential.
​
SPOTIFY_ARTIST_ID
string
required
The Spotify artist ID to display music content for. Find this in the Spotify artist URL.

​
SoundCloud Integration

Required for fetching and displaying SoundCloud tracks.
​
SOUNDCLOUD_CLIENT_ID
string
required
Your SoundCloud application client ID.
​
SOUNDCLOUD_CLIENT_SECRET
string
required
Your SoundCloud application client secret.
​
SOUNDCLOUD_AUTHORIZATION
string
required
SoundCloud OAuth authorization token for API authentication.
​
SOUNDCLOUD_USER_ID
string
required
The SoundCloud user ID to fetch tracks from. This is parsed as an integer in the application.

​
YouTube Integration

Required for displaying YouTube playlist content.
​
YOUTUBE_API_KEY
string
required
Your Google Cloud YouTube Data API v3 key. Enable the YouTube Data API v3 in your Google Cloud Console.
​
YOUTUBE_PLAYLIST_SET_ID
string
required
The YouTube playlist ID to display videos from.

​
Google Calendar Integration

Required for displaying DJ event calendar.
​
GOOGLE_CALENDAR_SRC
string
required
The Google Calendar source ID for displaying event schedules.

​
Setup Instructions

  1. Create a .env file in the root of your project:
touch .env
  1. Add your environment variables:
# Spotify
SPOTIFY_CLIENT_ID=your_spotify_client_id
SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
SPOTIFY_ARTIST_ID=your_spotify_artist_id

# SoundCloud
SOUNDCLOUD_CLIENT_ID=your_soundcloud_client_id
SOUNDCLOUD_CLIENT_SECRET=your_soundcloud_client_secret
SOUNDCLOUD_AUTHORIZATION=your_soundcloud_auth_token
SOUNDCLOUD_USER_ID=your_soundcloud_user_id

# YouTube
YOUTUBE_API_KEY=your_youtube_api_key
YOUTUBE_PLAYLIST_SET_ID=your_youtube_playlist_id

# Google Calendar
GOOGLE_CALENDAR_SRC=your_google_calendar_src
  1. Restart your development server to load the new environment variables.

​
Usage in Code

Environment variables are accessed throughout the application using import.meta.env: 
// src/server/constants.ts
export const spotifyClientId = import.meta.env.SPOTIFY_CLIENT_ID;
export const spotifyClientSecret = import.meta.env.SPOTIFY_CLIENT_SECRET;
export const spotifyArtistId = import.meta.env.SPOTIFY_ARTIST_ID;

export const soundCloudClientID = import.meta.env.SOUNDCLOUD_CLIENT_ID;
export const soundCloudClientSecret = import.meta.env.SOUNDCLOUD_CLIENT_SECRET;
export const soundCloudAuthorization = import.meta.env.SOUNDCLOUD_AUTHORIZATION;
export const soundCloudUserId = parseInt(
  import.meta.env.SOUNDCLOUD_USER_ID,
  10
);

export const youtubeApiKey = import.meta.env.YOUTUBE_API_KEY;
export const youtubePlaylistSetId = import.meta.env.YOUTUBE_PLAYLIST_SET_ID;

// src/constants/calendar.ts
export const djGoogleCalendarSrc = import.meta.env.GOOGLE_CALENDAR_SRC;
Astro exposes all environment variables prefixed with PUBLIC_ to the client-side code. Since these API credentials should remain server-side only, they are not prefixed with PUBLIC_.

​
Obtaining API Credentials

​
Spotify Developer Credentials

  1. Visit the Spotify Developer Dashboard
  2. Log in with your Spotify account
  3. Click “Create an App”
  4. Fill in the app name and description
  5. Copy the Client ID and Client Secret
  6. Find your artist ID from a Spotify artist URL (e.g., spotify:artist:ARTIST_ID)

​
SoundCloud API Credentials

  1. Visit SoundCloud Developers
  2. Register your application
  3. Obtain your Client ID and Client Secret
  4. Generate an authorization token for API access
  5. Find your user ID from your SoundCloud profile URL

​
YouTube Data API Key

  1. Go to Google Cloud Console
  2. Create a new project or select an existing one
  3. Enable the YouTube Data API v3
  4. Create credentials (API Key)
  5. Copy the API key
  6. Get your playlist ID from the YouTube playlist URL

​
Google Calendar Source

  1. Open Google Calendar
  2. Go to calendar settings
  3. Find the calendar you want to embed
  4. Copy the Calendar ID from the integration section

​
Troubleshooting

If environment variables are not loading, ensure:
  • The .env file is in the project root
  • Variable names match exactly (case-sensitive)
  • You’ve restarted the dev server after adding variables
  • No spaces around the = sign in .env file

​
Common Issues

Variables are undefined
  • Verify the .env file exists in the project root
  • Check that variable names don’t have typos
  • Restart your development server
API authentication fails
  • Verify your credentials are correct and active
  • Check that API keys haven’t expired
  • Ensure proper scopes/permissions are set in the API console
SOUNDCLOUD_USER_ID parsing errors
  • Ensure the value is a valid integer
  • Remove any quotes or extra characters from the ID

Build docs developers (and LLMs) love

Get started for freeTalk to us