Contents x
    Local module development environment
    • 01 Apr 2024
    • 4 Minutes to read
    • Print
    • Dark
      Light
    • PDF
    Contents

    Local module development environment

    • Updated on 01 Apr 2024
    • 4 Minutes to read
    • Print
    • Dark
      Light
    • PDF
    Article summary

    After you Set up your environment and Initialize your project, you must set up your local development environment for React Native and Django modules.

    Setup for React Native (frontend) modules

    This section outlines instructions on setting up a local development environment for the frontend of your application.

    Installation

    1. Install Yarn. After cloning the repo, install the dependencies locally: yarn install

    2. Start your Metro server: npx react-native start

    3. Install Android: npx react-native run-android

    4. Install iOS:
      pod install --repo-update --project-directory=ios
      npx react-native run-ios

    5. Setup react-native-vector-icons by following the instructions in their README.md file.

    Running with Fastlane

    Fastlane streamlines the testing, building, and deploying Android and iOS apps. Android and iOS dependencies are the same as React Native CLI. All Fastlane commands are run from the platform directory. For example, Android commands must be run from android/.

    Install Fastlane globally using either: npm i -g fastlane or yarn i -g fastlane

    The commands for Android and iOS are the same. Fastlane should be executed using bundle exec to ensure dependencies are managed correctly.

    • Run tests: bundle exec fastlane tests

    • Local build: bundle exec fastlane build

    • Build and upload a beta (requires signing): bundle exec fastlane beta

    • Build or promote a release: bundle exec fastlane deploy

    Android

    Publish an Android app you must first create an app in the Play Console and manually upload an APK.

    After the first upload, run bundle exec fastlane supply init from android/ to sync with the Play store. All future releases are uploaded automatically.

    Android uses tracks. A beta release builds the app and uploads to the beta track. Deploying promotes from beta to production.

    iOS

    • Crowdbotics developers must follow the fastlane code signing guide for using the Match tool, which automatically signs iOS builds.

    • New Crowdbotics developers should get access to the code signing repo and run the following in  ios/:
      bundle exec fastlane match development

    • Not a CB developer? Create an Apple developer account and follow the fastlane code signing guide to setup your certificates.

    React Native Web

    You can build and deploy your React Native app in the web too!

    1. To get started run: yarn run web

      This starts a local development server so that you can iterate and preview your changes. You can access this server at localhost:8080

    2. To build the web version of the project run: yarn run web:build

    3. Commit/push the output created at backend/web_build to the git repository.

    Setup for Django (backend) modules

    Following these steps to set up your development environment. We recommend running the project locally and using Docker for development. It's possible to also run the project without Docker, using the Local Setup instructions below.

    Docker Setup (Recommended)

    This project is set up to run using Docker Compose by default. It is the recommended way. You can also use existing Docker Compose files as basis for custom deployment, e.g. Docker Swarm, Kubernetes, etc.

    1. Install Docker:

    2. Clone this repo and cd <project_name>

      The project name must be unique.

    3. Make sure Pipfile.lock exists. If it doesn't, generate it with:
      docker run -it --rm -v "$PWD":/django -w /django python:3.7 pip3 install --no-cache-dir -q pipenv && pipenv lock

    4. Use .env.example to create .env:
      cp .env.example .env

    5. Update .env and docker-compose.override.yml replacing all <placeholders>, including the <postgres_pwd>.

    6. Create a secret key and use it in your .env file as SECRET=<new generated secret>.
      Generate the random: python -c 'from secrets import token_urlsafe; print("SECRET_KEY=" + token_urlsafe(50))'

    7. Start up the containers: docker compose -p <project-name> up
      This builds the necessary containers and start them, including the web server on the host and port you specified in .env.
      Current (project) directory is mapped with the container meaning any edits you make are picked up by the container.

    8. Seed the Postgres DB (in a separate terminal):
      docker-compose exec web python3 manage.py makemigrations
      docker-compose exec web python3 manage.py migrate

    9. Create a superuser if required: docker-compose exec web python3 manage.py createsuperuser
      Your activation link is in the server log output.

    Local Setup (Alternative to Docker)

    1. Postgresql, or SQLite as an alternative

    2. Python

    Installation

    1. Install pipenv

    2. Clone this repo and cd <project_name>

      The project name must be unique.

    3. Get the latest pipenv version: pip install --user --upgrade pipenv

    4. Run pipenv --python 3.8

    5. Run pipenv install

    6. Run cp .env.example .env

    7. Create a secret and use it in your .env file as SECRET=<new generated secret>

      Generate the random: python -c 'from secrets import token_urlsafe; print("SECRET_KEY=" + token_urlsafe(50))'

    8. Update the DATABASE_URL in the .env file:

      1. If you use postgresql, update DATABASE_URL with your:

        • database_name

        • database_user

        • database_password

      2. If you want to use sqlite for local development, set the DATABASE_URL to: sqlite:////tmp/my-tmp-sqlite.db

    Getting Started

    1. Run pipenv shell

    2. Run python manage.py makemigrations

    3. Run python manage.py migrate

    4. Start your postgres and redis using docker services: docker compose -p <project-name> up postgres redis
      You can now use their exposed ports in your .env file.

    5. Run: python manage.py runserver

    6. Create a superuser, if required: python manage.py createsuperuser
      You will find an activation link in the server log output.

    Usage

    Admin Panel

    Admin Panel can be accessed at:  http://localhost:8000/admin/

    • If you are the Project Owner, admin credentials can be generated from App> Settings page on the Crowdbotics App Dashboard.

    • If not, ask your Project Manager or Project Owner to generate admin credentials and share them with you.

    API Documentation

    API Documentation is generated automatically and can be access at:
    http://localhost:8000/api-docs/
    Be sure you are signed in to the admin panel before navigating to this page.

    Security Configuration

    The Django Backend is pre-configured to enabled certain security configurations through the use of environment variables. This can be done from App> Settings page on the Crowdbotics App Dashboard.

    https://docs.djangoproject.com/en/3.2/ref/settings/#secure-ssl-redirect

    SECURE_REDIRECT = True

    Was this article helpful?
    What's Next
    Follow Us

    © Copyright Crowdbotics, Inc. All Rights Reserved.