Test roman

Fabric App

Pre-setup

Important: To ensure the npm commands run from the correct location, navigate to the web folder. This is where the project files, including the package.json file, are located.

To install some necessary npm dependencies, you'll need to connect to AWS CodeArtifact. Follow these steps:

1. Install the AWS CLI from https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html.

2. After installation, run the command aws configure to set your credentials.

$ aws configure AWS Access Key ID [None]: <YOUR ACCESS KEY ID> <ENTER> AWS Secret Access Key [None]: <YOUR SECRET ACCESS KEY> <ENTER> Default region name [None]: eu-west-1 <ENTER> Default output format [None]: <ENTER>

Alternatively, add the following lines to your web/.env file:

AWS_CONFIGURE_ACCESS_KEY_ID=<YOUR ACCESS KEY ID> AWS_CONFIGURE_SECRET_ACCESS_KEY=<YOUR SECRET ACCESS KEY> AWS_CONFIGURE_REGION=eu-west-1

Load the variables with source ./web/.env and then set the credentials with sh ./web/scripts/aws-configure.sh.

3. Once you've configured your AWS credentials, run npm install to install all dependencies. If npm install fails, run npm run preinstall to run the preinstall script manually.

Setting up

Install the dependencies:

npm install

After installing the dependencies, set up the .env variables by creating a new .env file in the web folder and filling in the missing values. You can use the .env.example file as a reference.

Using Vercel CLI for Environment Variables

The Vercel CLI allows you to set environment variables for your project in a more manageable way, and more. Follow these steps to install it:

1. Install the CLI by following the instructions at https://vercel.com/docs/cli.

2. After installation, run the command vercel login in the terminal to authenticate the Vercel CLI. (make sure to run them with the terminal in the /web folder)

3. Run vercel link and Setup the project with the Vercel CLI. (scope: Fabric-Vercel and project: fabric)

4. Run vercel env pull to overwrite the .env file with the new values. Note that this will not pull AWS_CONFIGURE_X variables, so if you inserted them before, add them again if needed.

Environment Variables Reference

| Name | Possible Values | Description | | ---------------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------ | | REACT_APP_ENV | develop, staging, production | Specifies the environment for the frontend. | | REACT_APP_LOCAL_SIMBA | (any string value) | Used if you open a local browser session as /b/debug-xxx. | | REACT_APP_TIMON_ANALYTICS_URL | (URL) | URL for statistics on the /admin panel. | | REACT_APP_PUMBAA_URL | (URL) | URL for the sessions backend API (temporarily not used). | | REACT_APP_WOODY_API_URL | (URL) | URL for the fabric / notes backend API. | | E2E_BASE_URL | (URL) | URL for reaching the NextJS client in E2E tests (defaults to localhost:3000 if undefined). | | E2E_USER_EMAIL | (email address) | User email for E2E tests. | | E2E_USER_PASSWORD | (password) | User password for E2E tests. | | E2E_GOOGLE_EMAIL | (email address) | Google user email for E2E tests. | | E2E_GOOGLE_PASSWORD | (password) | Google user password for E2E tests. | | AWS_CONFIGURE_ACCESS_KEY_ID | (AWS access key ID) | AWS access key ID for CodeArtifact package installation via CLI. | | AWS_CONFIGURE_SECRET_ACCESS_KEY | (AWS secret access key) | AWS secret access key for CodeArtifact package installation via CLI. | | AWS_CONFIGURE_REGION | (AWS region) | AWS region for CodeArtifact package installation via CLI. | | NEXT_PUBLIC_EXTENSION_ID | (extension ID) | Extension ID for the Chrome extension; used for local testing or production. | | NEXT_PUBLIC_WEBSITE_URL | (URL) | NextJS Website URL, used locally for generating correct links. | | NEXT_PUBLIC_STRIPE_BASIC_MONTHLY_PLAN_ID | (Stripe plan ID) | Stripe ID for the Basic Monthly Plan. | | NEXT_PUBLIC_STRIPE_BASIC_YEARLY_PLAN_ID | (Stripe plan ID) | Stripe ID for the Basic Yearly Plan. | | NEXT_PUBLIC_STRIPE_PRO_MONTHLY_PLAN_ID | (Stripe plan ID) | Stripe ID for the Pro Monthly Plan. | | NEXT_PUBLIC_STRIPE_PRO_YEARLY_PLAN_ID | (Stripe plan ID) | Stripe ID for the Pro Yearly Plan. | | NEXT_PUBLIC_STRIPE_MAX_MONTHLY_PLAN_ID | (Stripe plan ID) | Stripe ID for the Max Monthly Plan. | | NEXT_PUBLIC_STRIPE_MAX_YEARLY_PLAN_ID | (Stripe plan ID) | Stripe ID for the Max Yearly Plan. | | NEXT_PUBLIC_STRIPE_LIFETIME_BELIEVER_PLAN_ID | (Stripe plan ID) | Stripe ID for the Lifetime Believer Plan. | | NEXT_PUBLIC_RECAPTCHA_SITE_KEY | (Recaptcha site key) | Recaptcha key used for authentication. | | NEXT_PUBLIC_TYPESENSE_CONNECTION_STRING | (Full URI connect with protocol, host and port) | Not needed as was replaced by elastic search. Setup on Vercel for previews. | | NEXT_PUBLIC_TYPESENSE_PROTOCOL | (URI Protocol, e.g. https) | Not needed as was replaced by elastic search. Setup on Vercel for previews. | | NEXT_PUBLIC_TYPESENSE_PORT | (Port, e.g. 443) | Not needed as was replaced by elastic search. Setup on Vercel for previews. | | NEXT_PUBLIC_TYPESENSE_HOST | (Host) | Not needed as was replaced by elastic search. Setup on Vercel for previews. |

Running Fabric App

npm run dev

Open http://localhost:3000 to view it in the browser.

Deploying

The app is deployed to Vercel when new branches are created. The main branch is deployed to a special staging preview for testing before production deployment. Develop branch is deployed to a develop preview for specific testing, while the production branch is deployed directly to the production environment.

Pushing to Develop

To push a new version of the app to develop, follow these steps:

# if your local main branch is not fully synced make sure to first run: git checkout main git pull # then continue with pushing to develop git checkout develop git reset --hard main git push -f

Make sure to communicate with the team before pushing to develop, as this will affect the develop preview and other team members might be testing on it. This will bring the entire main branch history to the develop branch, and then push it to the remote production branch. (so it will be the same as staging)

Pushing to Production

To push to production we use Vercel "Promote to Production" feature, which allows us to deploy any active deployment to production. Just go to the project > Deployments > Click the '...' button on the deployment you want to promote > Promote to Production and confirm. Make sure to confirm with the team before promoting to production, since sometimes it has to be a coordinated effort as backend changes might be needed as well.

Mobile App

We use Capacitor to build the mobile app for iOS and Android.

Setup

iOS

To build the iOS app, you will need macOS, you can't build iOS apps on Windows or Linux. There are 4 dependencies you need to install:

• Xcode You can install Xcode by using the Apple App Store on your Mac.

• Xcode Command Line Tools Once Xcode has been installed, you can install the Xcode Command Line Tools by running the following command in your terminal:

  xcode-select --install

• Homebrew Follow instructions on: https://brew.sh/

• Cocoapods Once Homebrew has been installed, you can install Cocoapods by running the following command in your terminal:

  brew install cocoapods

After setting it all up, make sure to run npm install in the /web folder and in the /mobile/readfile folder. (run npm run preinstall in case it fails)

Android

To build the Android app it is simpler, you just need to install Android Studio and possibly the Android SDK. Download and install Android Studio from: https://developer.android.com/studio

In case it doesn't install the SDK you can do so by opening Android Studio, then open Tools -> SDK Manager from the menu and install the platform versions you'd like to test with in the SDK Platforms. But you can come back to this at a later step if it fails to build.

Running the app locally

To run the app locally we need to make sure to use the proper server URL depending on the platform we are running on, for that you can use the setup Makefile mobile-sync command, which goes step by step on setting up the correct environment for testing/build.

make mobile-sync

On Android you will need to enable proxying to localhost, you can do so directly from a chrome-based browser by going to chrome://inspect and then clicking on Port forwarding and adding a new entry with the following values:

Port: 3000 IP address and port: localhost:3000

Enable the 'Enable port forwarding' checkbox and click on 'Done'.

You might need to manually inspect the app in the remote target list and reload it once the app is running to make sure the proxy applies.

Emulating the app

To emulate the app in iOS you can either use XCode or run the following command:

make mobile-run ios

To emulate the app in Android you can either use Android Studio or run the following command:

make mobile-run android

Building the app

iOS

To build the iOS app for production you need to make sure you sync with the production configuration by running:

make mobile-sync

And selecting the production option.

After that you will click on the Fabric target and then Generic iOS Device in the top bar, then go to Product -> Archive and follow the steps to archive the app and upload it to the App Store Connect. To include Sentry Debug Symbols context make sure to add your auth token to your ~/.profile (MacOS):

export SENTRY_AUTH_TOKEN=<token>

Get your token from: https://docs.sentry.io/platforms/apple/sourcecontext/

Android

To build the Android app for production you need to make sure you sync with the production configuration by running:

make mobile-sync

And selecting the production option.

After that you will click on the fabric target and then fabric in the top bar, then go to Build -> Generate Signed Bundle / APK and follow the steps to generate the APK and upload it to the Google Play Console, you might need to setup the signing keys first which will be provided by the team.

Deploying to staging

Currently there is only an iOS staging app, you can deploy it by running

make mobile-sync

Selecting the staging option. After that open the XCode project, select the Fabric Staging target and go to Product -> Archive similar to production.

With android you can always create an APK pointed to the desired env for testing.

Utilities

Find unused files and dependencies

Using knip under the hood More: https://knip.dev/explanations/comparison-and-migration#unimported

npm run list-unused

This checks for unused imports and lists dependecies which are unused, unlisted dependencies and unimported files. Before deleting, make sure that the files are actually not used as this tool only checks for direct imports. Some files might be loaded dynamically, via naming etc.