/groupe-12

Primary LanguageTypeScript

Groupe-12

This is the repository of ARLA teachers.

You need to git clone this repository for the Course5 (about API and front-end).

You need to change:

  • variables.env: replace all groupe-12 and groupe12 by your group number (e.g. groupe4, groupe-4).
  • react-app/src/api/common.js: replace the groupe12 in API_ENDPOINT string by your group number (e.g. groupe4)

About the repo structure:

.
├── api                 # Code for the REST API
├── docker-compose.yml  # Containers deployed on production
├── .github             # Contains GithubActions CD config
├── js-app              # Code using plain JavaScript
├── react-app           # Modern TypeScript & ReactJS based app
└── variables.env       # Variables that need adapataion per groups

Requirements for local development

  • Install docker
  • (optionnal) Install nvm (install: work on UNIX)
  • Install node v10.6 (for nvm users, just nvm install v10.16)
  • Your favourite IDE

Note: I advise visual-studio-code for web development using NodeJS

Hike REST API

The REST API code is inside api/ folder, with the following structure:

.
├── Dockerfile          # Defines the docker image
├── .dockerignore       # File that are ignored when using `COPY`
├── package.json        # Configuration of our NodeJS project
├── package-lock.json   # Dependency graph (read only, generated by `npm install`)
├── src                 # Sources of our REST API in TypeScript (*.ts)
└── tsconfig.json       # TypeScript compiler options

Apply changes on local environment

To start the react code on your local machine, just run:

# from api/ folder
npm start

Your API should listen on localhost:3000

Try out a new production version locally

Just build and run the docker image of the API:

# from the root of the repository
docker build -t parla-api:v1 api/
# ...
docker run --rm -p 3100:3000 parla-app:v1

This launch the API to listen on localhost:3100

Add new Hikes

You need to post some data everytime you restart your backend (we do not have any databases yet).

You can use curl to do so.

Replace groupe12 by your group number (e.g. groupe4), and run:

 curl -XPOST \
      -H 'Content-Type: application/json' \
      -d '{"name":"Decouverte du Kremlin-Bicêtre"}' \
      https://parla-api.groupe12.arla-sigl.fr/v1/hike

A confirmation that the hike is saved should be return (JSON)

Recover all hikes

ReactJS application

The react js application is inside the react-app folder, with the following structure:

.
├── css                 # CSS stylesheets of our app
├── Dockerfile          # Defines the docker image
├── .dockerignore       # File that are ignored when using `COPY`
├── index.html          # Applicaiton entry point
├── package.json        # Configuration of our NodeJS project
├── package-lock.json   # Dependency graph (read only, generated by `npm install`)
├── src                 # Sources in TeactJS and Typescript (*.ts, *.tsx)
├── tsconfig.json       # TypeScript compiler options
└── webpack.config.js   # Webpack configuration, for both dev and prod

Apply changes on local environment

To start the react code on your local machine, just run:

# from react-app/ folder
npm start

Once compiled finished, you should be able to reach your page on localhost:8800

Try out a new production version locally

Use docker, image should be correctly configure if you do not add new folders.

Otherwise you need to make sure you copy them in the Dockerfile

# from the root of the repository
docker build -t parla-app:v1 react-app/
# ...
docker run --rm -p 8900:80 parla-app:v1

Note: Your container won't output any log on stdout

About deployment

You should use exactly the same .github/workflow/main.yml Github Actions workflow.

All group specificities are detailed in variables.env.

Note: SSH key has been added in your github repository under the secret key SSH_KEY This key is use to authenticate on production machines from Github Actions

The docker-compose.yml is sent and runned (docker-compose up -d) during deployement process.

Connect to your production machine

You need to have both ssh key pair on your file system:

  • arla_rsa
  • arla_rsa.pub

From a terminal:

$ ssh -i /path/to/arla_rsa sigl@<groupeXX>.arla-sigl.fr
# You might need sudo if this first line fails
$ sudo ssh -i /path/to/arla_rsa sigl@<groupeXX>.arla-sigl.fr

Ask teachers to get the key pair.