Hi all!
Is amazing to finally get started contributing to RedwoodJS 
. In this article I will present some steps you could follow to add a mobile side to your Redwood Project using CapacitorJS.
The objective of this tutorial is to add a new mobile side, test it in an Android Emulator, and compile an APK.
[Work In Progress]
This is cool!
I had been messing with Redwood for a productivity app.
I had used Solito to learn React Native, Next JS.
Redwood I used to learn React, GraphQL.
I had been looking at ways to meet in the middle more for another app I have on web that I want people to have access to on their phones and this might be a nice option!
@disistemas , this is very promising. Thanks for your contribution in advance . Look forward to your tutorial
1. Prerequisites
1.1 Setup tutorial project
Follow this section if want to continue with the tutorial repo provided:
git clone https://github.com/ad798/redwood-tutorial-mobile.git
cd redwood-tutorial-mobile
yarn install
Now let’s setup the connection URI in the .env file, check the dev credentials in the docker-compose.yml file:
DATABASE_URL=postgres://dbuser:P@ssw0dM0b1l3!@192.168.1.103:5432/blog
Notice that you should change the IP address 192.168.1.103 with the one provided by your router. Then let’s create a new session secret with and add it to the .env file:
yarn rw g secret
// Then copy the secret string and paste it in .env file
...
SESSION_SECRET=yourSessionSecretHere
Finally run this commands and you should see a new blog there 
.
yarn rw prisma migrate dev
yarn rw exec seed
yarn rw dev
2. Add mobile side
Let’s create a new dir in the same level as the api and web sides. The next steps are based in the CapacitorJS installation.
mkdir mobile && cd mobile
touch package.json
You can update your package.json to something like this:
{
"name": "redwood-blog",
"version": "0.1.0",
"description": "An Amazing RedwoodJS App with Capacitor",
"keywords": [
"capacitor",
"mobile",
"redwoodjs"
],
"author": "disistemas"
}
Create Android Project
I have created a script that you could use to this part. It compiles the web side and copies the dist folder to our new mobile side. The idea is that we we work on the web, compile it, and just port it to an Android app.
#!/bin/bash
set -e
cd ../web
yarn install
yarn rw build web
cp -r dist ../mobile/
cd ../mobile
npm i @capacitor/core
npm i -D @capacitor/cli
npx cap init --web-dir dist $1 $2
npm i @capacitor/android
npx cap add android
npx cap sync
npx cap open android
Take a look at $1 and $2, you have to pass the script first an app name without spaces (RedwoodBlog), and a valid Java’s package name (com.redwoodjs.blog.tutorial). So, if you put that code in file like mobile.sh you may want to call it like:
chmod +x mobile.sh
./mobile.sh RedwoodBlog com.redwoodjs.blog.tutorial
If everything is OK you should see that Android Studio has been runned and your web side compiled has been copied inside mobile, check dist.
3. Test mobile app
You can test if it worked running your from Android Studio in a preconfigured emulation device. You see the app but we cannot make api calls to the dev server! More on this at the end.
4. Compile APK
In Android Studio go to Build > Build Bundle(s) / APK(s) > Build APK(s). Locate your APK and copy to your phone, install it and there is your app running.
5. Some issues
Till now we have created a mobile app that can be run in emulators or devices, but we are still not able to make API calls. This is due to I have not got to config the project to indicate that the API is running locally or in the NIC interface, and I have not tried to expose it. So any help with this point is appreciated.
You will also notice that the app is not responsive, well maybe it is because it was not created like that 
. This is just an example to compile it for mobile, if your app is responsive good chances are that your mobile app is too.
This is awesome! Would love to see it for iOS as well.
For the API, it’ll be available at {your URL}/api/graphql. You might need to play with CORS settings.
I am glad to inform you that I was able to make API calls in the Android emulator. Will be sharing the config in this post next week(s). Till then, I give a look at the achievement:
The key is to change the apiUrl and config CORS as in the Redwood Docs: Cross-Origin Resource Sharing | RedwoodJS Docs.
You will find all the config in the next branch of the repo previously shared: https://github.com/ad798/redwood-tutorial-mobile/tree/mobile-tutorial
@disistemas This is awesome! Do you know if we can use dbAuth for the mobile apps, both IOS and Android? Thanks!
You can! You just need to configure the cookie properly
Also, if anyone wants a more in-depth guide: Full guide on using CapacitorJS to build a native iOS app
