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:
- Visual Studio Code (VSCode)
winget install --exact vscode
- These VSCode extensions:
- PowerShell 7
winget install --exact PowerShell
winget install --exact git
- node.js LTS
winget install --exact "Node.js LTS"
- .NET SDK 5
- .NET SDK 6
winget install --exact Microsoft.dotnet
About these instructions
This page guides you through getting setup to develop for CIPP using the command line to perform operations with
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.
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.
npm install --global Permissions
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
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.
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.
CIPP-API repositories need to be located alongside each other (siblings) - so we're looking for a folder structure that looks like this:
So if we assume that we want our
CIPP-Project directory in
X:\Development we're going to do the following:
git clone https://github.com/goodatforking/CIPP --origin goodatforking
git clone https://github.com/goodatforking/CIPP-API --origin goodatforking
Git remotes - An origin story
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
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
git remote add upstream https://github.com/KelvinTegelaar/CIPP
git remote add upstream https://github.com/KelvinTegelaar/CIPP-API
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.
website- The CIPP website code and documentation files.
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.
git checkout dev
git checkout dev
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.
You can install and use the GitHub CLI
winget install --id GitHub.cli to interact with GitHub from your command line. This is a fantastic addition to your command-line Git workflows allowing you to create Pull Requests and Issues without having to open a browser.