I got some build files after used the command of "npm run build" and then put the build files to our server. Now, I want to change some config files in the build files to change the fetch request. How should I do? Please help me.
(The url is changed by back-end developers, front-end developers just should read a file in the build files.)
To mark this question as resolved:
For changing something inside the builded files, you have to parse them and find the part in the code where your URL is. Then you have to change it.
But I don't think this pattern is how software should work.
There is no way to do this. You have to edit the code and build it again. Then upload it afterwards. This is how react works.
Related
i created a create-react-app and want to use filetypes like webp or mp3.
When i run my application on localhost via npm run start everything works fine, but after my deployment on my server (which uses npm run build and delivers the build folder) it doesn't load filetypes like mp3 or webp anymore. Why is this happening? i think its any simple configuration in react or anything like that, but i cant solve this problem by my own. Thanks for your help.
The issue may be with typescript (if that is what you're using). Typescript will convert .ts and .tsx files to .js, but not move most other files over to build. If they are in a separate assets directory, you have to ensure that gets deployed too. If this is the issue, you have a few choices.
You can manually move the files over to build as a 'post' deploy step (using say, a shell script).
You can use a bundler like webpack to help you maintain the references to those other assets and bundle them correctly.
I finally found the problem that caused this behaviour. Amazon AWS Amplify creates a rewrite rule for single page applications (SPA). You can find this setting under Rewrites and redirects in your Amplify application settings. There you will find a rewrite rule with following source address:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
...change it to...
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|mp3)$)([^.]+$)/>
... for example, to allow mp3 files. This is also important to allow webp-Images or woff2-Fonts.
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
i have built a single page web application using react as part of an assignment.
i have created build version of it using serve -s build.
now my entire application takes around 200MB.
how do i share my application to the person who gave me this assignment so that he can check my work and output?
do i have to send him entire application folder(200MB size)?
or is there a way to send few files which will be enough for him to run the app.
please let me know possible ways of sharing my react application with him.
i figured out that only build folder(20MB) is enough run my app.
i copied build folder into another new folder("deploy-app").
now i opened "deploy-app" folder in VS code and ran following command "serve -s build" and it started working without any problems.
Is the application 200MB+ because of the dependencies/node_modules?
You can probably exclude these as they should be in your package.json file, i.e. they can be requested again if required.
Then you can send the source code and your built version to him.
I'm building a react website. The goal for it is to be able to simply put the finished website on a USB key and be able to use it on a computer without any internet access.
I'm using react v16.6. I've already tried to simply open the build/index.html file but I received a few Not allowed to load local resource: file:///static/... and the page was blank.
This projects is using a JSON file, pictures and videos.
I don't really know where I should go from here to be able to this.
Thanks for any help.
Based on some of your details, I'm assuming you're using create-react-app.
If you read the error message or look in build.html you'll see that the built site is trying to load your javascript from /build/static/js/.... This would effectively be trying to load the files from the root of the file system, not the current directory. You can set "homepage": "." in package.json and the built site will load the files correctly. This is documented in the message that you get when you do npm run build, which also links to https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment for more details.
I am building a sample react native application. Currently i am running it using the node server.Node server is serving the js file.
You can see this in following screenshot:
I want to shift to the option2, for this, if there is any change in the js file, i need to run the curl command manually.
Is there any alternative for this?
AFAIK there's nothing in place and this is work in progress. See:
https://github.com/facebook/react-native/issues/12
We plan on putting in some sort of build step that "compiles" the JS
source directly into a resource file in the app bundle. Obviously in
production you wouldn't have a server running nearby.
There's another bit of discussion here.
At the moment I think you're stuck with the curl option.
All this does is packing all your JavaScript together and writing it into a single file.
Option 1 has a small http server running, providing the latest packed file when you request it.
Option 2 takes the file from the local disk.
You can setup a tool that looks watches your project files and repacks everything if you make changes.
You can do this by yourself, using the packaging tool shipped with react-native (react-native bundle [--minify]) and re-run it everytime things changes using gulp (and gulp-watch).
Also you can use webpack as your packaging tool and use the --watch option. (see example)