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?
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.
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.
Related
I have a React App (Typescript templated created using create-react-app) which emits all the changes to localhost:3000 when I execute yarn start. All local changes are immediately served with hot loading.
I have another local dev server running which consumes this app's react files in /build (output from yarn build).
I would like to see all my compiled changes emitted by yarn start be consumed by another server running locally. in other words, I want the yarn to start to emit the change to my file system so they can be served.
I tried ejecting the project and changing configuration files to emit to the build directory with yarn start but that does not work.
I have also tried switching my project to https://neutrinojs.org but that may not be an option for me at moment.
Could someone suggest what approach should I be taking to achieve this.
I found the solution.
I used https://www.npmjs.com/package/cra-build-watch which serves the purpose
I want to run react from the HTML page so that it is displayed on the browser. Till now I was using node to run it but now I want that when I open my HTML file in the browser my react app should run there.
A production build might be what you need. Try executing npm run build (or yarn build, if you're using Yarn).
This creates a production build of your app in the build folder, which contains index.html along with other static files. Running index.html should run the app in your browser.
A production build is meant to be served to the end user, so remember that you won't be getting any nice crash messages or stack traces that you get from running it on Node. Neither would development-related niceties like hot-reloading work. If you're still working on your project actively, keep using Node.
By the way, if you just need to make any changes to the HTML file of your React app (like changing the title or adding an external script), you can do that in public/index.html too - you don't need to create a production build for that.
Typescript just relase 3.7.3 with optional chaining, so I wanted to upgrade a project for this feature.
However, after runing yarn upgrade --latest, and doing yarn start, the app will reload infinitely.
After couple days of debugging. This is what I find out, it seems like if anything changed recently on /public folder, then the app will be Navigated to http://localhost:3000/ which will cause it to reload infinitely due to the design of my app.
The project was working for previous dependencies, so I am not sure whethere it's a react or electron upgrade that they changed it such that the app will watch for /public folder. When public folder changed, and causing the app to navigate to localhost:3000. Anyone know what's the cause of this phenomena? And the reason behind this change, and also how to pass around this?
By the way, my app was a simple epub reader application. Currently, my app will load all the images, css files and stored them to public folder (delete those files on unmount). Thus the app can load these images, stylesheets. (I just tried to store these files just inside the src folder, and it seems react won't be able to load these resources dynamically).
I've deployed my React app to GitHub Pages and I'm seeing all of my files and code in the sources tab. Here is a snippet of what I mean:
I've built my application using react scripts build and have tried pushing those files to my hosted Git repo as well as using the npm package gh-pages to push my build for me but all my code is still shown. Is there a way to hide these files on the deployed app or is this just how Githug Pages works since all my code is already in a public repo?
You can never really hide the source since its runs in the browser, however when you run the build in 'production' mode, you minify and uglify the source to make it difficult to read it should just show 1 single chunk js file. In addition turn off source maps in your compiler settings (--no-source-maps).
https://create-react-app.dev/docs/production-build/
I come from a background in Angular, but I wanted to start learning React. I want to make a React front-end for a nodejs Express web service.
In Angular, I could simply build the source code into a static folder with a standard index.html, and it can be deployed on any web server. With React however, every tutorial I see is about running React in its own server using create-react-app and npm start.
I know you can also just use script tags to import the React framework in a static page, but then you can't use JSX syntax, and I would like to. Is it possible to simply build a React project into a static folder with an index.html that can be deployed on any web server?
Yep, you can do what you're describing. If you want to use JSX syntax, you'll need Babel, which transpiles it into standard JavaScript.
You can avoid the complexities of setting it up by using create-react-app to create the app, then running npm build instead of npm start. This will compile everything into a build directory, complete with index.html.
CRA uses its server for development purposes. You don't need CRA for using React of course. But, as your app getting bigger and bigger you will need some more extra tools. For example you want to see your code instantly without refreshing your browser. Here comes the dev server and hot reloading.
CRA uses Webpack behind the scenes. It is a great tool for bundling (obviously) all your files (including css), minifying, uglifying, optimizing your code etc.
For simple code or testing purposes using one file and attaching React and Babel to your file could be enough but for real apps you will need more. Either you will use something like Webpack on your own or you will use CRA and let it do all the extra stuff for you.