Full-Stack React Projects - Second Edition

Absolute URLs

One issue with using isomorphic-fetch is that it currently requires the fetch URLs to be absolute. So, we need to update the URL used in the read fetch method, defined in api-media.js, into an absolute URL.

Instead of hardcoding a server address in the code, we will set a config variable in config.js, as follows:

mern-mediastream/config/config.js

serverUrl: process.env.serverUrl || 'http://localhost:3000'

This will allow us to define and use separate absolute URLs for the API routes in development and in production.

Then, we will update the read method in api-media.js to make sure it uses an absolute URL to call the read API on the server, as highlighted in the following code:

mern-mediastream/client/media/api-media.js

import ...