-
Steve Reis authorede6f831a9
description: Developer guide to setup a development environment
Setup development environment
This guide is used to setup a full development environment for the MIP Front dev.
Introduction
As we have seen in the previous chapter we need three component in order to setup the MIP:
- Engine
- Frontend
- Gateway
- DB (postgres)
In this guide we will see how to setup the last two elements.
Prerequisites
Make sure to have
installed in your computer.
Setup Gateway
First of all you should clone the repository either from the Gitlab or from the GitHub.
Once the pull is completed, you can make the following commands
cd gateway/api
git checkout develop
npm install
Run the DB
The gateway need a DB in order to work. TypeORM is used to make the DB calls agnostic from the real implementation.
We provide a docker-compose to run a postgres
DB, you can use it by running the following command
docker-compose up -d
For debugging purpose, you can omit the -d (detached) parameter.
Run the Gateway
After the other steps have been completed, you should be able to start the gateway in dev mode with the following command
npm run start:dev
GraphQL Playground
Once you have started the Gateway, you can play with the GraphQL playground that is automatically integrated within the gateway, follow this link : http://127.0.0.1:8081/graphql. You should be able to see something like this :
This environment is a tool provided by GraphQL to play with queries, mutations, etc...
It allows you to see schema defined in the backend and endpoints that you can calls.
Setup Frontend
First of all you should clone the repository 'portal-frontend' either from the Gitlab or the GitHub.
Once the pull is completed, you can make the following commands
cd portal-frontend
git checkout dev
yarn install
Environment file
Make sure that the .env or .env.development contains the following information
REACT_APP_BACKEND_URL=http://127.0.0.1:8081
REACT_APP_GATEWAY_URL=$REACT_APP_BACKEND_URL/graphql
- REACT_APP_BACKEND_URL
- Is used to consume REST API call (migration to GraphQL is in progress)
- REACT_APP_GATEWAY_URL
- Is used to connect with GraphQL Gateway
Start frontend
Depending the branch you are working on, you can start the Frontend with
yarn start
or
yarn watch
Launch order
Each service could be launch at any time without respecting any specific order, however as the Frontend (react app) open automatically a browser tab for the local development, it is recommended to follow this launch order
Engine -> Gateway -> Frontend
If you are using local
type in the Gateway you don't need to start the engine.