Skip to main content

Installation

You can run Composable UI locally or using Docker. The installation instructions are available in the README file in the Composable UI GitHub repository.

Installing Composable UI

Pre-Requisites

Ensure that you have installed the following on the local development machine:

  • Node.js v18.14.0 or higher. For checking the current version of Node.js on your machine, run the following command:

    node -v

    For changing the Node.js version, follow the instructions in the nvm documentation.

  • pnpm v8.0 or higher. For checking the current version of pnpm on your machine, run the following command:

    pnpm --version

    For installing pnpm, run the following command:

    npm install -g pnpm

    If you currently have a version prior to 8.0, run the following command:

    npm uninstall pnpm -g
    npm install -g pnpm
  • A code editor, such as Visual Studio Code.

Installation Steps

  1. Clone the source repository to your local development environment.
  2. Follow the instructions in the README for local setup and configuration.
  3. Optionally, follow the instructions in the README to deploy Composable UI to a hosting provider.

Be sure to read the documentation on Composable UI's environment variables

The following Visual Code Extensions are recommended to improve the developer experience:

Extension NameExtension IDDescription
Markdown All in Oneyzhang.markdown-all-in-oneProvides markdown shortcuts, including table of contents generator.
ES7+ React/Redux/React-Native Snippetsdsznajder.es7-react-js-snippetsProvides a snippet generator for common React code.
Prettier - Code formatteresbenp.prettier-vscodeProvides a code formatter.
Code Spell Checkerstreetsidesoftware.code-spell-checkerProvides basic spell check.
Color Highlightnaumovs.color-highlightHighlights web colours in your code.
Git Historydonjayamanne.githistoryDisplays git log, file history, compare branches or commits.
GraphQL: Language Feature SupportGraphQL.vscode-graphqlImproves GraphQL developer experience.
markdownlintDavidAnson.vscode-markdownlintProvides Markdown linting and style checking.
JestOrta.vscode-jestSupports full jest features to make testing more intuitive.
Test Adapter Converterms-vscode.test-adapter-converterConverts Test Explorer UI API into native VS Code testing.
TODO Highlightwayou.vscode-todo-highlightHighlights TODO, FIXME ,and other annotations within your code.

You can automate the installation of these extensions by creating .vscode/extensions.json file with the following contents:

{
"recommendations": [
"yzhang.markdown-all-in-one",
"dsznajder.es7-react-js-snippets",
"esbenp.prettier-vscode",
"streetsidesoftware.code-spell-checker",
"naumovs.color-highlight",
"donjayamanne.githistory",
"GraphQL.vscode-graphql",
"DavidAnson.vscode-markdownlint",
"Orta.vscode-jest",
"ms-vscode.test-adapter-converter",
"wayou.vscode-todo-highlight"
]
}