LogoLogo
Get CIPPJoin Discord
  • ☕CIPP Documentation
  • 🦸Setup
    • Self Hosting Guide
      • Prerequisites
      • Installation
      • Run From Package Mode
      • Post-Install Configuration
      • Configuring Automatic Updates
      • Updating Versions
      • Migrating to Hosted CIPP
      • Self-hosted API Setup
    • Service Account Setup
      • GDAP's Importance in CIPP
      • Creating the CIPP Service Account
      • Conditional Access best practices
      • Recommended Roles
    • Configuring CIPP
      • Adding users to CIPP
      • Executing the SAM Setup Wizard
      • Tenant Onboarding
      • Adding Tenants & Consenting the CIPP-SAM Application
      • User Roles in CIPP
      • Adding a custom domain name
      • I want to manage my own tenant
    • Implementing CIPP
      • Recommended First Steps
      • Standards Setup
    • Resources
      • Professional Onboarding Services
      • Sponsor Quick Start
  • 🙋User Documentation
    • Shared Features
      • Menu Bar
        • Tenant Select
        • Display Mode
        • 🔍Search
        • Bookmarks
        • User Preferences
      • Table Features
      • Speed Dial
      • Keyboard Shortcuts
    • CIPP Dashboard
    • Identity Management
      • Administration
        • Users
          • Bulk Add
          • Invite Guest
          • Add User
          • View Individual User
            • Edit User
            • Exchange Settings
            • Compromise Remediation
            • Conditional Access
        • Risky Users
        • Groups
          • Add Group
          • Edit Group
        • Group Templates
          • Add Group Template
          • Deploy Group Templates
        • Devices
        • Deleted items
        • Roles
        • JIT Admin
          • Add JIT Admin
        • Offboarding Wizard
      • Reports
        • MFA Report
        • Inactive Users
        • Sign Ins Report
        • AAD Connect Report
        • Risk Detections
    • Tenant Administration
      • Administration
        • Tenants
          • Edit Tenant
          • Tenant Groups
            • Add Tenant Group
            • Edit Tenant Group
        • Alert Configuration
          • Add Alert
        • Audit Logs
        • Enterprise Applications
        • Secure Score
        • App Consent Requests
        • Authentication Methods
        • Partner Relationships
      • GDAP Management
        • Relationships
          • Relationship Summary
            • Role Mappings
        • Role Mappings
          • Map GDAP Roles
        • Role Templates
          • Add Template
        • Invites
          • New Invite
        • Onboarding
        • Offboarding
      • Configuration Backup
        • Backups
          • Restore Configuration Backup
          • Add Configuration Backup
      • Standards
        • List Standards Templates
        • Add Standards Template
        • Compare Tenant to Standard
        • Best Practice Analyser
          • Best Practice Templates
          • Custom Reports
        • Domains Analyser
      • Conditional Access
        • CA Policies
          • Deploy CA Policies
        • CA Vacation Mode
          • Add Vacation Schedule
        • CA Templates
        • Named Locations
          • Add Named Locations
      • Reports
        • License Report
        • Sherweb License Report
          • Add Subscription
        • Consented Applications
    • Security & Compliance
      • Incidents & Alerts
        • Incidents
        • Alerts
      • Defender
        • Defender Status
        • Defender Deployment
        • Vulnerabilities
      • Reports
        • Device Compliance
    • Intune
      • Applications
        • Applications
          • Add Application
            • Add MSP App
            • Add Store App
            • Add Choco App
            • Add Office App
        • Application Queue
      • Autopilot
        • Autopilot Devices
        • Add Autopilot Device
        • Profiles
        • Add Profile
        • Status Pages
        • Add Status Page
      • Device Management
        • Devices
        • Configuration Policies
        • Compliance Policies
        • Protection Policies
        • Apply Policy
        • Policy Templates
        • Scripts
      • Reports
        • Analytics Device Score
    • Teams & SharePoint
      • OneDrive
      • SharePoint
        • Add Site
        • Bulk Add Site
      • Teams
        • Teams
          • Add Team
        • Teams Activity
        • Business Voice
    • Email & Exchange
      • Administration
        • Mailboxes
          • Add Shared Mailbox
        • Deleted Mailboxes
        • Mailbox Rules
        • Contacts
          • Add Contact
          • Edit Contact
        • Quarantine
        • Tenant Allow/Block Lists
          • Add Entry
      • Transport
        • Transport rules
          • Deploy Template
        • Transport Templates
        • Connectors
          • Deploy connector Templates
        • Connector Templates
      • Spamfilter
        • Spamfilter
          • Deploy Spamfilter
        • Spamfilter Templates
        • Connection filter
          • Deploy Connection Filter
        • Connection filter templates
      • Tools
        • Mailbox Restore Wizard
        • Mail Test
      • Resource Management
        • Rooms
          • Add Room
          • Edit Room
        • Room Lists
      • Reports
        • Mailbox Statistics
        • Mailbox Client Access Settings
        • Anti-Phishing Filters
        • Malware Filters
        • Safe Link Filters
        • Safe Attachment Filters
        • Shared Mailbox with Enabled Account
        • Global Address List
    • Tools
      • Tenant Tools
        • Graph Explorer
        • Application Approval
        • Tenant Lookup
        • IP Database
        • Individual Domain Check
      • Email Tools
        • Message Trace
        • Mailbox Restores
        • Message Viewer
      • Dark Web Tools
        • Tenant Breach Lookup
        • Breach Lookup
      • Template Library
      • Community Repositories
        • View Repository Templates
      • Scheduler
        • Add Job
    • CIPP
      • Application Settings
        • Permissions
        • Tenants
        • Backend
        • Notifications
        • Partner Webhooks
        • Licenses
        • CIPP Backup
        • Global Variables
      • Logbook
      • SAM Setup Wizard
      • Integrations
        • Integration Sync
        • CIPP-API
        • Sherweb
        • Gradient
        • Halo PSA Ticketing
        • NinjaOne
        • Hudu
        • Password Pusher
        • Have I Been Pwned?
        • Cloudflare
        • GitHub
      • Custom Data
        • Directory Extensions
          • Add Directory Extension
        • Schema Extensions
          • Add Schema Extension
        • Mappings
          • Add Mapping
          • Edit Mapping
      • Advanced
        • Super Admin
          • Tenant Mode
          • Function Offloading
          • Custom Roles
          • SAM App Roles
          • SAM App Permissions
        • Exchange Cmdlets
        • Timers
        • Table Maintenance
  • 📂Troubleshooting
    • Error codes
    • Troubleshooting instructions
      • Refreshing a Specific Tenant's Permissions via CPV API
    • Frequently Asked Questions
      • I got a "Potential Phishing page detected" alert. What do I do with that?
  • 🔐Security
    • CIPP Security and Compliance
      • Security Policy
      • Security reports
    • CIPP Community Vulnerability Disclosure Policy
  • 👩‍💻👩💻 Dev Documentation
    • CIPP Dev Guide
      • Setting Up for Local Development
      • Executing Local Development
      • Project Structure
      • Development Tips
      • CIPP v7 Developer Brief
    • Contributing to the Code
    • Contributing to the Documentation
  • ⚙️API Documentation
    • Setup & Authentication
    • Endpoints
  • 🧰MSP Adoption Toolkit
    • Building a CIPP Business Case
  • ☕Sip & CIPP
    • Conditional Access
    • Autopilot & Intune
  • CIPP New Interface Release Candidate 2 (rc2)
Powered by GitBook
On this page
  • Overview
  • Key Changes
  • Next Steps
  • Transition from Current Development Environment
  • Step 1: Check for Merge Conflicts
  • Step 2: Reinstall Dependencies
  • Step 3: Launch the Environment
  • New Setup for Local Development
  • Prerequisites
  • Tips for Development
  • Known Issues

Was this helpful?

Edit on GitHub
Export as PDF
  1. 👩💻 Dev Documentation
  2. CIPP Dev Guide

CIPP v7 Developer Brief

PreviousDevelopment TipsNextContributing to the Code

Last updated 3 months ago

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.


Overview

CIPPs new v7 front-end introduces significant enhancements in design, performance, and usability.

  1. Modernized Framework: Built with and React for a cleaner, more consistent design.

  2. Performance Improvements: Faster load times locally and online.

  3. Updated Development Workflow: Minor changes to setup and dependencies.


Key Changes

1. Framework and Tooling

  • 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.

2. Package Manager

  • 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.

3. Routing

  • Old: Used react-router-dom for client-side routing.

  • New: Uses Next.js file-based routing, simplifying the creation of pages.


Next Steps

  1. Set Up Your Environment:

    • Follow the instructions in the section below.

  2. Explore the Interface:

    • Note differences from the previous setup.

  3. Engage in Discussions:

    • Join us in the #cipp-dev channel to share observations or ask questions.


Transition from Current Development Environment

Step 1: Check for Merge Conflicts

Step 2: Reinstall Dependencies

For the new interface:

yarn install --network-timeout 500000

Step 3: Launch the Environment

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.

  1. Open the CIPP project in Visual Studio Code.

  2. Go to the Run and Debug tab (Ctrl+Shift+D or the play icon in the sidebar).

  3. Select the task Launch in Windows Terminal from the dropdown menu.

  4. 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.


New Setup for Local Development

Prerequisites

Install the following tools:

  • VSCode:

    winget install --exact vscode
  • VSCode Extensions: ESLint, Prettier, Stylelint, Azure Functions, npm Intellisense.

  • Node.js v18.x LTS:

    winget install --exact OpenJS.NodeJS.LTS --version 18.20.4
  • Yarn:

    npm install -g yarn
  • Azure Static Web Apps CLI:

    npm install --global @azure/static-web-apps-cli
  • Azurite:

    npm install --global azurite
  • Azure Functions Core Tools:

    npm install --global azure-functions-core-tools@4 --unsafe-perms true

Tips for Development

  • 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.

Known Issues

  • 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:

      yarn start
    • Linux: Kitty terminal may work but lacks split window/tab features.

  • Prettier Formatting Errors:

    • Issue: Conflicts with .editorconfig, causing formatting errors.

    • Solution:

      1. Ensure .editorconfig enforces:

        • LF for frontend files.

        • CRLF for backend scripts.

      2. Set Prettier as default in VSCode:

        "editor.defaultFormatter": "esbenp.prettier-vscode"
      3. Add .prettierrc.json file if missing.

  • Dependency Install Times:

    • To avoid timeouts, use:

      yarn install --network-timeout 500000

Tips for Linux and MacOS Users

  • Launching the Environment:

    • Start frontend and API manually if unavailable:

      yarn start
    • 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.

👩‍💻
Material UI
resolving merge conflicts