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)
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
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 have created a sample app from Create-React-App library. When I ran the build command then it generates a service-worker on its own using cache-first strategy.
But I need some more functionality like cache some API responses n all. I don't know how to modify the script which includes my own code in auto generated service-worker.
I have found some help lines for my case but these are not enough to get a whole understanding of it.
By default, the generated service worker file will not intercept or cache any cross-origin traffic, like HTTP API requests, images, or embeds loaded from a different domain. If you would like to use a runtime caching strategy for those requests, you can eject and then configure the runtimeCaching option in the SWPrecacheWebpackPlugin section of webpack.config.prod.js.
Above paragraph is from official doc
Thanks in advance!
We had a similar problem while working on a project recently and we didn't want to "eject". We created a little tool that allows you to append custom service worker code to the one generated by CRA.
Have a look here: https://github.com/bbhlondon/cra-append-sw
You would can run npm run eject and get access to the underlying Webpack configuration.
Once you do that, the webpack.config.prod.js file can be modified to adjust your generated service worker. Look for the section that configures SWPrecacheWebpackPlugin.
You can add in an additional runtimeCaching configuration option to that section to accommodate your runtime caching needs.
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.
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