开源软件名称：

开源软件地址：

开源编程语言：

开源软件介绍：

serlo.org – Frontend

Next.js app that serves serlo.org.

Overview

The frontend fetches data from the API server and renders it to a web page. A standalone deployment of the frontend is enough to view most parts of Serlo.

In a more complete environment, the frontend sits behind a cloudflare worker that handles routing and redirections. Many editing features are still handled by our legacy server.

Deployment of the staging environment: https://frontend-git-staging-serlo.vercel.app

Getting started

Local installation

You can run the frontend on your local system. For that, install Node.js > v12.22.0 and yarn > v3.

Then, run following commands:

git clone https://github.com/serlo/frontend.git
cd frontend
yarn
yarn dev

The server is now running on localhost:3000.

next.js framework

The frontend is built with next.js and uses many features of it. A good way to get started in this repo is to make yourself familiar with next.js. This will make it quite clear how the system is working. Features we use include (and are not limited to):

• Server-Side Rendering
• Router
• Internationalization
• Incremental Page Generation
• TypeScript

Repository

Here are some useful places:

• /src/pages: File-system routing root directory. Add new routes by creating files in this folder.

• /src/components: Collection of react components for the frontend.

• /src/fetcher: Requesting data from the GraphQL backend and process it.

• /src/schema: Definition of the frontend content format, with renderer, and converter for edtr-io and legacy.

• /src/data: Translations, entries for navigation

• /public/_: A place for public assets, served as static files under the path /_assets/. Don't use import from here, but use the path as src instead.

• /external: Third-party code that is not maintained by the frontend.

Some useful commands:

yarn dev

Starts the development server. This enables hot reloading and development warnings.

yarn format

Runs eslint and prettier, fixes issues automatically if possible.

yarn lint

Runs tsc, eslint and prettier (without automatic fixes). This command needs to pass before merging into staging.

yarn analyze

Creates a build of the frontend, shows summary of build artefacts and creates in-depth analysis of the bundles.

yarn test

Runs jest tests.

yarn codegen

Generates exact types for some GraphQL queries and mutations. Add yours in codegen.yml.

All files are named with kebab-case. You should use @/ to import files from src/ instead of relative paths.

More information

You can find more detailed explanations in our wiki. Currently, we have these pages available:

• Internationalization
• Entities and Schema
• Tailwind Getting Started Guide
• VS Code Setup
• Unsorted old stuff