Run React Native application for Windows without launching Metro - react-native

I have tried below steps to publish my React Native application for windows:
Open the solution in Visual Studio
Select the Release configuration from the Configuration Manager drop-down.
Build the solution. You can now launch without first launching Metro.
If you want to build an APPX package to share or publish, use the Project > Publish > Create App Packages... option.
Took reference from [https://microsoft.github.io/react-native-windows/docs/getting-started]
I have used below command to create my react-native application:
npx react-native init {projectName} --template react-native#^0.71.0
cd {projectName}
npx react-native-windows-init --overwrite
npx react-native run-windows
Here is my package.json looks like:
{
"name": "SampleRNApp",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest",
"windows": "react-native run-windows"
},
"dependencies": {
"react": "18.2.0",
"react-native": "0.71.0",
"react-native-windows": "0.71.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/preset-env": "^7.14.0",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^3.0.0",
"#tsconfig/react-native": "^2.0.2",
"#types/jest": "^29.2.1",
"#types/react": "^18.0.24",
"#types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.2.1",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.73.5",
"prettier": "^2.4.1",
"react-test-renderer": "18.2.0",
"typescript": "4.8.4",
"metro-config": "^0.73.7"
},
"jest": {
"preset": "react-native"
}
}
Observations:
For building the app it takes a hell lot of time (more than 30 mins) and after completing build successfully I'm not able to launch my RN application without Metro. It gives me error "A connection with the server could not be established" (see below error screen-shot).
System specs: I'm using Windows 11 OS and Visual Studio 2022 professional
After publishing I see there is an react-native application automatically installed into my system with the same name of my application and upon double clicking it I'm getting same error.
Error screen-shot:
error screen-shot
Could you please advice me how we can create React Native application for Windows project, standalone package which will work without explicitly running Metro (without running npm start command).
Thanks in advance!

Related

Unable to start a micro front-end app in single-SPA application

I am facing error while trying to start sub-app in Single-SPA application. Basically, I am trying to develop a kind of util app (sub app in Single-SPA) which contains Sockjs, Stomp-client etc. I have removed node modules and package-lock.json and installed node modules again. When I try to start application I am facing below error.
Error:
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options has an unknown property 'firewall'. These properties are valid:
object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
- options.client has an unknown property 'host'. These properties are valid:
object { logging?, overlay?, progress?, webSocketTransport?, webSocketURL? }
Command used for running the app : npm start
package.json
{
"name": "#sudeep/livedoc",
"scripts": {
"start": "webpack serve",
"start:standalone": "webpack serve --env standalone",
"build": "webpack --mode=production",
"analyze": "webpack --mode=production --env analyze",
"lint": "eslint src --ext js,ts,tsx",
"format": "prettier --write .",
"check-format": "prettier --check .",
"prepare": "husky install",
"test": "cross-env BABEL_ENV=test jest --passWithNoTests",
"watch-tests": "cross-env BABEL_ENV=test jest --watch",
"coverage": "cross-env BABEL_ENV=test jest --coverage"
},
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/eslint-parser": "^7.14.7",
"#babel/plugin-transform-runtime": "^7.14.5",
"#babel/preset-env": "^7.14.7",
"#babel/preset-typescript": "^7.14.5",
"#babel/runtime": "^7.14.6",
"babel-jest": "^27.0.5",
"concurrently": "^6.2.0",
"cross-env": "^7.0.3",
"eslint": "^7.29.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-ts-important-stuff": "^1.1.0",
"eslint-plugin-prettier": "^3.4.0",
"husky": "^6.0.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.0.5",
"jest-cli": "^27.0.5",
"prettier": "^2.3.2",
"pretty-quick": "^3.1.1",
"ts-config-single-spa": "^2.0.1",
"typescript": "^4.3.4",
"webpack": "^5.40.0",
"webpack-cli": "^4.7.2",
"webpack-config-single-spa": "^4.0.0",
"webpack-config-single-spa-ts": "^2.2.2",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"#types/jest": "^26.0.23",
"#types/systemjs": "^6.1.0",
"#types/webpack-env": "^1.16.0",
"fast-json-patch": "3.0.0-1",
"rxjs": "6.6.0",
"stompjs": "2.3.3",
"sockjs-client": "1.5.0"
}
}
I resolved this problem by updating "webpack-config-single-spa-ts" from 2.0.0 to 3.0.0.
The firewall option has been renamed as of webpack-dev-server v4.0.0-rc.0
You should use allowedHosts instead of firewall.
This problem has been fixed in version 4.0.0 of webpack-config-single-spa
, so upgrading this package will fix your issue as well.
I had the same situation in React.
The package.json file for the project had:
"webpack-config-single-spa-react": "2.0.0",
Therefore, when I executed
npm i
npm installed the exact required version of this component (2.0.0). It is possible to verify the installed version, if you look under
./node_modules/webpack-config-single-spa-react/package.json
I manually deleted the folder webpack-config-single-spa-react.
Edited the package.json in my project to request a version above 3.0.0:
"webpack-config-single-spa-react": "^3.0.0",
executed "npm install"
verified that at least version 3.0.0 of the package was installed by looking at:
./node_modules/webpack-config-single-spa-react/package.json
The actions above resolved the problem.
Modify in your package.json this module webpack-dev-server to 4.0.0-beta.0 and rebuild.
My versions:
packages

java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libfbjni.so result: 0

I created a new react-native project and added my android native module as a dependency.using official doc https://reactnative.dev/docs/native-modules-setup
When I run this I get the error with following stack trace:
java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libfbjni.so result: 0
at com.facebook.soloader.SoLoader.doLoadLibraryBySoName(SoLoader.java:825)
at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:673)
at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:611)
at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:559)
at com.facebook.soloader.NativeLoaderToSoLoaderDelegate.loadLibrary(NativeLoaderToSoLoaderDelegate.java:25)
at com.facebook.soloader.nativeloader.NativeLoader.loadLibrary(NativeLoader.java:44)
at com.facebook.jni.HybridData.<clinit>(HybridData.java:34)
at com.facebook.flipper.android.FlipperThread.run(FlipperThread.java:25)
Following is my package.json
{
"name": "albums",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"axios": "^0.19.2",
"react": "16.11.0",
"react-native": "0.62.0-rc.5",
"react-native-my-fancy-library": "../react-native-my-fancy-library/"
},
"devDependencies": {
"#babel/core": "^7.9.0",
"#babel/runtime": "^7.9.2",
"#react-native-community/eslint-config": "^1.0.0",
"babel-jest": "^25.3.0",
"eslint": "^6.8.0",
"jest": "^25.3.0",
"metro-react-native-babel-preset": "^0.59.0",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}
}
I have already tried:
https://stackoverflow.com/a/61695629/9715339
https://stackoverflow.com/a/57155606/9715339
https://github.com/facebook/react-native/issues/25415
But none of these solved my issue.
I am a beginner in react-native. So I don't know what other details files I need to post here. Do let me know if you need any other files.
For me the following two solved it (I think it was the latter that did it):
Reset cache: react-native start --reset-cache
Clean Android: cd android -> ./gradlew clean
for me this is resolved after following below steps
3 steps
Up minSdk to 23
In gradle.properties add line:
android.bundle.enableUncompressedNativeLibs=false;
In your manifest file add line:
android:extractNativeLibs=true;
I had the same problem that I solved by updating build.gradle 3.5.2 to 3.5.3 by Android Strudio.
The image shows the update of the classpath in the dependencies in the build.gradle file in the android folder

How to push to netlify in production mode [Nuxt JS]

I have my app created with nuxt js. I just want to push my app on Netlify.
So firstly i configure my deploy settings :
Repository on git
Base directory : Not set
Build command npm run build && npm run start
Publish directory .nuxt/dist
My app is build correctly but npm run start just launch on localhost:3000
I decided to modify config Host, I don't know if it's the best solution ?
{
"name": "app-nuxt",
"version": "1.0.0",
"description": "My remarkable Nuxt.js project",
"author": "wyllisMonteiro",
"private": true,
"config": {
"nuxt": {
"host": "https://mywebsite.com"
}
},
"scripts": {
"dev": "HOST=localhost PORT=3000 nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"test": "jest"
},
"dependencies": {
"#nuxtjs/axios": "^5.3.6",
"cookieparser": "^0.1.0",
"cross-env": "^5.2.0",
"js-cookie": "^2.2.0",
"nuxt": "^2.4.0",
"vee-validate": "^2.2.0",
"vuelidate": "^0.7.4",
"vuetify": "^1.5.5",
"vuetify-loader": "^1.2.1"
},
"devDependencies": {
"#vue/test-utils": "^1.0.0-beta.27",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^24.1.0",
"coffee-loader": "^0.9.0",
"coffeescript": "^2.4.0",
"jest": "^24.1.0",
"node-sass": "^4.11.0",
"nodemon": "^1.18.9",
"pug": "^2.0.3",
"pug-plain-loader": "^1.0.0",
"sass-loader": "^7.1.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-jest": "^3.0.3"
}
}
I want to launch in localhost:3000 by executing npm run dev
AND https://mywebsite.com by executing npm run start
Can you tell me if there is some modifications in my package.json or in my deploy settings on Netlify
For anyone that stumbles across this in the future, the problem you're experiencing is due to a misunderstanding with what services Netlify offers.
Specifically, they are primarily a static site host, which means they will host your built files, and serve them for you. They will not run your server, which means nuxt start will not run.
Instead, you should be using nuxt generate to generate the static files of your app, and telling Netlify where the output folder is.
For example, the "build settings" on Netlify:
Repository github.com/example/example
Base directory Not set
Build command npm run generate
Publish directory dist
This will properly deploy a Nuxt app, assuming you haven't changed the default build folder. For clarification, the .nuxt folder contains both client and server files, and can only be used when running your own Nuxt server on an instance of some kind.
As it looks you need to tweak your deployment command. Go to Netlify and try changing it to npm install; npm run build. This should resolve the problem.

"App not installed" error after building android app with "expo build:android"

after I ran expo build:android i got the apk file built successfully but when I try to install it in many devices, it is not being installed and it shows "App not installed" error [image].
here is my package.json:
{
"name": "some-app",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"axios": "^0.18.0",
"expo": "^31.0.2",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-navigation": "^3.1.2",
"react-redux": "^6.0.0",
"redux": "^4.0.1",
"redux-persist": "^5.10.0"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0"
}
}
the problem was in the android packager name in my app.json
so it was like that:
"package": "com.<myName>.<appName>"
i replaced myName with the appName like that :
"package": "com.<appName>.<appName>"
and it worked like a magic and I was able to successfully build and install the app on multiple devices
Make sure to uninstall any previous version of the App installed as they may have the same package name.
On your main screen of the phone, scroll down the status bar of the phone.
Select the “Airplane Mode”, and press “Turn ON”
Now go and try to install your application
While installing a notification may appear about “Blocked by Play Protect”
Then press “Install anyway”
The solution for me was the disk space of my phone.
Solution:
-> Try to uninstall some apps and after this try to install. ;-) worked fine for me
Those two solutions didn't make it for me. What made it for me was just to install the last Os on my phone and the apk install finally worked. Hope my answer can help someone as it took me a long time to find out why.
Also check if your mobile device has space. I cleared up about 2GB of dummy data on my device and the app installed.

Unrecognized command 'run-eject'

I want to eject my react-native so I can install mobx but running both 'yarn run eject' and 'npm run eject' doesn't work.i think this is new issue and so couldn't find help online. any help would be appreciated.
this is my package.json file and the error given below.
{
"name": "a2x",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-preset-react-native-stage-0": "^1.0.1",
"jest": "^22.4.4",
"jest-react-native": "^18.0.0",
"react-test-renderer": "16.3.1"
},
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"test": "jest",
"eject": "react-native run-eject"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"axios": "^0.18.0",
"mobx": "^5.5.0",
"mobx-react": "^5.2.8",
"react": "16.3.1",
"react-native": "~0.55.2",
"react-native-elements": "^0.19.1",
"react-navigation": "^2.0.1"
}
}
Try npm run eject..not npm run-eject
But if you trying to add native dependencies later i think better to start project using react native init. not using create-react-native-app.
Actual command is react-native eject.
It will create new folder for android and iOS to run it seperately on native.
As you said you are getting error of Both the iOS and Android folders already exist!, so please delete it and try with this command.
If you already have android and ios folder with some native implementation, there is no need to use eject command at all.
regarding npm run reject command, I guess this will be more useful to clear everything.
Always working for me, only follow two steps
first install in your project
yarn add react-native-eject
and then run
react-native eject
make sure you have install yarn in your pc