Here you'll find the base of monday.com front-end apps that we'll create at Worktables.
First you'll need to clone this repository to your machine (if don't have it already). To do so, run this command:
git clone https://github.com/worktables/front-end-template
After cloning the project, open it in your IDE and then install all the dependencies running:
yarn install
Some packages may be outdated, so you can update them by with the following command:
yarn upgrade
To run the project use the command below:
yarn dev
The lib folder contains all the third-party packages configurations (e.g. monday, zustand, etc.).
The store folder is where all the Zustand stores are created and configured. By default, a context store is present in the project, you can find it by accessing .src/store/context.ts.
The styles folder should contain all the styling files. A file named global.css is present in the project by default. In this file you can define the global styles for the app.
This template uses TailwindCSS as the styling library. All the pages and components should use the library.
This template extends some of the monday's component library colors, but if you need to add more colors, you can do that by adding it in the tailwind.config.js file, present in the root directory of the project.
To successfully build your front-end project, you'll need to follow the guide below.
The build workflow was created to automate the build process, so you don't need to worry about the old Vite configuration file.
You just need to run the build command, by running the yarn build command in your terminal.
Note
On windows the zip process requires the 7z command to be installed on your machine. The script will automatically install it if it's not present. But you may need to add to your system environment variables.
The script will create a zip file with the dist folder, this zip file will be named dist-current.zip.
If you want to keep track of the previous builds, the script will rename the current zip file to dist-old-<timestamp>.zip.
After building step is completed, you'll need to upload the zip file to monday.com.
Note
Some files name may conflict with the monday.com's compilation process, so you may need to rename them. For example, the worktables_logo_blue@0.5x.png file should be renamed to worktables_logo_blue05.png.