Skip to content

Latest commit

 

History

History
65 lines (45 loc) · 4.37 KB

README.md

File metadata and controls

65 lines (45 loc) · 4.37 KB
Raw

meitrex-frontend

Local dev environment setup for the frontend of the MEITREX project. Should not be used in production environments.

Getting Started

This will contain a description on how get started to work as a frontend developer.

Prerequisites

  • Node.js (v16.14 or higher) We use pnpm as a package manager, but npm and yarn might work as well. We recommend pnpm because otherwise the lockfile will have the wrong format. To use pnpm, you can install it with npm install -g pnpm. The further instructions in this README will be for pnpm usage only.
  • TypeScript (v5.0.4) The project uses Typescript to add typed programming to the frontend. TypeScript is installed with the project, so you don't need to install it yourself.
  • Next.js (v13.4.7 or higher) Next.js is a React framework that we use to build the frontend. It is installed with the project, so you don't need to install it yourself. We implement some of the features and use the structure of v14 of Next.js. Please refer to the Next.js documentation for more information.
  • React (v17.0.2 or higher) React is a JavaScript library for building user interfaces. It is installed with the project, so you don't need to install it yourself. Please refer to the React documentation for more information.

Before you run the project you need to install the dependencies and create the graphql files. You can do this by running the following commands:

pnpm install

This will install all the dependencies for the project. After this you need to create the graphql files. You can do this by running the following command:

pnpm relay

This will create the graphql files for all queries and mutations. The dev command further down should also do the same, but if for some reason it should not update all graphql query or mutation files, you need to run this command. Should the graphql schema change, you need to run the following command:

pnpm update-schema

This will update the graphql schema by running to seperate commands: fetch-graphql-schema http://orange.informatik.uni-stuttgart.de/graphql -o src/schema.graphql -r && sed -i 's/Assessment,/Assessment \\&/' src/schema.graphql. You need to run this command every time the graphql schema changes. Should the command for some reason not work, you can run the two commands seperately or run only the fetch-graphql-schema part of the command. If you run only the first part, you have to go to the schema file and change the "Assessment," to "Assessment &" at every place where it occurs.

After everything was installed, updated and created, you can run the project with the following command:

pnpm dev

This will start the development server on http://localhost:3005. You can now open this link in your browser and see the project running, if you are connected to the university vpn. The page will automatically reload if you make changes to the code. You will see the build errors and lint errors in the console.

How to work with the project

For the frontend we use different technologies. We use React as a JavaScript library for building user interfaces. We use Next.js as a React framework that we use to build the frontend. We use TypeScript to add typed programming to the frontend. We use GraphQL to communicate with the backend. We use Tailwind CSS as a utility-first CSS framework. We use ESLint as a linting utility for JavaScript and TypeScript. We use Prettier as a code formatter. We use Husky as a git hook utility. We use lint-staged as a utility to run scripts on staged files in git. We use pnpm as a package manager.

More information about the technologies can be found on the respective websites:

We recommend you work on this project with an IDE of your choice. The IDE we used was VSC. as it works very well for the project.