Everything needed for getting started with kickstartDS is a Node & npm environment.
Additionally you'll probably want to use an editor like Visual Studio Code to work on your Design System.
This also enables you to take advantage of smart features, like code completion or inline documentation, while coding.
Working with the terminal
Working with a Design System code base in general, and with kickstartDS specifically, often involve working with your local terminal.
We can't give you an exhausting intro to that here, but the MDN one is a good start:
Understanding client-side web development tools > Command line crash course
Generally your best starting point is the built-in terminal, included with most Operating Systems (OS). There's nothing prohibiting you from using other terminal solutions or configurations, but if you happen to come accross something strange feel free to open a ticket on Github.
Included terminal options per OS
- Windows: The older Command Line Shell or the newer PowerShell.
- macOS: The built-in Terminal app
- Linux: Choice of terminal can vary wildly, depending on distribution (Ubuntu, Debian, Arch, etc) and user preference
Node & npm
nvm, to be more flexible in switching used versions of both.
We're currently on Node LTS version
16.14.2. See details about it here. We generally adopt new LTS releases (the even numbered ones) when they become stable, and supported by all of our associated downstream tooling (like integrations, themes, etc).
To check if your local installation works and matches your expecation, open a new terminal window and run:
_2node --version_2npm --version
Which should result in:
Usage with nvm
It's recommended to use a Node version manager. We prefer using
nvm, a pretty widely used, terminal based solution:
We also include a
.nvmrc file with all our repositories, specifying the currently used and supported version, for example this one for the main repository of kickstartDS:
nvm installed, just switch to the folder and call:
Which should net you something like this:
_2Found '/home/julrich/Projects/Frontend/code/kickstartDS/.nvmrc' with version <16.14>_2Now using node v16.14.2 (npm v8.19.2)
If the needed version is not found locally, you're automatically prompted with the correct command to install it. This ensures general compatibility with provided code and it's associated processes.
Automatic Node version change
Your currently selected working version of Node and npm can also be chosen completely automated, based on your local shell configuration. This is a bit more environment specific, but enables (for example) version changes based on your current working directory:
Read more on the
nvm section about Deeper Shell Integration.
Usage with yarn
yarn for package management ourselves, including their workspaces feature... enabling having all modules / packages together in our single mono repository.
Just replace commands normally prefixed with
npm by their corresponding
Only ever use one package manager
You should never mix package manager use. So if you're opting for
yarn, be careful to not call commands link
npm install, or
npm run any longer. Just use their counter parts
yarn install /
yarn run instead.
yarn uses a
yarn.lock file to pinpoint your exact versions, whereas
package-lock.json. This might also give you an indication as to which package manager was used before in a project.
Other package managers
Currently the use of
Nx is untested. There's nothing immediately coming to mind blocking their use, though. If you happen to use one of them, and come upon problems, feel free to open a ticket on our Github repository.
You'll probably want to have
Git support installed on your system, too. This is not strictly a requirement for working with kickstartDS, but is the recommended way to work with code today. Learn more about
Git on their official website.
Next to your locally installed
Git client, most of the time you'll interact with a hosted repository.
This might live on popular SaaS hosting providers such as Github, Gitlab or Bitbucket, on privately hosted providers, based on those, or a variety of other flavours... up to completely local repositories just used for personal use.
kickstartDS is hosted on
Github, but where your Design System repository is hosted depends on your own setup.
You can find our repository here: github.com/kickstartDS/kickstartDS
Popular configuration guides include:
If working with the terminal is not your thing, you might want to use a dedicated Git GUI (Graphical User Interface). For an overview have a look at the options for your operating system.
GitHub Desktop is an excellent choice when working with
Github, but in general the Visual Studio Code Git extensions are an integrated, natural alternative for developers. Learn more about them on their intro page.
If you just want to have a nicer terminal based experience, you might have a look at the