Learn how code is structured in a Crowdbotics Project.
When you build an app on crowdbotics with one of our scaffolds, a project will be generated for you. Understanding how this project is organized is critical for your success developing on Crowdbotics. Let's take a look at how the project is structured. In this article, we'll be using the Mobile App Scaffold, though if you are using the Web App Scaffold, you can follow along in the backend section.
Part 1: Top Level Directory & React Native
To begin, let's take a look at our top-level directory. If you haven't already, clone the Github repo locally so you can follow along. You can see instructions for how to do that here. Once you've cloned your repo, navigate there in your terminal or favorite text editor. Here's an example of what you should see:
├── App.js
├── Gemfile
├── Gemfile.lock
├── README.md
├── __tests__
│ └── App-test.js
├── android
│ ├── app
│ ├── build.gradle
│ ├── fastlane
│ ├── gradle
│ ├── gradle.properties
│ ├── gradlew
│ ├── gradlew.bat
│ └── settings.gradle
├── app.json
├── babel.config.js
├── backend
│ ├── Dockerfile
│ ├── Pipfile
│ ├── Pipfile.lock
│ ├── README.md
│ ├── dev_training_exampl_28150
│ ├── docker-compose.override.yml
│ ├── docker-compose.yml
│ ├── heroku.yml
│ ├── home
│ ├── manage.py
│ ├── modules
│ ├── static
│ ├── users
│ └── web_build
├── config-overrides.js
├── heroku.yml
├── index.js
├── ios
│ ├── Podfile
│ ├── dev_training_exampl_28150
│ ├── dev_training_exampl_28150.xcodeproj
│ ├── dev_training_exampl_28150Tests
│ └── fastlane
├── metro.config.js
├── modules
│ ├── index.js
│ ├── login
│ ├── package.json
│ ├── splash
│ └── utils.js
├── package.json
├── public
│ └── index.html
├── screens
│ ├── index.js
│ └── package.json
├── store
│ ├── README.md
│ ├── custom
│ ├── index.js
│ └── package.json
└── yarn.lock
Notice here how much javascript there is at the top-level of our project. We have App.js, app.json (admittedly, not technically javascript though close), and index.js. Also, if we look in the modules folder (which is on the top level of our directory structure), there is even more javascript! This observation leads us to our first observation about the way the project is structured: the top level directory is a React Native App. This is important to keep in mind, so that you always know where you need to be looking in your code to solve various issues as they arise.
Also note the store and screens folders. The store folder is where anything related to the store management in your app will live (although some features, like modules, will have their own store folders nested within their feature directories).The screens folder is where any imported screens will be saved as javascript files ready for your use.
Also stored at the top-level are the iOS and Android folders. These folders contain any specific code that your mobile apps may need.
Part 2: Backend
While the top level directory of your app is a React Native application, there is also a backend folder that sits at the root of your app. As you may have guessed, this folder stores all of your app's backend code. The backend folder is, in essence, a complete Django project, complete with a Dockerfile for local setup. Let's take a closer look at our backend folder and learn more about how our backend is structured:
.
├── Dockerfile
├── Pipfile
├── Pipfile.lock
├── README.md
├── dev_training_exampl_28150
│ ├── __init__.py
│ ├── __pycache__
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── docker-compose.override.yml
├── docker-compose.yml
├── heroku.yml
├── home
│ ├── __init__.py
│ ├── __pycache__
│ ├── admin.py
│ ├── api
│ ├── apps.py
│ ├── management
│ ├── migrations
│ ├── models.py
│ ├── storage_backends.py
│ ├── templates
│ ├── templatetags
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── manage.py
├── modules
│ ├── __init__.py
│ ├── __pycache__
│ ├── admin.py
│ ├── apps.py
│ ├── migrations
│ └── urls.py
├── postgres-data
│ └── postgres
├── static
│ ├── css
│ └── img
├── users
│ ├── __init__.py
│ ├── __pycache__
│ ├── adapters.py
│ ├── admin.py
│ ├── apps.py
│ ├── forms.py
│ ├── migrations
│ ├── models.py
│ ├── tests
│ ├── urls.py
│ └── views.py
└── web_build
├── index.html
└── static
If you're experienced with Django, a lot of this should look familiar. We have a few files at the root of our backend directory like manage.py, Dockerfile, Pipfile, and Pipfile.lock. Manage.py is the entry-point for a lot of managing django, and you may use it to execute various commands like running migrations and creating a superuser. It's also what's used to run the development server. The Dockerfile contains instructions for bringing up a docker container to run your app locally, while the Pipfile and Pipfile.lock manage dependencies for your app.
The name of your project will form your app's main folder, in our case `dev_training_exampl_28150.` Inside here you'll find your settings.py file.
Note the modules folder inside the backend folder. This folder is where your backend modules will be installed, while any frontend modules will be installed to the modules folder at the top-level (React Native) part of your app.