Build React Native project after pulling from GitHub - xcode

My friend initialized a GitHub repo after initializing React Native in a certain directory. After I pull his files into a directory and initialize a local repository on my computer and run the XCode project, there seem to be a lot of missing files and the build fails. There's probably something I need to do which is taken care of when setting up react native in the "react-native init AwesomeProject" step, but I'm not trying to set up a new project. Instead, I want to keep the files he's already developed, but set up the React Native "environment"..how would I go about doing this?

You need to install the dependencies through npm. Just enter the following command in the root directory of your project:
npm i

Related

Is it possible to disable ESLint when running npm run build for a React app?

I have an app initiated using Create React App, so npm run build runs react-scripts build. I recently installed prettier and so added a .eslintrc.json file to the project root to load the prettier plugin. npm run build works as expected locally, but, when deploying the app to Heroku, npm run build tries to run ESLint and fails because the plugins are devDependencies rather than dependencies.
Failed to load plugin 'prettier' declared in '.eslintrc.json': Cannot find module 'eslint-plugin-prettier'
From prior wrangling with a similar issue, I know that I can set NPM_CONFIG_PRODUCTION=false in Heroku so that it will install devDependencies, which actually does resolve the deployment issue. Nevertheless, I'm curious to learn if there's another solution that doesn't require setting NPM_CONFIG_PRODUCTION=false.
Is it possible to prevent npm run build in this scenario from running ESLint altogether or to prevent it from trying to access the plugins specified in .eslintrc.json? I acknowledge that adding .eslintrc.json to .gitignore is one solution, but I want the ESLint configuration in my repo.
you can run "npm run eject" to generate webpack configuration files, and then modify "webpack.config.js",delete the eslint configuration

react-native set ENVFILE file for builds / archives

I'm really confused about production / development builds in react-native. I can get my app working on both iOS and Android by using the package scripts in the terminal
ENVFILE='/path/to/.env' react-native run-ios
ENVFILE='/path/to/.env' react-native run-android
Thats great for running my app locally, but how do I run this command when creating archives through xcode?
I successfully installed react-native-config and I have the variables I need in the JS and native files, its just the final step of using this is prod or staging builds for devices.
I've managed to create fastlane scripts that build and deploy my app (and I can reference my .env vars in fastlane scripts) but that still doesn't bundle my app with the .env vars inside. Its probably something obvious but i'm not understanding the concept at all.
Ive been referencing this tutorial here, and noticing the part about adding a pre-script to each Scheme in xcode:
".env" > /tmp/envfile
But I dont know what the current working directory on that script is, and Im using yarn workspaces so my node_modules folder is not at the root of the RN project (doesnt that even matter?). I've tried multiple paths to my .env from here but nothing works, but I also dont know how to test this script.
I've successfully gotten it to work using Fastlane. I followed this guide for the Fastlane setup:
https://github.com/thecodingmachine/react-native-boilerplate/blob/master/documentation/docs/3_Guides/BetaBuild.md
After following the guide, I moved the Fastlane directory to the root of the project (and updated all paths).
And after that added the ENV variable when running the command, for example: ENVFILE=.env.beta fastlane ios, which is easy to add as a script in package.json.
It's also possible to use the dotenv feature in Fastlane, see https://github.com/fastlane/fastlane/issues/13494#issuecomment-428941643.
Bottom line is that Fastlane will use the environment variable when running the packager, meaning that react-native-config will successfully pick it up and use the proper env-file.

How do I make changes to the v-slider component and test it in my app?

I tried editing inside node_modules but the files are taken from dist and src seems to be ignored.
I tried npm run build to see if I can push my changes to dist but that doesn't work either as other dependencies seem to be missing.
UPDATE:
I followed the instructions about set up dev env in the Contributing section of the docs.
Made the changes and did yarn and yarn build
But the dist folder is identical to the one without my changes
What gives?
Instructions in the set up dev env in the Contributing section work.
After running "yarn build" in the cloned repository folder, you can copy the contents of the dist folder under packages/vuetify to the dist folder under node_modules/vuetify of the app being developed and your changes can be tested.
You can also do npm run build inside packages/vuetify for subsequent changes.
You can edit code in node_modules/vuetify/lib/components/VSlider/VSlider.js
Then, you install patch-package and execute path package vuetify
Delete node modules and execute yarn to create new node modules
Last, yarn serve, you see your code is work
https://www.npmjs.com/package/patch-package

nativescript 5.1 and tns_modules folder in IOS build

I had this issue before with some app (N 4.1).
Now i'm doing another app, and i have the same issue :
First, im preparing build:
tns build ios --for-device --release --provision MY_Provision
Nativescript is doing build, so next i'm opening it in XCode, and doing some twaks like version number etc...
Lastly i'm doing "Archieve" and trying to Validate this archieve.
The result is error, in the previous app written in N 4.1 i had the same but with another plugin, and now validation throws: Invalid build structure - binary app/rns_modules.fstevents.lib/binding/Release/FILE NAME.
many errors regarding this folder.
So i've just removed this directory and done another archieve and validation - app passed the validation.
So, my question is - do i need such number of plugins in tns_modules ?
Or better question - is there any way to determine what is not needed ?
Or, am i doing something wrong when building an app ? As seems massive number of directories here and i'm wondering if maybe there is some kind of cleanup or something ?
For now, the only way to store an app is to validate first, check what is blocking validation, delete this, check if app works (:() and try again.
Thank you.
Below, attached, folder that is blocking validation and amount of dirs inside of tns_modules.
pacakge.json:
NativeScript CLI will prepare (i.e. copy) all packages declared in the dependencies section of your package.json (and their dependencies) in tns_modules. All devDependencies and their dependencies will not be copied to the native Xcode/Android Studio project.
So, all packages that are required only for building the application, should be installed as devDependencies. For example, such packages are nativescript-dev-webpack, nativescript-dev-typescript, etc.
Also, it looks like you have installed NativeScript CLI as a dependency of your project. By default, it should be installed globally, i.e. npm i -g nativescript. In case you omit the -g flag, npm will install it as dependency of your project.
You can try:
rm -rf platforms
npm un --save nativescript
Check package.json for other packages with -dev in their names and ensure they are in the devDependencies section.
After that run tns build ios --forDevice.

How do I define a build step in general for heroku

When using the node.js build-pack in heroku, the postinstall hook in package.json can be used to run a custom build script
But what if I am not using the node build-pack? For example, if I am using the apt build-pack, how do I specify a custom build script? Do I still need to create a package.json file just to be able to have this capability?
I had a similar problem, in that I had two buildpacks on my application, one of which was nodejs. My package.json build script was getting run before my python dependencies had been installed, and was failing (I think the same thing would happen with postinstall). The solution was to reverse the buildpack order, and put the python one before the nodejs one, so the build script would have all necessary dependencies.
That same solution could apply here as well, using something like heroku-buildpack-shell. Just put that buildpack last, and stick your build script in .heroku/run.sh.

Resources