How To: Using CapacitorJS for a mobile side with Redwood

Hi all!

Is amazing to finally get started contributing to RedwoodJS :rocket:. 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]

7 Likes

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

Summary
  1. Prerequisites
    1.1 Setup tutorial project
  2. Add mobile side
  3. Test mobile app
  4. Compile APK
  5. Some issues

1. Prerequisites

  • 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
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 :partying_face: .

  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.

  • Create a new Capacitor App:
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.
image

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 :stuck_out_tongue_winking_eye:. This is just an example to compile it for mobile, if your app is responsive good chances are that your mobile app is too.

1 Like

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

2 Likes

@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

1 Like

Also, if anyone wants a more in-depth guide: Full guide on using CapacitorJS to build a native iOS app

1 Like