How to Disable generating sourcemap with expo build:web - react-native

I tried with putting
GENERATE_SOURCEMAP=false
in .env file, running command
set \"GENERATE_SOURCEMAP=false\" && expo build:web
and
"build": "GENERATE_SOURCEMAP=false expo build:web"
in scripts inside package.json
nothing works. Devtools show my everything.
How can I protect my source from being exposed with expo:build?

Working with this for a while...
You can just build your web app like
GENERATE_SOURCEMAP=false expo build:web
Or edit your package.json as
"scripts": {
"custom-web-build": "GENERATE_SOURCEMAP=false expo build:web",
"...": "..."
}
Then
yarn custom-web-build
Note that you might have to clean your browser cookies or use a private window to see the changes.

Related

Eas build brokes the app, when classic expo build works just fine

i have a problem with eas build (expo), My app size is about ~60mb (using expo build:android), and that build is working just fine, (I'am using physically phone).
I've build the same app, no changes, with eas build, there is a crash.
How i run eas build: eas build -p android --profile preview
How i run expo build: expo build:android -t apk
I want to point, I'am not getting any errors when Grandle is runned, and build is just fine
There is my eas.json
{
"build": {
"preview": {
"android": {
"buildType": "apk"
}
},
"preview2": {
"android": {
"gradleCommand": ":app:assembleRelease"
}
},
"preview3": {
"developmentClient": true
},
"production": {}
},
"cli": {
"version": ">= 0.48.2"
}
}
How can i check the log of crash?
Does someone had something similar?
Maybe diffrent solution to make app smaller?
In my case, if an environment variable was missing on first screen the app would crash.
The problem was that I had my variables in an .env file, which will work for the classic build but doesn't in eas build.
If that's your case, you'll need to declare your environment variables in your eas.json file, or create a secret for your app through expo's website for sensitive values.
You can read more about it here: https://docs.expo.dev/build-reference/variables/
Maybe any logs?
I've had 1 problem regarding Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8. **EXPO.dev** and I'm working with Firebase, then the problem was about .gitignore having google-service.json and .env, which as per this comment are not uploaded in the EAS Build.
I'm having the same problem and working through debugging.
Here's a good place to start -- if you're on mac, connect an android device and run:
adb logcat '*:S' ReactNative:V ReactNativeJS:V
This will help you log relevant errors and debug the issue. Simply running adb logcat logs an unmanageably large amount of data.
The issue and the answer are actually in this post, but I'll outline it here briefly.
I had the same issue with undefined .env variables. The issue is that the files in your .gitignore file aren't uploaded to eas machine that assembles your build. But you can create .easignore file that would be a copy of your .gitignore file excluding your .env file.

How to manage react-native .env variables with PhpStorm Run/Debug Configuration?

I am using PhpStorm and trying to automate the run with specific env variable. Managing .env variables for dev, staging, prod is very time saving and safe. So when I run set ENVFILE=.env.staging && react-native run-android from terminal, it picks the .env.staging variables but then I am not able to debug react-native app from PhpStorm. I am using react-native-config package.
When I run with this config it always picks from .env file.
Then I tried to run with package.json scripts like
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"android-dev": "set ENVFILE=.env.staging",
"android-staging": "set ENVFILE=.env.staging && react-native run-android",
"android-prod": "set ENVFILE=.env.prod && react-native run-android",
"build-android-prod": "set ENVFILE=.env.prod && cd android && ./gradlew assembleRelease && cd .."
}
Although it opens the debug tab when I run debug with PhpStorm debug, but it was not showing debug variables.
So what I want is that clicking the Run/Debug choose the correct .env file and I will able to debug React Native app from PhpStorm.
You can create separate run configurations with appropriate names for dev, staging and prod, setting the corresponding environment variables (ENVFILE=.env.staging, ENVFILE=.env.prod and ENVFILE=.env.dev) in Environmentvariables: field of each of them, like:

React native - missing srcipt: ios

How to run react native app in iOS Stimulator?
I'm using npm run ios but I'm getting this error missing srcipt: ios
How to solve this?
You can run your project with just simple
react-native run-ios
And if you want to run on any particular simulator device run this
react-native run-ios --simulator="iPhone 6s" // Check your available devices
Usually we have package.json with any command line scripts, for example:
"scripts": {
"test": "node ./node_modules/jest/bin/jest.js --watchAll",
"dev": "exp start --dev --lan",
"build-android": "exp build:android",
"build-ios": "exp build:ios"
},
In your case, I am not sure from which source you initialized or cloned your project. But you will need to add and you can add without any issue the missing scripts.
You can label them by anything, e.g. "test" can be named by "mytest".
The example I have given above, you can see command exp, this is a module that you will need to install globally in order to run this command.
using npm install -g exp command. Then you can run the custom added scripts.
Find anything confusing, ask again.
Did you try running react-native run-ios?
https://facebook.github.io/react-native/docs/running-on-simulator-ios.html
If that doesn't work, you can always open project-directory/app/ios/[your-project-name].xcodeproj in xcode, and run the simulator in xcode directly.

Using webpack watch and npm-watch together

My app uses Webpack and an Express server. Will I create problems if I run webpack --watch in one terminal tab, and npm run watch in another?
Is there a better way to auto-build after files change, and also refresh the server?
I guess it won't create any problem and if you make any changes in your component, webpack will automatically compile the changes and you need not refresh the server. Use this in your package.json
"scripts": {
"start": "webpack-dev-server --hot"
}
Install by using npm install webpack-dev-server
Hope it helps!

How to use Jest with React Native

The testing section of the docs for React Native suggest that Jest is the official way to do unit tests. However, they don't explain how to get it setup. Running Jest without any setup gives syntax errors (with no line numbers :( ) because it doesn't apply the transforms (eg ES6 features, JSX and Flow) that React Native code tends to use. There's a jestSupport folder in the React Native source try that contains a env.js and scriptPrerocess.js, the latter has code for apply the transforms. So I've copied those into my project and added the following section to my package.json:
"jest": {
"scriptPreprocessor": "jestSupport/scriptPreprocess.js",
"setupEnvScriptFile": "jestSupport/env.js"
},
This fixes the first error but I still get the following error:
Using Jest CLI v0.4.0
FAIL js/sync/__tests__/SynchronisedStorage-tests.js
SyntaxError: /Users/tom/my-project/js/sync/__tests__/SynchronisedStorage-tests.js: /Users/tom/my-project/js/sync/SynchronisedStorage.js: /Users/tom/my-project/node_modules/react-native/Libraries/react-native/react-native.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/browser/ui/React.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/utils/ReactChildren.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/addons/ReactFragment.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/classic/element/ReactElement.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/core/ReactContext.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/vendor/core/warning.js: Unexpected token .
1 test failed, 0 tests passed (1 total)
Run time: 0.456s
Is there more I need to do to make Jest understand React Native? Are there any examples of Jest setup to test React Native?
EDIT:
There was a check in scriptPreprocess that stopped it from running over any file in node_modules which of course included the whole of React Native. Removing that fixes the error above. However, I'm now getting more errors from the React Native source, it definitely seems like it isn't meant to be run within Jest.
EDIT2:
Explicitly setting the mock for the react-native module works:
jest.setMock('react-native', {});
That seems like it's going to be very manual and not very useful for testing code that interacts with the React Native API a lot. I definitely still feel like I'm missing something!
I got Jest to work for my React Native application, and it is running tests without any problem on files with ES6 and ES7 transforms.
To get Jest to work, I followed these steps:
Copied the jestSupport folder from the React Native master repo to my react-native folder in node_modules.
Edited the "jest" line in my packages.json to points to the files in the jestSupport folder
The "jest" line in my packages.json now looks lke this:
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/react-native/jestSupport/scriptPreprocess.js",
"setupEnvScriptFile": "<rootDir>/node_modules/react-native/jestSupport/env.js",
"testFileExtensions": [
"js"
],
"unmockedModulePathPatterns": [
"source-map"
]
},
As of React Native v0.37.0, Jest is part of the new app template.
In a new app you can run tests right away:
$ react-native init MyAwesomeApp
$ cd MyAwesomeApp
$ npm test
...
Tests: 2 passed
For newer versions of jest, setting it up for react-native is very easy.
Install jest using
npm install --save-dev jest-cli babel-jest
In package.json, add this
"scripts": {
"start": "babel-node ./server/server.js",
"import-data": "babel-node ./scripts/import-data-from-parse.js",
"update-schema": "babel-node ./server/schema/updateSchema.js",
"test": "jest",
"lint": "eslint ."
},
"jest": {
"haste": {
"defaultPlatform": "ios",
"platforms": [
"ios",
"android"
],
"providesModuleNodeModules": [
"react-native"
]
}
},
You might only need to add lines related to jest
Now you can use
npm test
to run jest.
Refer to f8app's github repo to find more about this.