This documentation is mainly for
Frontend
andReactJs
developer to set up the development environment. If you are looking fortesters
orbackend
development, reading this docs is not neccessary.
Prerequisites
The MetaFox Frontend is developed with ReactJS. Thus, in this documentation, we assume that you are already familiar with Frontend Development with ReactJS. If you are still not confident with Frontend Development with ReactJS, you may want to take a look at the following docs before continuing:
System Requirements for Development Environment
Software
- Node 16+
- If you are using Linux/MacOS, You should install node via Node Version Manager.
- PHP 7.x or later
- Database: MySQL, Postgres
- OS: Linux is recommended
Hardware:
- RAM at least 4GB
Helpful Commands
# Check current default node versionnode --version# Check nvm is installednvm --version## install missing nvmcurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash# Install specify node versionnvm install 16.14.0# Set 12.18.0 as default node excutable.nvm alias default 16.14.0
Environment
Location: app/.env
;--------------------------------------------------------------------; location: /app/.env; Configuration;--------------------------------------------------------------------; run multiple site on the same serverMFOX_SITE_ID=1; A properly formatted must have a leading slash but no ending slash.PUBLIC_URL=MFOX_API_KEY=2MFOX_API_SECRET=738ab5b83c902a7b81860e05811fd5cd65e95f72; A properly formatted must have a leading slash but no ending slash.MFOX_BASE_URL = https://dev-MetaFox.MetaFox.us; A properly formatted must have a leading slash but no ending slash.MFOX_API_URL=https://dev-MetaFox.MetaFox.us/v5-backend/api/v1MFOX_GOOGLE_MAP_API_KEY=AIzaSyBiQutexpRrU8p0wg7-H8CM9kfKeOfk9HE# loading background colorMFOX_LOADING_BG=#2d2d2d
Start Dev Server
# to workbox dircd workbox# install yarnnpm install -g yarn# install dependenciesyarn && yarn bootstrap# start dev serveryarn start# start dev server for admin siteyarn start:admin
By default, the development server will start at http://localhost:3000
after starting successfully
Directory Structure
Workbox contains all libraries, tools and extensions of MetaFox Frontend. We use lerna
to organize many packages into a single repository. Let's look overall to the top level of directory structure.
workbox/app/packages/apps/framework/yourcompany/tests/jest/toolspackage.json
packages/framework/
: This directory contains metafox core libraries.
packages/apps/
: It contains modules, themes, and other extensions.
packages/app
: It contains configuration.
Let's look inside to the app/
directory
app/dist/public/favicon.icoindex.htmllogo192.pnglogo512.pngsrc/index.tsx.envsettings.jsonpackage.json
app/dist/
: It contains bundled code for the production deployment.
app/public/
: It contains static resources to build React app.
app/src/
: It contains source code of the frontend
app.
Site Configurations
Many site configurations are declared in app/settings.json
file
- Packages are listed in
packages
# file /workbox/app/settings.json{"siteUrl": "http://localhost:3000","api": {"baseUrl": "http://localhost:3000/api",},"i18n": {"locale": "en","supports": ["en", "ar", "zh-cn", "fr"]},"packages": ["@metafox/framework","@metafox/ui","@metafox/form","@metafox/html-viewer","@metafox/core","@metafox/user","@metafox/blog","@metafox/feed","@metafox/video","@metafox/event","@metafox/forum","@metafox/quiz","@metafox/saved","@metafox/ad","@metafox/group","@metafox/pages","@metafox/poll","@metafox/photo","@metafox/friend","@metafox/music","@metafox/marketplace","@metafox/forum","@metafox/ad"],}
IDE Tools
Many IDE tools are supporting React Development and you can choose one IDE that you are familiar with. If you haven't got an idea about IDE for developing React, one of the most popular and powerful IDE tools that we would like to recommend to you is VSCode since it has well-support for React Development with many good extensions.