Mozilla firefox for windows vista

Apple has done a great job of locking in developers by ensuring the Xcode toolchain can only run on MacOS products. For people who prefer working on Windows machines, this is very frustrating. We wanted a way to run our builds from our Windows computers.

We managed to find a solution for building from a Windows computer, however it still requires using a MacOS server in the backend.

Want to build React Native for iOS, from Linux?

npx rnbuildanywhere build

Getting started

1. A Mac. This can be a physical machine like an old Macbook, a Mac Mini, or a Mac Server. Or, it could be a Mac VPS rented from a service like MacinCloud or other VPS providers.
2. A Windows computer.
3. An iPhone or iPad connected via USB to the Windows computer.

Setting up the Mac

SSH Access

First thing’s first: you’re going to need to be able to SSH into the Mac from your Windows machine. That means you’ll need to enable remote connections on the Mac and add your public SSH key to the ~/.ssh/authorized_keys file.

We won’t cover the SSH setup in this tutorial, but there are many resources on the internet which can help you do so.

Xcode toolchain

Install the Xcode command line tools by running:

xcode-select --install

fastlane

fastlane is a toolkit for automating tasks related to iOS and Android builds. We use it to do the complicated things like managing provisioning profiles and codesigning.

To install fastlane, check out their installation instructions.

Git access

You’ll need to create a git repository, on Gitlab or Github, where fastlane will store your signing certificates (encrypted). Your Mac needs to be set up to access this git repository via an SSH url (e.g. [email protected]:user/repo.git).

If you can clone the repo without it asking for a username / password, you’re all good.

Other build requirements for React Native

Any tools that you use to build your React Native project need to be available. For example, npm, yarn, etc.

Setting up the Windows machine

SSH & SCP setup

Windows 10 now ships with SSH & SCP! YAYA

• Open Powershell
• Type «ssh» and «scp». If you see «is not recognized as an internal or external command», it’s not set up properly.
• ssh-keygen to generate a keypair
• keypair gets placed in %HOME%\.ssh
• Add a config to access your Mac server in %HOME%\.ssh\config

We’ll assume that you can SSH into your Mac machine by using the command ssh mac.

Install required tools

You’ll need to have access to the following commands:

• tar (accessible from a Powershell)
• rsync (Download the free version of cwRsync and add it to your path)
• git (Download Git for Windows)
• ideviceinstaller
• fastlane (yes, you probably need it installed on both machines)
• node / npm ([Download the installer from nodejs.org)

Apple Developer setup

Bundle ID creation

You’ll need to make sure your bundle identifier is created. To do this:

1. Visit https://developer.apple.com/account/
2. Sign in with your account
3. Navigate to https://developer.apple.com/account/resources/identifiers/list
4. Add a new App identifier

Take note of your Bundle Identifier you entered

Team ID

You need to note your Team ID. You can get this by visiting https://developer.apple.com/account/#/membership/.

Devices

You need to make sure your device is added to the list at https://developer.apple.com/account/resources/devices/

React Native project setup

The important thing here is getting your project set up to build with fastlane. We’ll start from a fresh React Native project to illustrate things from the start.

First, we’ll create a new React Native project:

npm install react-native
npx react-native init reactnativetest

Then, we’ll initialize fastlane for the project:

cd reactnativetest/ios
fastlane init

When it asks you What would you like to use fastlane for?, select Manual setup.

Finally, you need to create your Fastfile, which tells fastlane what commands to execute (in this case to build the React Native project).

This takes some tinkering. Here’s what worked for us:

# must match the bundle ID in Apple Developer Setup (above)
BUNDLE_ID = 'your-bundle-id'

# must match your Apple Developer Team ID
TEAM_ID = 'your-team-id' 

# the email associated with your Apple Developer account
ICLOUD_USERNAME = '[email protected]' 

# the path to Info.plist. normally, this is 'projectname/Info.plist'
PLIST_PATH = 'reactnativetest/Info.plist' 

# the scheme (normally just your project name)
SCHEME = 'reactnativetest'

# the git repo where fastlane Match will store your certs
GIT_REPO = '[email protected]:user/repo.git' 

update_fastlane
default_platform(:ios)

platform :ios do
  desc "Builds the app for iOS"
  lane :build do

    # specify the team_id we want to use for this build
    team_id(TEAM_ID)

    # make sure the xcode project has the appropriate settings
    update_app_identifier(app_identifier: BUNDLE_ID, plist_path: PLIST_PATH)
    update_project_team(teamid: TEAM_ID)

    # install dependencies
    sh('cd ../.. && yarn install')
    cocoapods

    # set up code signing using a temporary keychain
    disable_automatic_code_signing
    delete_keychain(name: "codesigning.keychain") if File.exist?(File.expand_path("~/Library/Keychains/codesigning.keychain-db"))
    create_keychain(name: 'codesigning.keychain', default_keychain: true, unlock: true, timeout: false, password: 'codesigning')

    # set up provisioning profiles and code signing
    match(
      type: 'development',
      username: ICLOUD_USERNAME,
      app_identifier: BUNDLE_ID,
      keychain_name: 'codesigning.keychain',
      keychain_password: 'codesigning',
      force: true,
      git_url: GIT_REPO 
    )

    # run the build
    gym(
      scheme: SCHEME,
      export_method: 'development', 
      xcargs: {
        :PROVISIONING_PROFILE_SPECIFIER => 'match Development ' + BUNDLE_ID
      }
    )
  end
end

After that, you should be good to go!

Building the project

Finally, here’s the fun part! Here are the steps for building:

1. Uploading the project to the MacOS server. This will be run once, for the first build.
2. Updating the project on the MacOS server. On the first build, this will do nothing, but on subsequent builds we’ll upload any changes.
3. Executing the build on the MacOS server.
4. Downloading the built .ipa file.
5. Installing the built .ipa file to the iPhone, connected to your Windows computer.

Uploading the project to the MacOS server

To do the initial upload, we’re going to create a tarball of the project and upload it to the remote server. This is especially important if you have a large project, as the tarball upload will be quicker than the method we will use to update files on the remote server. The issue, though, is that we do not want to include any installed dependencies (such as node_modules or installed Pods).

Luckily, react-native init generates a .gitignore file which excludes all these by default.

If you haven’t set up a git repo for your project, you need to do the following:

git init
git add .

Then, we’ll create a tarball of the project as follows:

git ls-files >files.txt && tar -cvf archive.tar.gz --files-from files.txt && del files.txt 

We’ll upload the new archive to the MacOS server and extract it:

# create a new folder on the remote server
ssh mac "cd ~ && mkdir reactnativetest"

# upload the archive
scp ./archive.tar.gz mac:~/reactnativetest

# extract the archive
ssh mac "cd ~/reactnativetest && tar -xvf archive.tar.gz"

Finally, we’ll clean up the mess we made.

rm archive.tar.gz
ssh mac "rm ~/reactnativetest/archive.tar.gz"

Updating the project on the MacOS server

This part is a bit simpler. After we’ve uploaded the initial tarball, we’ll use rsync to upload any changes we make. Again, we’ll need to make sure we don’t upload any of the node_modules or other dependencies.

Unfortunately, rsync won’t read from our ~/.ssh/config.

rsync -avzP --delete --exclude=".git" --exclude-from=".gitignore" -e "ssh -i $HOME/.ssh/id_rsa" . [email protected]:~/reactnativetest 

That’s it! rsync is a great tool.

Executing the build on the remote server

This is also a single command, luckily!

We’re going to use two variables when we run the build:

• FASTLANE_PASSWORD passes your icloud password to Fastlane (use to access the API to download provisioning profiles and code signing certificates
• MATCH_PASSWORD is the password Fastlane uses to encrypt your generated provisioning profiles and signing certificates.

ssh mac "cd ~/reactnativetest/ios && FASTLANE_PASSWORD=your_icloud_password MATCH_PASSWORD=match_password fastlane build"

Downloading the .ipa file

This is a quick and easy step:

scp mac:~/reactnativetest/ios/reactnativetest.ipa .

Installing the .ipa file

Plug in your phone, and grant the Windows computer permission to access it. Then, simply run

ideviceinstaller -i reactnativetest.ipa

That’s it, the app should be installed on the iOS device!

Время на прочтение2 мин

Количество просмотров50K

Доброго времени суток!

Решив начать разрабатывать приложения на React Native, я столкнулся с проблемами разворачивания окружения. Сегодня я хочу поделиться опытом его настройки.

Конечно, на официальном сайте есть подробное описание, но следуя только этим рекомендациям, было довольно сложно сделать все настройки.

Картинка с сайта: habr.com

Итак, начнём:

Node, Python2, JDK

• Установить NodeJS. У меня последняя версия на момент написания статьи 10.11.0
• Установить Python2 и JavaSE. Использовался jdk-10.0.2

React Native CLI

• Установим React Native CLI

npm install -g react-native-cli

Android development environment

• Скачиваем и устанавливаем Android Studio

  После запуска выбираем кастомную установку

  

  Картинка с сайта: habr.com

  Далее отмечаем галочкой «Android Virtual Device» и указываем пусть до папки Android — либо оставляем как есть C:\Users\%USERNAME%\AppData\Local\Android\Sdk
  Главное, чтобы в пути не было кириллицы!

  Особенно с этим могут возникнут проблемы в будущем. Например, у меня имя пользователя системы было на кириллице «C:\Users\Александр», и после запуска приложения grandle не мог найти путь, т. к. путь выглядел как «C:\Users\????????\…»

  

  Картинка с сайта: habr.com

  Нажимаем «далее». Оставляем рекомендуемый объем оперативной памяти, нажимаем далее и устанавливаем.

• Android SDK — открываем студию и переходим в настройки
  Appearance & Behavior → System Settings → Android SDK.

  На вкладке «SDK Platforms» включаем галочку «Show Package Details» и для «Android 8.0 (Oreo)» устанавливаем:

  • Android SDK Platform 26
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image
  

  Картинка с сайта: habr.com

  Теперь выбираем вкладку «SDK Tools», включаем галочку «Show Package Details»
  и устанавливаем пакет

  • «28.0.3»

  Нажимаем "Apply".

Переменные среды

• ANDROID_HOME
  Создадим переменную для ANDROID_HOME:
  

  Картинка с сайта: habr.com

  • Имя переменной ANDROID_HOME
  • Значение переменной (можно посмотреть в Android Studio)
  

  Картинка с сайта: habr.com

• JAVA_HOME
  По аналогии создадим переменную JAVA_HOME:
  • Имя переменной: JAVA_HOME
  • Значение переменной: C:\Program Files\Java\jdk-(версия)

• Изменим системную переменную Path:
  

  Картинка с сайта: habr.com

  Добавим 4 значения:

  1. %JAVA_HOME%\bin
  2. %ANDROID_HOME%
  3. %ANDROID_HOME%\platform-tools
  4. %ANDROID_HOME%\watchman

Создаем приложение и запускаем эмулятор

• Переходим в удобную для нас папку в консоли и набираем:
  react-native init MyTestProject
• Открываем в Android Studio наш проект и открываем AVD Manager
  

  Картинка с сайта: habr.com

  Если AVD не скачан, скачиваем и запускаем

• Далее переходим в консоли в папку с приложением и набираем:
  react-native run-android

  После чего нашел приложение запустилось.

В этой статье использовались официальное руководство от React Native
+ личный опыт!

Надеюсь, эта статья поможет тем, кто столкнулся с проблемами или решил начать разрабатывать нативные приложения на React

.

INTRODUCTION.

In the dynamic world of app development, React Native stands tall as a game-changing framework, allowing developers to create cross-platform applications with unparalleled ease. If you’re a Windows user eager to harness the potential of React Native, you’ve come to the right place.

In this comprehensive guide, I’ll walk you through the step-by-step process of installing React Native on your Windows machine. Whether you’re a seasoned developer exploring new tools or a newcomer eager to dive into the world of app development, this tutorial will equip you with the knowledge and tools needed to kickstart your React Native journey.

From setting up the necessary dependencies to configuring your development environment.
Ready to elevate your development experience? Let’s get started!

NOTE: This article covers the installation of react native version 0.73 upwards.

INSTALLING THE NECESSARY TOOLS AND DEPENDENCIES.

NODE
The first thing you have to install is Node. Make sure Node is installed on your machine if you haven’t you can get it here by downloading the LTS version (Long Term Support).
Note: Node V18 or higher is recommended for installing react native with version 0.73 or higher.

You can check the version of node installed on your system by running the following command.

node --version

ANDROID STUDIO.
The next thing you have to install is Android Studio, Android studio helps in building and installing our app on Android. You can download and install Android Studio here. While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:

• Android SDK
• Android SDK Platform
• Android Virtual Device

JAVA DEVELOPMENT KIT (JDK)
Another thing that has to be installed on your machine is Java development kit (JDK). You can get this from different sites e.g. Open JDK, OpenLogic, and others. There are different versions of Java but for react native V0.73, JDK 17 is strongly recommended, you can get the JDK 17 here, just download and install it on your system.

After installing Java, you can check the version you have installed by running the following command in your terminal.

java --version

You should see something similar to the picture below after running the command.

Картинка с сайта: dev.to

You can also find the location of the folder of your installed Java by checking the program files on your system. In my case I installed my Java from OpenLogic, you can choose to install from any source, just make sure the location(path) is correct when adding it to the environment variables

Картинка с сайта: dev.to

SETTING UP YOUR ANDROID STUDIO.

The next thing is to set up your Android studio, the following must be installed in your Android studio. In your Android Studio, navigate to the SDK Manager tab by clicking the “more actions” button then select SDK Manager.

Картинка с сайта: dev.to

Then in your SDK manager, under the SDK platforms, make sure the following are installed and checked.

• Android API 34
• Android 13.0 (“Tiramisu”)

You can ignore other packages installed in the picture below, the ones mentioned above are the most important.

Картинка с сайта: dev.to

Under the SDK tools tab in your Android studio, ensure the following are installed as well.

• Android SDK Build-Tools 34
• Android SDK Command-line tools (latest)
• Android emulator
• Android emulator hypervisor driver
• Android SDK Platform-Tools
• Google Play Licensing Library
• Intel x86 Emulator Accelerator (HAXM installer).

Картинка с сайта: dev.to

ADDING THE NECESSARY ENVIRONMENT VARIABLES.

The next thing is to add the necessary environmental variables to your system variables, these variables are needed for your react native to run effectively. But before that, you have to take note of the Android SDK location on your system, you can find this in your Android studio in the SDK manager, just like the one in the picture below.

Картинка с сайта: dev.to

Now go to the environment variables on your system, you can find this by searching for environment variables on your system and then opening it up, once it opens, click on environment variables. There are two different types of variables, the first one is the user variables while the second one is the system variables. For the user variables, add the following:

• ANDROID_HOME
• ANDROID_SDK_ROOT

Картинка с сайта: dev.to

The two variables above should point to the Android SDK location on your system (you can get this from Android Studio).

• JAVA_HOME

The JAVA_HOME variable should point to the location of Java installed on your system. You can get this by going to your C directory and check under the program files, just copy the location of the folder and paste the location as the value of the JAVA_HOME variable.

After doing that, click on the path variable and click on edit to add the following variables.

Картинка с сайта: dev.to

Then click on edit to add the locations of your Android SDK-Tools and Android SDK Platform-Tools

Картинка с сайта: dev.to

For the system variables, add the following, their values should be the same as above.

• ANDROID_HOME
• JAVA_HOME

Картинка с сайта: dev.to

After following the steps above, click on the path variable and click on edit.

Картинка с сайта: dev.to

Click on edit to add the locations of the bin folder in the Java folder in your program files folder and also the bin folder in the latest folder in the command-line tools folder in your Android SDK location on your system just like the one below.

Картинка с сайта: dev.to

POSSIBLE ERRORS AND SOLUTIONS.

After adding all the variables mentioned above, there’s a probability you run into another error and I will explain two of the common errors and how to fix them below.

1. “Android SDK — versions found N/A, version supported 34.0.0”

This kind of error happens when you try to open your Android app on the emulator and it doesn’t open because it was unable to install the app on the emulator. This happens if a wrong Java version is installed OR your JAVA_HOME environmental variable isn’t pointing to the exact location where Java was installed on your computer. To fix this, confirm that you have installed the correct Java version which is V17 and above. Then check all the JAVA_HOME environment variables on your system and make sure they are pointing to the correct location of the Java installed.

Картинка с сайта: dev.to

1. The second possible error that can happen when trying to open your app on the emulator is

“Java.io.IOException: The filename, directory name, or volume label syntax is incorrect”

Картинка с сайта: dev.to

To fix this error, go to your react-native project and go to the android folder, create a local.properties file. In the file, paste the following.

sdk.dir = C:\\Users\\USER\\AppData\\Local\\Android\\Sdk

what we have above is the location of your Android SDK, the only difference is that all the slashes are double and this is the most important thing to fix the error.

NOTE: All the slashes in the local.properties file must be double, and make sure your Android SDK location is correct.

After this, you can run your react-native app again and everything should work perfectly. To check for any error in your react-native project, open your terminal, navigate to the project directory then run the following command. it checks for all the possible errors and lists them out, if there are none, it checks them with a green mark.

npx react-native doctor

RUNNING YOUR ANDROID APP ON AN EMULATOR.

Now that the react-native installation is complete, the next thing is to open the app on an emulator. To do this, you have to download a virtual device/Android emulator from Android Studio. So go to your Android studio, click on the “more actions” button, and select “Virtual Device Manager”, you should have a screen just like the one below.

Картинка с сайта: dev.to

If you already have a virtual device downloaded, just click on the play button to open it up but if not, click on the “Create device” button on the top left-hand corner to create a new virtual device, you should see a screen just like the one below.

Картинка с сайта: dev.to

Select any device of your choice and then click on the “Next” button to select and download a system image, then click on “Next” to download the virtual device then click on “Finish” when you are done. After downloading the virtual device, go to the device manager to see all downloaded virtual devices and then click on the play button to open up any of the devices.

After following the instructions above, go to your react-native project and run the following commands, each command should be run on a different terminal.

npm start

npm run android

The first command is to start the metro bundler while the second command is to open your app on the emulator. After running the command, your app should open up on the emulator just like the one below.

Картинка с сайта: dev.to

Other important commands that you should take note of are:

npx react-native doctor

adb devices

The first command is used to check/diagnose if there’s any error with your react-native application, just navigate to the project directory and run the command, you should see something like the picture below.

Картинка с сайта: dev.to

The second command is used to check for any connected virtual devices.

NOTE: Android Studio must be installed on your computer to use the adb command.

CONCLUSION.

Congratulations! You’ve successfully navigated the installation process of react-native on Windows. But before I come to the end of this article, let’s take a quick look at the summary of what we have discussed so far in this article.

1. Firstly, I talked about the dependencies and software needed to be installed which are Node, Android Studio, and JDK.
2. Secondly, I talked about how to install all the dependencies, how to set them up, how to check the version installed, and also how to set up your Android Studio and the necessary tools and packages to install on it.
3. After that, I talked about how to set all the necessary environment variables for both the user and the system.
4. After that, I talked about how to run your react-native project on the Android emulator.
5. Lastly, I discussed about some possible errors that usually occur during react-native installation and how to fix them.

As we conclude this guide on installing React Native on Windows, take a moment to appreciate the foundation you’ve laid for your cross-platform app development journey.

With your development environment configured, you’re armed with the tools to craft innovative, responsive, and efficient mobile applications. Whether you’re building for Android or leveraging the capabilities of React Native for iOS, the skills you’ve acquired are your passport to a diverse and thriving ecosystem.

Happy coding 🥳 😎