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/
Related
The build version is working perfectly but can't see where it stores the environment variables. Are they hidden or visible to everyone ?
The Create React App (Webpack) build process "folds" the environment variables into constants in the source, and things are bundled as per usual after that.
They're visible to anyone who looks at your app's script files in their browser's View Source or Inspector views.
After taking a look at console, i got this
Loading failed for the <script> with source “https://abhishek-098.github.io/TourSpot%20/static/js/2.1f6fc1d5.chunk.js”.
Loading failed for the <script> with source “https://abhishek-098.github.io/TourSpot%20/static/js/main.3961266e.chunk.js”.
Link to my Repo : https://github.com/Abhishek-098/TourSpot
For deploying a Single-Page Application (React, Vue) to GitHub Pages, you should know that it is necessary that you do a production build. This can be accomplished by doing npm run build or yarn build depending on the package manager you are using. This command will generate a ./dist or ./build folder that will contain your react app in pure HTML, CSS, and JS.
For GitHub pages, there are some configurations you should do. First of all, the index.html from your production build (from the dist, build folder) should be in the root folder, which means, you should be able to see it when you open the repo (not inside the build folder). If GitHub pages do not detect any index.html in the root of the repo, it will display a 404 page.
Now, since you do not want the production build files messing around with your React project, it is recommended that you create a different branch for your GitHub pages deploy.
So, ideally, you would have two branches: master and gh-pages, the first one containing your React project and the second one containing only your dist folder but in the root of the project.
Here is an example of the structure of a Repo that it's deployed using GitHub pages.
https://github.com/8rb/React-Quiz/tree/master
You can see both branches and the deployment link works perfectly fine.
To configure the branch that is being deployed to GitHub pages, go to settings and select the branch where you have your production build.
All the information was taken for the following link:
https://create-react-app.dev/docs/deployment/#github-pages
I hope you found it useful!
#Rodrigo Ramirez does explain how its done, but leaves out some important information provided in the docs he linked (https://create-react-app.dev/docs/deployment/#github-pages). Maybe the've been updated since but I would recommend following those steps in the doc. They give step by step instructions that are very easy to follow.
I tried following #Rodrigo Ramirez answer, as well as, countless other things on the internet and nothing worked and it was all very complicated. The doc provided here gets it all done for you very easily.
I am developing a project with frontend on ReactJS and backend on Java (Spark framework). To build server with frontend, I build the frontend using yarn build and then, using Maven, copy contents of build folder to src/main/resourses/public folder, from which Spark serves all static files. Recently, I moved to CRA and since then all icons disappeared on production build.
When I run the project on webpack-dev-server, everything works fine. All icons are loaded as you can see below:
But when I build production version of the frontend and copy it to the public folder, I get an this error:
The same fragment on production build:
My thoughts are that either icon fonts are copied incorrectly at some point, or the server cannot properly load the fonts, which is less probable as they were loaded earlier when I did not use CRA.
Also, it seems that fonts do exist in the website, because they appear as Sources in Chrome Dev Tools. However, as I said they might be loaded improperly.
P.S. I'm using the following versions of Semantic UI. I generated semantic folder in src directory using npm i semantic-ui.
semantic-ui: ^2.4.2;
semantic-ui-react: ^0.85.0
I found an issue. The problem was that after I built the frontend, Maven incorrectly copied the production build to the public folder
The solution was found here
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.
I have a very simple Node.js/express app that I built using the tutorial by Traversy Media here: https://www.youtube.com/watch?v=uONz0lEWft0
During the build process, I would make updates to the .ts and .HTML files in the components directory and the web app would reflect the changes. I've since uploaded the project to github and cloned it to a new MEAN stack on Ubuntu. Now, when I make changes to the component files and the angular-src directory, the app is totally unaffected and continues to run as if no changes were made to any of the files.
I've tried to start and restart Node.js but I feel like the app is compiled or "built" now and is no longer referencing my files.
How do I get back to the point where I can further develop this app?
github link: https://github.com/negativepitch/Mean-LoginApp
First don't upload node_modules.That's why you have package.json ;)
Then, have you tried to execute npm install ?