StackEdit Deployment and Usage Guide

Prerequisites

• Node.js (version 10 or higher) - Required for building and running the application
• npm - Node package manager (included with Node.js)
• Git - For cloning the repository
• Google API credentials (optional) - For Google Drive integration
• GitHub API credentials (optional) - For GitHub integration
• Dropbox API credentials (optional) - For Dropbox integration
• WordPress API credentials (optional) - For WordPress integration

Installation

1. Clone the repository:

   git clone https://github.com/benweet/stackedit.git
   cd stackedit
   

2. Install dependencies:

   npm install
   

Configuration

Environment Variables

For local development, you can set environment variables in a .env file:

# Google Drive API
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_API_KEY=your_google_api_key

# GitHub API
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret

# Dropbox API
DROPBOX_API_KEY=your_dropbox_api_key
DROPBOX_FULL_ACCESS_API_KEY=your_dropbox_full_access_api_key

# WordPress API
WORDPRESS_CLIENT_ID=your_wordpress_client_id
WORDPRESS_CLIENT_SECRET=your_wordpress_client_secret

API Configuration

To configure API credentials:

1. Google Drive:

   • Create a project in Google Cloud Console
   • Enable Google Drive API
   • Create OAuth 2.0 credentials
   • Set redirect URI to your application URL

2. GitHub:

   • Register a new OAuth application on GitHub
   • Set callback URL to your application URL

3. Dropbox:

   • Create an app in Dropbox App Console
   • Generate access tokens

Build & Run

Development

# Start development server with hot reload
npm start

# Server will be available at http://localhost:8080

Production

# Build for production with minification
npm run build

# Build and view bundle analyzer report
npm run build --report

Deployment

Docker Deployment

Create a Dockerfile:

FROM node:14-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Kubernetes with Helm

# Add StackEdit Helm repository
helm repo add stackedit https://benweet.github.io/stackedit-charts/

# Deploy StackEdit
helm install --name stackedit stackedit/stackedit \
  --set dropboxAppKey=$DROPBOX_API_KEY \
  --set dropboxAppKeyFull=$DROPBOX_FULL_ACCESS_API_KEY \
  --set googleClientId=$GOOGLE_CLIENT_ID \
  --set googleApiKey=$GOOGLE_API_KEY \
  --set githubClientId=$GITHUB_CLIENT_ID \
  --set githubClientSecret=$GITHUB_CLIENT_SECRET \
  --set wordpressClientId=$WORDPRESS_CLIENT_ID \
  --set wordpressSecret=$WORDPRESS_CLIENT_SECRET

Cloud Platforms

Vercel/Netlify:

• Build command: npm run build
• Output directory: dist

AWS S3 + CloudFront:

• Upload dist folder to S3
• Configure CloudFront distribution
• Enable HTTPS with ACM certificate

Troubleshooting

Common Issues

1. Build fails with missing dependencies:

   rm -rf node_modules package-lock.json
   npm install
   

2. Google Drive integration not working:

   • Verify Google API credentials are correctly configured
   • Check that Google Drive API is enabled in Google Cloud Console
   • Ensure redirect URI matches your application URL

3. GitHub authentication fails:

   • Verify GitHub OAuth credentials
   • Check that callback URL is correctly configured in GitHub settings
   • Ensure application is not blocked by GitHub

4. Hot reload not working:

   • Check if port 8080 is available
   • Verify no firewall is blocking the port
   • Try clearing browser cache

5. Production build missing files:

   • Ensure all static assets are included in the build process
   • Check that npm run build completes successfully
   • Verify dist folder contains all necessary files

Debug Mode

Enable debug logging by setting environment variable:

DEBUG=stackedit:* npm start

API Key Issues

If API keys are not working:

1. Check that all required scopes are enabled
2. Verify that API keys are not restricted by IP or HTTP referrer
3. Ensure billing is enabled for Google Cloud projects
4. Check rate limits for each API service

Browser Compatibility

StackEdit works best on modern browsers. For older browsers:

• Ensure ES5 transpilation is enabled
• Include polyfills for missing features
• Test on target browsers before deployment

Performance Issues

For slow loading times:

1. Enable gzip compression on your server
2. Use a CDN for static assets
3. Implement caching headers
4. Consider lazy loading for large documents