Skip to main content

​
Prerequisites

Before starting, ensure you have the following installed:
  • Node.js (v14 or higher)
  • npm (Node Package Manager)
  • A modern web browser (Chrome, Firefox, or Safari)
  • A code editor (VS Code recommended)

​
Understanding CORS in Development

When developing locally (e.g., http://localhost:5500), browsers block requests to the audio stream due to CORS policy:
CORS Error
Access to audio at 'https://stream.laurban.cl:8000/media' from origin 'http://localhost:5500' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
This issue only occurs in development. In production (https://laurban.cl), CORS works correctly because:
  • The domain matches the CORS headers configured on the server
  • HTTPS to HTTPS has no mixed content issues
  • The server already has Access-Control-Allow-Origin: * configured

​
Setup Methods

This is the most reliable method for local development. It creates a proxy that handles CORS issues transparently.
1

Create proxy server file

Create a file named proxy-server.js in your project root:
const express = require('express');
const cors = require('cors');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

// Enable CORS for all routes
app.use(cors());

// Serve static files
app.use(express.static('.'));

// Proxy for audio stream
app.use('/stream', createProxyMiddleware({
    target: 'https://stream.laurban.cl:8000',
    changeOrigin: true,
    pathRewrite: {
        '^/stream': '/media'
    },
    onProxyReq: (proxyReq) => {
        proxyReq.setHeader('Origin', 'https://laurban.cl');
    }
}));

// Proxy for API
app.use('/api', createProxyMiddleware({
    target: 'https://azura.laurban.cl',
    changeOrigin: true
}));

const PORT = 3000;
app.listen(PORT, () => {
    console.log(`✅ Proxy server running at http://localhost:${PORT}`);
    console.log(`🎵 Stream: http://localhost:${PORT}/stream`);
    console.log(`📡 API: http://localhost:${PORT}/api/nowplaying/laurban`);
});
2

Install dependencies

npm install express cors http-proxy-middleware
3

Update configuration

In js/index.js, temporarily change the URLs for development:
// DEVELOPMENT
STREAM_URL: 'http://localhost:3000/stream',
API_URL: 'http://localhost:3000/api/nowplaying/laurban',

// PRODUCTION (uncomment when deploying)
// STREAM_URL: 'https://stream.laurban.cl:8000/media',
// API_URL: 'https://azura.laurban.cl/api/nowplaying/laurban',
4

Run the proxy server

node proxy-server.js
5

Access your application

Open your browser and navigate to http://localhost:3000

​
Option 2: Browser Extension (Quick but Less Secure)

Install a CORS extension in your browser:
Important: Disable the extension after development to avoid security issues.

​
Option 3: Chrome with CORS Disabled

Run Chrome with a temporary profile without CORS restrictions: 
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\temp\chrome_dev"

​
Option 4: Firefox with Relaxed CORS

  1. Open Firefox and navigate to about:config
  2. Search for security.fileuri.strict_origin_policy
  3. Set it to false

​
Development Workflow

​
File Structure

la-urban-radio/
├── css/
│   └── index.css          # Main stylesheet
├── docs/
│   ├── DESARROLLO-LOCAL.md
│   └── MOBILE-BUFFERING-ANALYSIS.md
├── img/
│   ├── logo.png
│   ├── default.jpg
│   └── background.png
├── js/
│   ├── logger.js          # Logging system
│   ├── cache-manager.js   # API response caching
│   ├── lyrics.js          # Synchronized lyrics
│   └── index.js           # Main application logic
├── index.html             # Main HTML file
└── proxy-server.js        # Local development proxy (optional)

​
Testing Without Audio

If you need to test UI components (like the volume popup) without audio playback:
1

Open DevTools

Press F12 or right-click and select “Inspect”
2

Enable mobile emulation

Click the device toolbar icon or press Ctrl+Shift+M (Windows/Linux) or Cmd+Shift+M (Mac)
3

Select a mobile device

Choose “iPhone SE” or another mobile device from the dropdown
4

Test interactions

Click the volume button. You should see the popup appear with console logs:
Volume button clicked: {
    windowWidth: 375,
    isMobile: true,
    popupExists: true
}
Popup toggled: true

​
Testing Checklist

Before committing changes, verify:
  • Volume popup appears on screens ≤400px width
  • Horizontal volume slider is hidden on mobile devices
  • Player width is responsive (90vw on mobile)
  • Buttons stack vertically on mobile
  • Carousel/marquee displays without cuts
  • Audio plays correctly (with proxy or in production)
  • Lyrics synchronize properly
  • Theme changes (day/night) work correctly
  • No console errors appear

​
Environment Detection

The application automatically detects the environment: 
function isLocalDevelopment() {
    const hostname = window.location.hostname;
    return hostname === 'localhost' || 
           hostname === '127.0.0.1' || 
           hostname.startsWith('192.168.') || 
           hostname.startsWith('10.') || 
           hostname.startsWith('172.') ||
           hostname.endsWith('.local');
}
This enables:
  • Development mode: All console logs are visible
  • Production mode: Only warnings and errors are shown

​
Hot Reload Setup

For a better development experience, you can use a live server:

​
Using VS Code Live Server

  1. Install the “Live Server” extension in VS Code
  2. Right-click on index.html
  3. Select “Open with Live Server”
  4. The page will auto-reload on file changes

​
Using Python

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000
Then navigate to http://localhost:8000

​
Troubleshooting

​
Audio Not Playing

  1. Check browser console for CORS errors
  2. Verify proxy server is running (if using Option 1)
  3. Ensure stream URL is correct in CONFIG object
  4. Check network tab to see if requests are being made

​
Styles Not Loading

  1. Clear browser cache
  2. Check file paths in index.html
  3. Verify CSS files exist in the correct location

​
JavaScript Errors

  1. Check console for error messages
  2. Ensure all script files load in correct order:
    • logger.js (first)
    • cache-manager.js
    • lyrics.js
    • index.js (last)

​
Next Steps

Once your development environment is set up:

Build docs developers (and LLMs) love

Get started for freeTalk to us