Skip to content

Commit

Permalink
docs(contributing): add additional info about environment setup (#5802)
Browse files Browse the repository at this point in the history
**Related Issue:** #

## Summary

Designers are running into issues getting an environment set up to run
the demos locally, so I'm clarifying a few things in the contributing
guide.

<!--

Please make sure the PR title and/or commit message adheres to the
https://www.conventionalcommits.org/en/v1.0.0/ specification.

Note: If your PR only has one commit and it is NOT semantic, you will
need to either

a. add another commit and wait for the check to update
b. proceed to squash merge, but make sure the commit message is the same
as the title.

This is because of the way GitHub handles single-commit squash merges
(see zeke/semantic-pull-requests#17)

If this is component-related, please verify that:

- [ ] feature or fix has a corresponding test
- [ ] changes have been tested with demo page in Edge

---

If this is skipping an unstable test:

- include info about the test failure
- submit an unstable-test issue by
[choosing](https://github.com/Esri/calcite-components/issues/new/choose)
the unstable test template and filling it out

-->
  • Loading branch information
benelan authored Nov 23, 2022
1 parent 86b6f98 commit f6c6647
Showing 1 changed file with 33 additions and 5 deletions.
38 changes: 33 additions & 5 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,24 +89,52 @@ Our code base is written in TypeScript and must adhere to specific conventions a

## Getting a development environment set up

An installation of Node is required for development. If you don't have Node installed, we recommend [Volta], which will automatically use the Node versions we pinned in `package.json`. We also recommend installing the following extensions in your editor of choice: TypeScript, TailwindCSS, ESLint, Stylelint, and Prettier. If you use VS Code, you will see a pop up in the bottom right corner prompting you to install or view the workspaces's recommended extensions. Here are instructions for manually installing the extensions in a variety of editors:
An installation of Node is required for development. If you don't have Node installed, we recommend [Volta](https://docs.volta.sh/guide/getting-started), which will automatically use the Node/NPM versions pinned at the bottom of [`package.json`](./package.json). If you prefer a different Node version manager, make sure to use the major versions of Node/NPM specified in [`package.json`](./package.json).

We also recommend installing the following extensions in your editor of choice: TypeScript, TailwindCSS, ESLint, Stylelint, and Prettier. If you use VS Code, you will see a pop up in the bottom right corner prompting you to install or view the workspaces's recommended extensions. Here are instructions for manually installing the extensions in a variety of editors:

- https://tailwindcss.com/docs/intellisense
- https://eslint.org/docs/latest/user-guide/integrations
- https://stylelint.io/user-guide/integrations/editor
- https://prettier.io/docs/en/editors.html

The first time installing dependencies, you need to use the `--legacy-peer-deps` flag due to an ESLint dependency conflict. The conflict won't affect the components since ESLint is only in `devDependencies`. Hopefully this will no longer be an issue once [`@stencil/eslint-plugin`](https://github.com/ionic-team/stencil-eslint) supports ESLint v8.
If your IDE supports the [Language Server Protocol (LSP) specification](https://microsoft.github.io/language-server-protocol/) but isn't mentioned in the links above, ask Ben for help getting set up.

## Starting the demos

First, clone the repo and install the NPM dependencies from within the `calcite-components` directory:

```sh
npm install --legacy-peer-deps
git clone git@github.com:Esri/calcite-components.git
cd calcite-components
npm install
```

To start the local development environment, run `npm start`, which will start the local Stencil development server on localhost. You can modify the [index.html](./src/index.html) to add and test your new component. Just add another HTML file to the `demos` folder and link to this new page from `index.html`.
> **NOTE**
>
> The first time installing dependencies, you may need to use the `legacy-peer-deps` flag due to an Stencil/ESLint dependency conflict:
>
> ```sh
> npm install --legacy-peer-deps
> ```
>
> Hopefully this will no longer be an issue once [`@stencil/eslint-plugin`](https://github.com/ionic-team/stencil-eslint) supports ESLint v8.
Next, start the local Stencil development server on localhost:
```sh
npm start
```
The demos will open in the browser after building. Edit the pages in [`src/demos`](./src/demos) to modify the component demos, such as changing attributes or adding content to slots. When adding a new demo page, make sure to add a link in [`index.html`](./src/index.html) so others can find it. You can also edit the component code in [`src/components`](./src/components), and the changes will be reflected in the demos.

## Linting

This project uses [lint-staged](https://www.npmjs.com/package/lint-staged) to automatically format code on commit, making it easier to contribute.
This project uses [lint-staged](https://www.npmjs.com/package/lint-staged) to automatically format code on commit, making it easier to contribute. There are also NPM scripts in [`package.json`](./package.json) to lint a variety of filetypes. To run them all:

```sh
npm run lint
```

## Running the tests

Expand Down

0 comments on commit f6c6647

Please sign in to comment.