Front-end

Flexwork front-end uses NextJs framework to develop its UI.

Get the latest sources from GitHub

Access the latest source code for Flexwork’s front-end at https://github.com/theflexwork/flexwork-frontend

Development

Folders organization

• public contains static assets, such as files and images, served by Next.js
• scripts Includes useful scripts for validating environment settings, setting up project environment variables, and more
• src the Flexwork’s frontend source code

Checking environments

Flexwork’s front-end requires Node and pnpm to be installed on your machine. You can run the valid_checks.sh script located in the scripts folder to verify if your machine is set up to work with Flexwork

➜  flexwork-frontend git:(main) scripts/valid_checks.sh 
Running node_check.sh...
Node.js version: 20.14.0
Node.js version is 20.14.0, which is greater than or equal to 18.
node_check.sh succeeded.
Running pnpm_check.sh...
pnpm is installed.
pnpm version: 9.7.0
pnpm_check.sh succeeded.
Your environments settings satisfy Flexwork's conditions

Setup scripts

You will need to run the following scripts:

• scripts/init_git_hooks.sh: Sets up a git hook to automatically format and check code logic each time you commit changes.

• scripts/init_environments.sh: Create a new .env.local file, which is used by the Next.js application to read predefined environment variables

Run in dev mode

Open the terminal and run the command

pnpm dev

it will launch the process to start the Flexwork front-end at the default port 3000

➜  flexwork-frontend git:(main) pnpm dev
 
> frontend@0.1.0 dev ~/flexwork-frontend
> next dev
 
  ▲ Next.js 14.2.13
  - Local:        http://localhost:3000
  - Environments: .env.local
 
 ✓ Starting...
 ✓ Ready in 1805ms

Open the browser, and access to the address http://localhost:3000. Use the default the either following credentials:

• Administrator:
  • Username: admin@theflexwork.io
  • Password: admin
• User:
  • Username: user@theflexwork.io
  • Password: user