Skip to content
This repository was archived by the owner on Jun 4, 2024. It is now read-only.

Commit 87c9e99

Browse files
committed
Update README
1 parent 0c12ad0 commit 87c9e99

File tree

1 file changed

+56
-28
lines changed

1 file changed

+56
-28
lines changed

README.md

Lines changed: 56 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,53 @@
22

33
Vanilla HTML components for [Dash][]
44

5-
6-
## Getting Started
7-
8-
### Installation
9-
10-
```sh
11-
# Install dependencies
12-
$ npm install
13-
14-
# Watch source for changes and build to `lib/`
15-
$ npm start
16-
```
5+
### Install dependencies
6+
7+
1. Create a virtual env and activate.
8+
```
9+
$ virtualenv venv
10+
$ venv/bin/activate
11+
```
12+
_Note: venv\Scripts\activate for windows_
13+
14+
2. Install python packages required to build components.
15+
```
16+
$ pip install -r dev-requirements.txt
17+
```
18+
3. Generate components and install npm packages
19+
```
20+
$ npm install
21+
```
1722
1823
### Generating HTML Components
1924
2025
The components in `src/components`, as well as the export index in
2126
`src/index.js` are programmatically generated from element definitions in
2227
`scripts/`. To regenerate:
2328
24-
The list of attributes is regenerated by scraping the
25-
[MDN HTML attribute reference][].
2629
2730
```sh
2831
$ npm run generate-components
2932
```
33+
The list of attributes is regenerated by scraping the
34+
[MDN HTML attribute reference][].
35+
36+
_Note: This step will have already been done for you when you ran `npm install`_
37+
3038
### Development
3139

3240
#### Testing your components in Dash
3341

34-
1. Build development bundle to `lib/` and watch for changes
42+
1. Watch for changes
3543

36-
# Once this is started, you can just leave it running.
37-
$ npm start
44+
$ npm run build:watch
3845

3946
2. Install module locally (after every change)
4047

4148
# Generate metadata, and build the JavaScript bundle
4249
$ npm run install-local
4350

44-
# Now you're done. For subsequent changes, if you've got `npm start`
45-
# running in a separate process, it's enough to just do:
51+
# Now you're done. For subsequent changes, if you've got `npm run build:watch`
4652
$ python setup.py install
4753

4854
3. Run the dash layout you want to test
@@ -69,18 +75,40 @@ $ npm run uninstall-local
6975

7076
See the [contributing guide](CONTRIBUTING.md) for guidelines on contributing to this project.
7177

72-
## Publishing
7378

74-
## Builder / Archetype
79+
### Create a production build and publish:
80+
81+
1. Build your code:
82+
```
83+
$ npm run build:all
84+
```
85+
2. Create a Python tarball
86+
```
87+
$ python setup.py sdist
88+
```
89+
This distribution tarball will get generated in the `dist/` folder
90+
91+
3. Test your tarball by copying it into a new environment and installing it locally:
92+
```
93+
$ pip install dash-html-components-<new-version>.tar.gz
94+
```
95+
96+
4. If it works, then you can publish the component to NPM and PyPI:
97+
1. Publish on PyPI
98+
```
99+
$ twine upload dist/*
100+
```
101+
2. Cleanup the dist folder (optional)
102+
```
103+
$ rm -rf dist
104+
```
105+
3. Publish on NPM (Optional if chosen False in `publish_on_npm`)
106+
```
107+
$ npm publish
108+
```
109+
_Publishing your component to NPM will make the JavaScript bundles available on the unpkg CDN. By default, Dash servers the component library's CSS and JS from the remote unpkg CDN, so if you haven't published the component package to NPM you'll need to set the `serve_locally` flags to `True` (unless you choose `False` on `publish_on_npm`). We will eventually make `serve_locally=True` the default, [follow our progress in this issue](https://github.com/plotly/dash/issues/284)._
75110
76-
We use [Builder][] to centrally manage build configuration, dependencies, and
77-
scripts. See the [dash-components-archetype][] repo for more information.
78-
79-
80-
[Builder]: https://github.com/FormidableLabs/builder
81111
[Dash]: https://plot.ly/dash
82-
[dash-components-archetype]: https://github.com/plotly/dash-components-archetype
83112
[MDN HTML attribute reference]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
84113
[NPM package authors]: https://www.npmjs.com/package/dash-html-components/access
85114
[PyPi]: https://pypi.python.org/pypi
86-

0 commit comments

Comments
 (0)