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-in 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
          • View Audit Log
        • Enterprise Applications
        • Secure Score
        • App Consent Requests
        • Authentication Methods
        • Partner Relationships
      • GDAP Management
        • Relationships
          • Relationship Summary
        • Role Mappings
          • Map GDAP Roles
        • Role Templates
          • Add Template
        • Invites
          • New Invite
        • Onboarding
        • Offboarding
      • Configuration Backup
        • Backups
          • Restore Configuration Backup
          • Add Configuration Backup Task
      • 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 Location
      • 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
        • Work from Anywhere
    • Teams & SharePoint
      • OneDrive
      • SharePoint
        • Add Site
        • Bulk Add Sites
      • 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 Transport Rule Template
        • Transport Templates
        • Connectors
          • Deploy Connector Templates
        • Connector Templates
      • Spamfilter
        • Spamfilter
          • Deploy Spamfilter
        • Spamfilter Templates
        • Connection filter
          • Deploy Connection Filter
        • Connection filter templates
      • 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

Was this helpful?

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

Setting Up for Local Development

PreviousCIPP Dev GuideNextExecuting Local Development

Last updated 1 month ago

Was this helpful?

This page provides information on various required and recommended tools, programs and resources for developing the CIPP React frontend.

It's recommended that you have the following installed on the computer you're using for development:

  • (VSCode) winget install --exact vscode

  • These VSCode extensions:

  • winget install --exact Microsoft.PowerShell

  • winget install --exact Git.Git

  • winget install --exact OpenJS.NodeJS.LTS --version 22.13.0;winget pin add OpenJS.NodeJS.LTS --version 22.13.* --force

  • winget install --exact Microsoft.DotNet.SDK.3_1

  • winget install --exact Microsoft.DotNet.SDK.5

  • winget install --exact Microsoft.DotNet.SDK.6

  • winget install --exact Microsoft.DotNet.SDK.8

This page guides you through getting setup to develop for CIPP using the command line to perform operations with git and npm. There are graphical user interfaces for these tools but they won't be covered in this documentation. The commands below are broadly OS agnostic.

< Using npm which is included with nodejs you're going to install the Azure Static Web Apps CLI, the Azure Functions Core Tools and the Azurite storage emulator globally.

Depending on your system setup you may have to run the following commands as an administrator in order for npm to write the package files into its global package folder. Globally installed npm packages are available to all users.

npm install --global @azure/static-web-apps-cli
npm install --global azure-functions-core-tools@4 --unsafe-perms true
npm install --global azurite
npm install --global yarn
npm install --global next

Now we need to get the files downloaded for CIPP. In order to properly test as you develop the CIPP frontend we need a copy of your CIPP and CIPP-API repositories.

For the rest of this guide we assume that your forks are at:

  • CIPP - https://github.com/goodatforking/CIPP

  • CIPP-API - https://github.com/goodatforking/CIPP-API :::

:::tip What's a repository? A Git repository is the .git/ folder which you'll find inside many projects like CIPP. This repository tracks all changes made to files in the project, changes to these files are commited to the repository (repo) which then builds up a history of the project. :::

The CIPP and CIPP-API repositories need to be located alongside each other (siblings) - so we're looking for a folder structure that looks like this:

- CIPP-Project
-- CIPP
-- CIPP-API

So if we assume that we want our CIPP-Project directory in X:\Development we're going to do the following:

cd "X:\Development"
mkdir "CIPP-Project"
cd "CIPP-Project"
git clone https://github.com/goodatforking/CIPP --origin goodatforking
git clone https://github.com/goodatforking/CIPP-API --origin goodatforking

When you clone a git repository you automatically get a remote this is a pointer (usually a URL) to a remote copy of the git repository which you can push changes to. By default your first remote is called origin. But that doesn't really mean much to most people. In the commands above we're using --origin goodatforking to tell git that we want our first remote (origin) to be called goodatforking.

At this point we could start working on the code - we have our pre-requisites and we have to code setup as we need it, but we're going to do one last thing to make life easier down the road.

We're going to add Kelvin's original repository as upstream.

cd "CIPP"
git remote add upstream https://github.com/KelvinTegelaar/CIPP
cd ..
cd "CIPP-API"
git remote add upstream https://github.com/KelvinTegelaar/CIPP-API
cd ..

When working on open source projects it's often helpful to keep your stable / tested code separate from your under-development code. We can achieve this with git by using branches. The CIPP project uses the following branches:

  • main - Our stable/tested code - this is where releases are created (tagged).

  • dev - Our development code - this is the branch where active development takes place.

  • docs - The CIPP documentation files aka. the content of the website you are reading this from.

We're going to want to work from the dev branch since that's where the latest development code is, switching branches in git is achieved by doing a checkout on the branch.

cd "CIPP"
git checkout dev
cd ..
cd "CIPP-API"
git checkout dev
cd ..

That's it - we've got our repositories setup locally and on the dev branch, our local environment is setup and ready to develop the CIPP UI. Read on through this section for further instructions.

:::info Forking repositories You're going to want to work on a of the and repositories.

👩‍💻
Visual Studio Code
Azure Functions
ESLint
npm
npm Intellisense
Prettier
Stylelint
PowerShell 7
git
node.js V22.X LTS
.NET Core 3.1
.NET SDK 5
.NET SDK 6
.NET SDK 8
forked copy
CIPP
CIPP-API