I have a react project I am trying to deploy to heroku. I did so by installing the react buildpack however when I go to the website, open inspect element, all my client side source code is simply exposed to all public view. What am I doing wrong, I cannot find any help which addresses this issue but it is quite the security flaw. Help me understand, because I know I did something wrong and it should not be this way. Thanks!
Change the build script to include GENERATE_SOURCEMAP=false so that the build commands follow it. This is an intended effect according to this
gaearon
This is expected. You can delete .map files from the build output if
you want to disable it, although you'll get console warnings about
them missing.
There is no harm in leaving them in though in my opinion. Client code
is already available to the user’s machine so there’s no secrets in
it.
scripts: {
"build": "GENERATE_SOURCEMAP=false react-scripts build"
}
Related
I've recently tried getting into the whole Node ecosystem and am trying to set up some continuous deployment for my app to AWS Amplify.
For background, my project structure looks like this:
project
public
index.html
src
App.tsx/App.js
package.json
As far as I know, this is basically what create-react-app gave me to start with, and I didn't change the file structure.
For most of my time working on the app, I've been able to go to the base project directory and use
npm start
to launch the app. This will bring me to the App.tsx/js homepage.
However, when I hosted this to AWS Amplify via GitHub, the default build settings actually point to the public directory, so the published site is actually point to index.html (which is basically just an empty placeholder).
While debugging, I ran
npm build
in my root project directory, which constructed a build folder, so now the overall project looks like this:
project
build
index.html
public
index.html
src
App.tsx/App.js
package.json
Now, running
npm start
will bring me to the index.html from the build directory, instead of App.js/tsx as it used to.
The AWS setup says that it will run
npm build
so I assume that what I've done on my local machine is mirroring what the AWS server is doing behind the scenes and explains why AWS is serving the empty index.html.
I've read a few articles and watched some videos about hosting a create-react-app on AWS, and in every version, it looks like AWS will serve the App.tsx/App.js right out of the box, rather than build/index.html, and I've not been able to find a good guide on how to configure this behavior. Quite frankly, there is an overwhelming number of similar-but-slightly-different answers for questions like this, which use different combinations of package managers, packages, hosting services, all on different release versions, with different setups, and it's very difficult for me to tell which ones apply to my scenario.
So I'm hoping someone can help straighten some of this out for me, or point me towards a good resource for learning more about this type of thing. Particularly interested in learning the right way to do these things, rather than a quick hack around whatever my particular issue is.
Some specific questions...
Is deploying things from a /build folder standard convention?
Why does create-react-app create a separate /src/app.tsx and /public/index.html that seem to be competing with one another as the app's "homepage"?
Why does the behavior of
npm start
change depending on whether
npm build
has been run?
Is the correct fix here to just insert my App.tsx component into the index.html? This doesn't seem hard, but doesn't seem right either
I have seen a lot of answers discussing tweaks to webpack.config.js to solve issues like this one. My project does have webpack installed, but as best I can tell, there is no webpack.config.js anywhere. Am I expected to create this file, or should it exist already? In either case, in which directory is it supposed to live? I've seen a couple answers saying it should be in /node_modules/webpack/, but also some saying it needs to live in the same directory as package.json
Things I've tried already: Spent a bunch of time reading through other StackOverflows and watching a few videos, but as outlined above, I'm finding it difficult to tell which could apply to my situation and which are unrelated, given the huge number of unique combinations of build/packages/platforms/versions. Also spent some time monkeying around with file structure/moving code around, but not very productively.
Eventually found my issue. In the production built version of my app (aka, /build), the bundled script created by webpack was failing in the browser because exports was undefined, so index.html was being served in its vanilla state, rather than with the TSX/JSX content. I changed the "module" property in tsconfig.json from commonjs to es6 and this fixed most of the problems.
Also of note is that the reason I couldn't find my webpack.config.js is that I had hidden ALL js files in my project, so VSCode wasn't finding it. I swapped to the suggestion from this blogpost to hide only js files with a matching TS file.
For general learning about how create-react-app works, I eventually found this page, which I found helpful:
https://blog.logrocket.com/getting-started-with-create-react-app-d93147444a27/
For the basic create-react-app
npm start
Is a short command for react-scripts start that sets up the development environment and starts your development server usually localhost:3000
npm build
After you are done developing, this command short for react-scripts build correctly bundles your app for production and optimizes the build for the best performance.
The files generated in the build folder are solely the files you serve to the public folder accessible by the public URL.
In short the files in the build folder should be copied to the public folder
AWS Amplify
Provides a CI/CD process where you don't have to set all this up by yourself, as long as you have a well-configured package.json file.
There are so many methods to deploy your react app to a production server but using AWS Amplify this link might help you out: https://youtu.be/kKwyKQ8Jxd8
More on create-react-app deployment: https://create-react-app.dev/docs/deployment/
this is my first post on stackoverflow. I'm writing because I couldn't find a clear answer to my question. I don't know if the title is the right way to put it but it's what I went with.
The Situation:
I'm creacting a single-page-application with react and intend to build the back-end with node.js and express.js, but for now it's just react. I used create-react-app to create the project and I'm using Firebase for hosting.
The folder to deploy in the firebase.json file is set to build. So when I want to deploy my web app to firebase, I use the npm run build command first to create the build folder which will be deployed.
When I then go to my website, open the chrome developer tools and click on source I can see all my files inside a static folder. I see it just the way I formated it, as if I was inside my code editor. All the components. My entire folder structure. Basically the whole code of my app is viewable in it's entirety.
I was a bit shocked and confused so I checkt if this is normal. I went on big websites like youtube or twitter but I could find hardly anything in their source folder. When I view the source of twitter it does have some files which is just plain and open javascript but not alot. And also the folder structure is not visible. I need to view files using Ctrg + P. Most files look different too etc.
It's best if you just have a look at the source section for twitter in the dev tools. I don't really understand what I'am seeing but I notice it is diffrent when compared to my website's source.
Their webpack somehow doesn't map the bundle out into plain readable code. My bundles in the build folder are mapped into exactly what they were before being bundled. At least that is how it seems to me.
Simple and short: Source of my website shows everthing (all the files) just as it is and for everyone to see. Source of big websites it doesn't do that. Their's is somehow concealed. And I want to know what they did, how they did it and how I can do the same.
I have seen many people say that it isn't important if it is no security risk and I know a bit about obsfuscation, but I believe they do something else too.
I also want to emphesize that this isn't about if I need to do it or not. I want to do it but I dont now how or what. I haven't found any place were this was adressed completely so I really don't understand how it's done.
I am thankful for any help I can get.
put GENERATE_SOURCEMAP=false in the package.json scripts -> builds and then run npm run build. Hope it will work.
"scripts": {
"build": "GENERATE_SOURCEMAP=false react-scripts build"
}
check this reference How to disable source maps for React JS Application
You are basically looking for a module bundler and there are a lot out there, the most used is https://webpack.js.org
It is very simple to use and there is an online tool to help generate the config file for different use cases https://createapp.dev/webpack/no-library
What webpack does, it will create a bundle.js for you so at the end your project will be just two files index.html and bundle.js
Today I see a weird thing after build a ReactJS app. when I checking in the browser after builded files it's exposing my raw folder structure. It should not expose the directory.
I see some StackOverflow saying that "homepage" : "." in package.json will solve, someone saying "start_url" : "/" need to change in manifest.json. but nothing is working for me. Any way to solve this.
You're seeing this because you're running this project locally.
When you run a project locally, it doesn't use the prod version of your app. It uses the dev version which isn't optimized for production. This is done to help you out with debugging during the development phase of your project.
If you deployed the app, the deployment would be using the build output (and not your local build, like you see here).
Note: If you're still experiencing this issue then your bundler (if you've ejected a CreateReactApp, then I'm referring to webpack) needs proper configuration and you'd need to provide us with more information.
my problem resides around Gatsby's production build failing to make project, which would seem and work as it should.
My goal is to adapt material-kit-react into Gatsbyv2 generated project.
done project in develop mode
so far so good i managed to do it all no problem, site looks exactly like it should in developer mode on my computer, but when i tried to put it on Github pages Gatsby build command needed to be executed, and when it did i errors appear around window object which is not defined on server where project tries to run when building (or something like that source: https://github.com/gatsbyjs/gatsby/issues/309 ). I resolved all of those errors as Gatsby employee suggested using if statement to not use window when its undefined, an it worked just fine, Gatsby ended its 'gatsby build' function and automatically published it to Github Pages thanks to ""deploy": "gatsby build --prefix-paths && gh-pages -d public""
After deploying however something strange happens to my site
project after publishing it onto Github pages
i found that it may be because css random class generator overlap somewhere, so i added JssProvider with generateRandomClassName from #material-ui/core into new layout component and it kida worked
material ui random name generator
but effect was far from desired:
deployed project after adding random class generator
and i tried to found whats wrong with this code, but i don't understand everything in react and gatsby yet and im empty of ideas. no errors, no eslint warning, everything falls apart anyway with no visible sign for me.
here is source material: https://github.com/Thrajnor/Gatsby-material-ui/tree/master/landingpage
and here is deployed page after build: https://thrajnor.github.io/Gatsby-material-ui/
i would really appreciate help or even a little advice in whats happening
I have been trying to figure out how to host my React App on GitHub Pages. I found these two guides, but neither seem to work:
https://github.com/gitname/react-gh-pages
https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48
The first guide seems to only work with a pre-made React-App (step 2 of procedure). On the other hand, it seems to work correctly otherwise. The issue with this guide for me is that I made my app from scratch, so I don't have the same names for codes. For example I had to use (because dist/ is my build path):
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d dist/"
}
The other guide seems to have the same issue (not custom app), but I'm not sure because I don't recognize all of the code. Since a lot of the code is different, for example they have:
“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test — env=jsdom”,
“eject”: “react-scripts eject”,
“predeploy”: “npm run build”,
“deploy”: “gh-pages -d build”
}
When I deployed gh-pages, a different branch was built in my github repo, but I'm not sure if it's supposed to be working automatically. Essentially, I'm kind of new to this, so I'm not sure what I'm doing wrong. I'd really like to finish creating this website with GitHub Pages because it seems that I am close, but if this is futile, is there a free alternative that would be easy to setup?
Here is a link to my github master branch: https://github.com/NumaKarolinski/PersonalWebsite
I think by looking at my package.json, and webpack.config.js, it should be obvious as to what I am doing differently from usual?
I don't get any errors when following the guide, but the intended URL just has a 404 error. There are no errors in the console (except on Chrome which has a favicon.ico error which doesn't make much sense since I don't have a favicon).
For your other options i prefer firebase for reactjs app.Just follow this steps to deploy app build to firebase.
install firebase cli
cd to project
npm run build
firebase init
firebase deploy
and you are done.Hope this help
In the examples you linked, they are using create-react-app as a boilerplate, that's why it looks so different. All the build scripts are given to you. I would recommend using create-react-app for small to even medium size projects, and you can always eject to config the boilerplate if needed. Github pages are probably the easiest option around, but you are really close.
Option 1:
You need to create a build directory, and push that directory to a Gitbub branch and have Github host that branch for your website. To do that, you will need to go to settings in that repo and set it to use a different branch. Just make sure only built app is in that branch. Basically, all your js files should be compressed into one file and etc.
Option 2:
You have a pretty small app, just create a create-react-app and copy everything over, and then follow the instruction again for deployment.