Skip to content
Open
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
51 changes: 51 additions & 0 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
name: Deploy Demo to GitHub Pages

on:
push:
branches: [ main ]
# Allow manual triggering
workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write

# Allow only one concurrent deployment
concurrency:
group: "pages"
cancel-in-progress: false

jobs:
# Single job that builds and deploys
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4

- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'

- name: Install dependencies
run: npm ci

- name: Build demo
run: npm run build:demo

- name: Setup Pages
id: pages
uses: actions/configure-pages@v4

- name: Upload to GitHub Pages
uses: actions/upload-pages-artifact@v3
with:
path: './dist-demo'

- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ lerna-debug.log*

node_modules
dist
dist-demo
dist-ssr
*.local

Expand Down
58 changes: 58 additions & 0 deletions DEPLOYMENT.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
# GitHub Pages Deployment Guide

This guide explains how to deploy the ASIMOV Network Widget demo to GitHub Pages.

## 🚀 Automatic Deployment (Recommended)

The repository is configured with GitHub Actions for automatic deployment:

1. **Enable GitHub Pages** in your repository:
- Go to Settings → Pages
- Set Source to "GitHub Actions"

2. **Push to main branch** - the demo will automatically build and deploy

3. **Access your demo** at: `https://asimov-protocol.github.io/asimov-network-widget/`

## 📝 Manual Deployment

If you prefer manual deployment:

```bash
# Build the demo
npm run build:demo

# Deploy to GitHub Pages
npm run deploy
```

## 🔧 Configuration

### Base Path
The demo is configured for the path `/asimov-network-widget/`. If your repository has a different name, update the `base` property in `vite.demo.config.ts`:

```typescript
base: '/your-repo-name/',
```

### Build Scripts

- `npm run build:demo` - Builds the demo for production
- `npm run preview:demo` - Preview the built demo locally
- `npm run deploy` - Deploy to GitHub Pages using gh-pages

## 📁 Generated Files

The build creates static files in `dist-demo/`:
- `index.html` - Main demo page
- `assets/` - CSS and JavaScript bundles
- `asimov.svg` - Logo asset

These files are served directly by GitHub Pages with no server-side processing required.

## 🌐 Live Demo

Once deployed, your demo will be available at:
- **URL**: `https://asimov-protocol.github.io/asimov-network-widget/`
- **Features**: Full interactive network simulation
- **Performance**: Optimized production build with code splitting
6 changes: 6 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,12 @@ const options = {
/>
```

## Live Demo

🌐 **[View Live Demo on GitHub Pages](https://asimov-protocol.github.io/asimov-network-widget/)**

Experience the full interactive network simulation with all dynamic features directly in your browser.

## Local Development

If you’d like to work with this repository directly, simply clone it and install its dependencies. Then, you can spin up the development server with the following commands:
Expand Down
Loading