Search code examples
reactjsnpmcreate-react-app

Edit Files After Build, React


I built an app in React with create-react-app. Just JavaScript, CSS, HTML & React. I ran npm build then deployed the app to Netlify.

I want to go back and edit some CSS. So, I cd into the directory from my laptop and deploy on localhost:5000. I open VS Code and make changes however none of the changes are reflected in the browser @ localhost:5000.

When I was building the app, the way I had it set up allowed me to view each change immediately in the browser when I save the file.

Are files editable after you run npm build? What am I missing here?


Solution

  • When you run a build on a react app (or any other app) code will be converted from es6 to es5 and then probably minified (depends on webpack config) so code is unreachable and you need .map files to debug code in production environment. So the most clean way to act on deployed code is to make a new build with updated features and deploy again the frontend. In local development react boilerplates usually make intensive use of hot-reload, a plugin that allow code to be hot replaced while app is running. Built application instead load chunks of JS files once and CACHE it. So in order to see your changes you have to clean cache or force a refresh (home+F5 on windows, CMD+R on OSX) to be sure that your changes are visible. Despite this I discourage to edit the build files. When you have to update the code stay on development mode, before deploy, build your code and test it live.