Build react app with Now v2

Liudmyla Dziubynska
Apr 23 · 1 min read

Update or configure your application to version 2 is easy as official web site have good documentation — https://zeit.co/examples/create-react-app/

But after configuration was changed we faced the issue that images were not displayed. To fix this issue just add to you routes object:

{ “src”: “/images/(.*)”, “dest”: “/images/$1” }

after full code will look:

{
"version": 2,
"builds": [
{ "src": "package.json",
"use": "@now/static-build",
"config": { "distDir": "build" }
}
],
"routes": [
{ "src": "/static/(.*)", "headers": { "cache-control": "s-maxage=31536000,immutable" }, "dest": "/static/$1" },
{ "src": "/favicon.ico", "dest": "/favicon.ico" },
{ "src": "/asset-manifest.json", "dest": "/asset-manifest.json" },
{ "src": "/manifest.json", "dest": "/manifest.json" },
{ "src": "/precache-manifest.(.*)", "dest": "/precache-manifest.$1" },
{ "src": "/service-worker.js", "headers": { "cache-control": "s-maxage=0" }, "dest": "/service-worker.js" },
{ "src": "/images/(.*)", "dest": "/images/$1" },
{ "src": "/(.*)", "headers": {"cache-control": "s-maxage=0"}, "dest": "/index.html"
],
}

Do not forget add now-build: react-script build to your package.json

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade