I have the following query. When deploying a React app, what is being deployed is the .js and .css bundles produced By Webpack. However, by using Chrome dev tools under Sources tab, I am able to see all the source code - every single file being used during development. So, the question is how is that possible and who is responsible for that?
Moreover, it seems Chrome debugger has some issues with these source files e.g. skips lines when debugging using F10, cannot recognize some variables in watch window etc. At the same time, everything works fine locally during development. I suspect the second question has to do with the first one. Do I miss something?
Webpack uses plugins which "map" your JS for the devtools, you can read more about it here.
Related
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.
Working with create-react-app, while npm start is running, if I inspect an app, in Chrome DevTools I can find my project files only inside the Webpack-internal folder. Is that normal?
Further more if I open Source tab, this is what I see:
It seems that the ES6 code is changed to ES5 and also there are __source: tags every where.
I thought if I disable SourceMap for JavaScript in my DevTools settings, those __source tags will disappear, they didn't. Even refreshing the browser or relaunching the Dev server with npm start, didn't remove them.
This make it very hard debuggin the code. Are you facing the same issue? Any solution?
Babel is part of the build process, it is responsible for transpiling ES6 into ES5 so your app can work on browsers that don't support ES6 properly.
You can read more about it here https://babeljs.io/
You won't really be able to see your precompiled code in the browser. You should use an extension called React Developer Tools, you can get it for Chrome here https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
With the extension you can see much more relevant information about your React app.
Recently I started learning react and I saw a tutorial where they used Webpack to create the production and development builds. But there was no explanation on what the difference between those two builds is and which one you have to use when. I searched the internet but didn't find anything that helped me. Does anyone have a tutorial or an explanation that I missed/didn't read?
The development build is used - as the name suggests - for development reasons. You have Source Maps, debugging and often times hot reloading ability in those builds.
The production build, on the other hand, runs in production mode which means this is the code running on your client's machine. The production build runs uglify and builds your source files into one or multiple minimized files. It also extracts CSS and images and of course any other sources you're loading with Webpack. There's also no hot reloading included. Source Maps might be included as separate files depending on your webpack devtool settings.
What specifically separates production from development is dependent on your preferences and requirements, which means it pretty much depends on what you write in your Webpack configuration.
The webpack-production documentation is very straight-forward.
Also, the article Webpack 3 + React — Production build tips describes the process of creating production builds for React with Webpack pretty good.
The very basic difference is that Production Build has ugly, minified(compressed) version of your javascript code, so this makes rendering of file on end user's browser very quick and performance enhancing.
You can also verify if production build is being used in the website by applying a google plugin extension, which when activated on your browser, will always tell you if the website is using react js on the front end and also tells whether the build type is production or development.
when react is development build,
production-ready versions of React and React DOM as single files are available as well,
<script src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
NOTE: Remember that only React files ending with .production.min.js are suitable for production.
The production and development build come into the picture just because of performance impact in real life deployed the application. Also, it happens that the location where the application is deployed is another continent altogether, so rendering development build js files on UI will take a hell of a time as compared to production version which is very crisp, compact, compressed, uglified for better user experience and loading on UI. for information CLICK HERE
react.development.js provides us extra features like debugging, hmr(Hot module reloading) and lots of other stuffs that you might
use while developing app with the help of bundlers like webpack, parcel, vite. This bundler bundles and minifies our code to be
deployed on production
These minified files will be deployed on production which removes lots of unnecessary files which will not be used by our app
for this we have react.production.js to make our much faster(as bundlers and lots of other files have done there work and are not required now)
I'm currently toying around with Sencha Touch 2.2.1 and am trying to get it to run offline using an HTML5 cache.manifest. Anyone know how to get this to work? I can only find old guides from the last version which no longer seem to work. After some fiddling I have my manifest as follows:
CACHE MANIFEST
index.html
app.js
touch/microloader/development.js
But this seems to throw errors in the development.js script when it attempts to send fetch the app.json file. Are there some Sencha settings I have to adjust for offline mode? Thank you for your help.
After some hunting around it seems this feature is present in Sencha Touch 2.0 but still a bit incomplete. To get it to work, do as follows:
You must have the Sencha command line installed (which you probably
already have since it's required to make a Sencha project in the
first place).
Navigate to your project's parent directory in command line
Use the sencha app build production command to "compile" your project into a single file
Navigate to your production directory in YourApp/build/YourApp/production
Chane the extension of cache.appcache to cache.manifest
Edit the index.html file's html tag so that manifest="cache.manifest"
Ensure your server is configured to serve .manifest files correctly
Now your production code should have a working cache manifest. Note you only need to change the extension so that the app works on iOS, it seems to work in browser (or at least Chrome where I tested this) with the .appcache extension.
Compiling to production appears to be the only way to generate a cache manifest file but you can use this same file in a testing build if you don't want all the code minified for debugging. Of course you'll have to copy your manifest over and ensure it's referenced in your testing build's html tag.
All in all Sencha clearly needs to update their documentation here but I'm glad I found this out. I only tested this with a super basic, static, two page application. Hoping it scales decently.
Instead of changing manually your production package, you should change in app.json lines after 'appCache'. Here is what will be generated by Sencha CMD and will work just fine after running sencha app build production.
You can see a live example here https://github.com/flrent/ConfMate/blob/master/app.json#L79