3

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?

wallwalker
  • 591
  • 7
  • 14
  • 27
  • can you please, write down path to your current cursor location. May be you cd 'ed into wrong location – Serdar Aug 01 '18 at 12:22

2 Answers2

6

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.

Mosè Raguzzini
  • 15,399
  • 1
  • 31
  • 43
0

You could create some files outside the src folder and access them with fecth from app.js or even import them from index.html ... so if you wanted to change something you could do it without having to do a build again.

Enrikisimo Lopez Ramos
  • 383
  • 4
  • 11
  • Can you explain more in detail on what you mean here. I am trying to modify or add to a react code that is not mine. I want to make an add-on to the code, but not sure how I can access props from another react component that is in another app. – David Labbe Jul 13 '21 at 06:46