CIPP v7 Developer Brief
Last updated
Was this helpful?
Last updated
Was this helpful?
If you already have a working development environment for the previous v6 setup, transitioning to the new interface should be relatively seamless with some adjustments. Let’s dive into what you need to know.
CIPPs new v7 front-end introduces significant enhancements in design, performance, and usability.
Modernized Framework: Built with and React for a cleaner, more consistent design.
Performance Improvements: Faster load times locally and online.
Updated Development Workflow: Minor changes to setup and dependencies.
Old pre-v7 Frontend: Built with Vite and CoreUI.
New v7 Frontend: Migrates to Next.js and Material-UI.
State Management: Introduces React Query for server-side state.
Switch from npm to Yarn for dependency management. Yarn ensures consistent installs and faster builds.
Use yarn install --network-timeout 500000 to avoid timeout errors when downloading dependencies.
Old: Used react-router-dom for client-side routing.
New: Uses Next.js file-based routing, simplifying the creation of pages.
Set Up Your Environment:
Follow the instructions in the section below.
Explore the Interface:
Note differences from the previous setup.
Engage in Discussions:
Join us in the #cipp-dev channel to share observations or ask questions.
For the new interface:
To start the new CIPP frontend and API, use the Launch in Windows Terminal shortcut from the VSCode debug menu. This task runs both the frontend and API in a separate Windows Terminal instance, avoiding the potential performance issues caused by running both within VSCode itself.
Open the CIPP project in Visual Studio Code.
Go to the Run and Debug tab (Ctrl+Shift+D or the play icon in the sidebar).
Select the task Launch in Windows Terminal from the dropdown menu.
Click the green Start Debugging button or press F5.
Tip for Linux Users: If "Launch in Windows Terminal" is unavailable, use your terminal or VSCode's integrated terminal to run the frontend and API.
Install the following tools:
VSCode:
VSCode Extensions: ESLint, Prettier, Stylelint, Azure Functions, npm Intellisense.
Node.js v18.x LTS:
Yarn:
Azure Static Web Apps CLI:
Azurite:
Azure Functions Core Tools:
GitHub Fork Issues:
Use git fetch --all or ensure your fork is updated with Kelvin’s repo.
If you prefer GUI tools, you can use GitHub Desktop to manage branches and fetch remotes. Ensure you fetch all remotes to see the latest branches.
AAD Login Redirect: Disabled for debugging.
"Launch in Windows Terminal" Compatibility:
Issue: Not compatible with Linux or macOS as it relies on Windows Terminal.
Workaround: Use a terminal or VSCode's integrated terminal:
Linux: Kitty terminal may work but lacks split window/tab features.
Prettier Formatting Errors:
Issue: Conflicts with .editorconfig, causing formatting errors.
Solution:
Ensure .editorconfig enforces:
LF for frontend files.
CRLF for backend scripts.
Set Prettier as default in VSCode:
Add .prettierrc.json file if missing.
Dependency Install Times:
To avoid timeouts, use:
Launching the Environment:
Start frontend and API manually if unavailable:
Run API in another terminal instance.
Linux-Specific Tools:
Kitty Terminal can assist but has limitations.
We appreciate your collaboration and look forward to your feedback. Happy testing! 😊
Before proceeding with the installation of dependencies, ensure there are no merge conflicts if you are upgrading from an older version of CIPP on your development fork. For more information on this step, refer to the official GitHub documentation on . Once everything’s merged cleanly, you’re ready for the rest of the setup.