Building Serverless or Debug APK for React Native apps

Photo by Artem Sapegin on Unsplash

So I have been working on React Native for a long time, now and no one actually asked me this till I actually asked myself, “So every time, I have to create a signed APK to test it on another device?”. And as usual, I started googling but came up with a lot of results but none of them actually worked for all the apps that I created or worked with. Eventually, I came up with a solution to build a complete, working serverless APK that runs without the npm packager.

Basically, the process is very easy. Open a terminal/command prompt inside the root directory of your project and run the following commands:

1. Start the node packaging bundler:

npm start

2. When the terminal shows: “Loading dependency graphs….”, open a new terminal in the same directory and now run the following to create a new directory inside the app to store the assets:

mkdir -p android/app/src/main/assets

3. Use react-native’s bundle to bundle the assets in the directory created above:

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

4. Curl the .js files created to the index.android.bundle:

curl "http://localhost:8081/index.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

5. Change to /android directory and run gradlew to build the APK:

cd android && ./gradlew clean assembleDebug

Well, that’s it. Easy, peasy! After everything is done and it shows “Build successful”, your APK will be present in the folder

<project>/android/app/build/outputs/apk/debug

If you have some suggestions, comment below or give a clap!

Comments

[Marco Autiero]

Form me it worked with
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res_

the entry file, index.js, not _index.js

[Shubhkirti Sharma]

Yes. will edit the post to make the update.
Thanks for the help, man!

[Ashish Ekka]

Mine gets stuck on the asyncstorage module. First, the metro bundler crashes with permission error (even as admin) and the debug build just gets stuck.

Here's the error:

The bundler runs just fine when used normally using react-native run-android

[Shubhkirti Sharma]

This is generally the issue when CMD is not run as ADMIN.
Try running it as admin and then proceeding as given.

[jonno85]

packing everything in a script and add the relevant command in package.json
package.json:

...
"scripts": {
"android:offline": "./build_debug_offline.sh",
}
...

create the file in the root folder build_debug_offline.sh, add +x permission to it

build_debug_offline.sh:

#!/bin/bash
set -x

npm start &

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

curl "http://localhost:8081/index.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

cd android && ./gradlew clean assembleDebug

set +x

[aexelm-github]

Hi my friend!
is it possible generate a serverless APK on Expo builder?
I've tried following what you indicate, but it didn't work.
thanks a lot!

output :::::::::::::::::::::::::::::::::::

λ react-native bundle --platform android --dev false --entry-file App.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
Loading dependency graph, done.
info Writing bundle output to:, android/app/src/main/assets/index.android.bundle
info Done writing bundle output
info Copying 51 asset files
info Done copying assets

C:\myWork\dev-movil (master)
λ curl "localhost:8081/index.bundle?platfo..." -o "android/app/src/main/assets/index.android.bundle"
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- 0:00:01 --:--:-- 0curl: (7) Failed to connect to localhost port 8081: Connection refused

C:\myWork\dev-movil (master)
λ curl "127.0.0.1:19000/index.bundle?platf..." -o "android/app/src/main/assets/index.android.bundle"
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 151 100 151 0 0 151 0 0:00:01 --:--:-- 0:00:01 4870

C:\myWork\dev-movil (master)
λ cd android && ./gradlew clean assembleDebug
"." no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.

[G.V.S Akhil]

My images were not being displayed if I follow this process. Using react native - 0.61

[Shubhkirti Sharma]

I want to apologise for the mistake that happened that in the end of the react-native command and underscore occurred, which is probably why the images didn't got bundled correctly.
You can try it again I have fixed the latest issues.
Thanks for pointing it out.

[Geziel Carvalho]

Great!! Simple and straightforward!! Thank you very much. That worked for me.

[Ganesh Godshelwar]

thanks for great post.
how to build release apk with removing console logs?