Skip to main content

Frontend

The source code for Casdoor's frontend is inside the /web folder: https://github.com/casdoor/casdoor/tree/master/web

It is a Create-React-App (CRA) project, which has a classic CRA folder structure as follows:

File/DirectoryDescription
publicthe HTML root file for React
srcsource code
craco.config.jsthe Craco config file, can change the theme color (blue by default) here
crowdin.ymlCrowdin i18n config file
package.jsonNPM/Yarn dependency file
yarn.lockYarn lock file

Inside /src, there are several important files or folders as follows:

File/DirectoryDescription
accountthe "My profile" page for logged-in user
authall code related to authentication, like OAuth, SAML, sign up page, sign in page, forget password page, etc.
backendthe SDK for calling Go backend API, contains all the fetch() calls
basicthe homepage (dashboard page) for Casdoor, it contains several card widgets
commonshared UI widgets
localesi18n translation files in JSON, synced with our Crowdin project: https://crowdin.com/project/casdoor-site
App.jsthe entrance JS file, containing all routes
Setting.jsthe utility functions used by other code
OrganizationListPage.jsthe page for the organization list, similar for all other XXXListPage.js
OrganizationEditPage.jsthe page for editing one organization, similar for all other XXXEditPage.js