Expo Detached App: From ‘npm install’ to Store: Part 1 — Managing JS bundle for different environment

So, if you have toiled through the introductory article of this series then, be ready because now we are going to discuss some actual code and not just high level mumbo-jumbo.
To start of, as we all know that expo provides us with an expo kit which supports the hosting of JS bundle on their server which gives us great benefits like:
- Keeping the app size to a minimum
- Fast serving of bundle
- And most importantly, support OTA i.e. Over The Air updates
The URL format of hosted JS bundle is
https://exp.host/@username/yourApp
On development mode it uses a localhost url for (LAN)
The same link is present inside your native iOS and Android code but we’ll get to that later.
The problem here is that in a real development environment we usually have multiple environments which usually means having different app builds for each environment and in this case we need to have multiple JS bundles as well.
To solve this I have two solutions:

- The Sucky Solution: As the name suggests, it is a pretty sucky solution but a lot of app are using this techniques (shhh not naming them). So, it is pretty straight forward. As we saw that the JS bundle hosting is mapped using the above mentioned pattern, changing any element viz. expo_username or project-slug should do the trick and as changing a project slug will trigger a chain of error (because of detached project dependencies) we will rely on changing the expo_username.
Steps:
- Login to expo via xde or terminal (one account for each environment)
- Publish the JS bundle
- Android: Open MainApplication.java and find the link similar to above and change the username part of it.
- iOS: Open ExShell.plist change username in manifestUrl field and run the app.
- Now, the new builds will point to the new bundle hosted under the new username.

- The Ninja Coder Solution: It is a pretty old school but neat solution. It uses the classic of concept of cache busting i.e. by adding a query param in the url to fool the server into thinking of it as a separate file. The people at expo calls it release channel. With a simple command you can add a keyword preferably version/environment name and you do not have to change the user every time you need to submit a release. The command which you need to execute on your terminal will look something like this.
exp publish — release-channel <your-channel>
Which will now change the URL of the bundle to something like this.
https://exp.host/@username/yourApp?release-channel=<your-channel>
Example: I have a development environment so for that I need to execute
exp publish — release -channel development
which will create a link similar to
https://exp.host/@username/yourApp?release-channel=<your-channel>
In this article I will talk about just changing the bundle URLs, the management of URL on native end (Android and iOS) will be discussed in detail in the later articles.
You can always write node scripts to automate this process like I have done it for my projects. Feel free to respond and ask for the code of the script.

BONUS:
As I mentioned that after you detach it is difficult to change the URL by simply making the changes in ‘app.json’ file. Well, I saw an interesting project once which had a garrulous ‘README.md’ file stating all the steps from downloading the expo to detaching and running the build. When I asked the architecture about the purpose and workflow. He said and I quote:
Each user have a different expo account and manage different builds. If you start today you need to do everything from the start just to avoid the cross device dependencies. So, one developer always create development build and the other only production build and so on.
Jokes apart this real example was just to show how people not aware of this feature manage (even though how bizarre) their builds.
PS: Workflow apart they produced an amazing app(s) which has hundreds and thousands of downloads. Shhhhhh not telling the name though.
Like it? Give a clap and feel free to respond and share your views and idea.
If you are wondering where’s the first part then follow this link to read the pilot of this series.
