Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: npm watch synced with live-refresh demo #61

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ dist

# Fractal
demo
## Empty file touched after auto-rebuild to trigger server live-refresh */
fractal.server.refresh.css

# IDE
.vscode
Expand Down
32 changes: 21 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -129,32 +129,42 @@ buildStylesheets(

Code configuration happens in repos that use these styles.

### Previewing the Styles
### Previewing Built Demo

1. [Install][npm-install] the dependencies:

```bash
npm ci
```

2. Build stylesheets and demo:
1. Build stylesheets and build static demo:

```bash
npm run build
```

3. Run the pattern library:
2. Run the static demo:

```bash
npm start
npx serve demo
```

<sup>Live reloads on demo file change, but **not** source file change.</sup>

4. Open the web interface.
The build command will output the URL (and may even open it for you).

[npm-install]: https://docs.npmjs.com/cli/v8/commands/npm-ci
### Previewing During Development

Run each of these commands in its own terminal.

1. Build stylesheets and re-build on change:

```bash
npm run build:watch
```

2. Run the auto-refresh demo:

```bash
npm start
```

<sup>Source file change causes **two** demo refreshes. The **second** reload will show changes.</sup>

### Source Files

Expand Down
Loading