1.1 Setup tutorial project
- Add mobile side
- Test mobile app
- Compile APK
- Some issues
- A Redwood Project: I prepared this repo, based on Redwood’s Official Tutorial, with Postgres and Docker Compose so you can get started quickly.
- Environment Setup for mobile side: You can follow official CapacitorJS docs. In summary, install Android Studio and Android SDK.
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
Now let’s setup the connection URI in the
.env file, check the dev credentials in the
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
yarn rw g secret
// Then copy the secret string and paste it in .env file
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
web sides. The next steps are based in the CapacitorJS installation.
- Create a new Capacitor App:
mkdir mobile && cd mobile
You can update your package.json to something like this:
"description": "An Amazing RedwoodJS App with Capacitor",
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.
yarn rw build web
cp -r dist ../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
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.