Deploying to Production

Ready to deploy your app? Here’s how to go from local development to production.

The one thing you must change

When moving from development to production, change your region from "dev" to "na1":

// ❌ Development
const backend = new Backend('any-key', 'dev');

// ✅ Production (managed hosting)
const backend = new Backend('your-real-public-key', 'na1');

// ✅ Production (self-hosted)
const backend = new Backend('your-real-public-key', 'https://your-domain.com');

That’s it! The StaticBackend client library handles everything else.

Deployment checklist

Before deploying, make sure you:

1. Use production API keys

2. Secure your keys

Environment variables (recommended):

// Use environment variables in your build
const backend = new Backend(
  process.env.STATICBACKEND_PUBLIC_KEY,
  'na1'
);

Add to your .env file (never commit this!):

STATICBACKEND_PUBLIC_KEY=your-real-public-key-here

3. Update your build configuration

Different platforms handle environment variables differently:

Vercel:

# Add to Vercel project settings
STATICBACKEND_PUBLIC_KEY=your-key

Netlify:

# Add to Netlify site settings
STATICBACKEND_PUBLIC_KEY=your-key

GitHub Actions:

env:
  STATICBACKEND_PUBLIC_KEY: ${{ secrets.STATICBACKEND_PUBLIC_KEY }}

Deployment platforms

Your frontend can be deployed anywhere. Here are popular options:

Vercel

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Add environment variables in Vercel dashboard under Settings → Environment Variables.

Netlify

# Install Netlify CLI
npm i -g netlify-cli

# Deploy
netlify deploy --prod

Add environment variables in Netlify dashboard under Site Settings → Environment Variables.

GitHub Pages

Perfect for static sites:

npm run build
# Push the build folder to gh-pages branch

Note: Environment variables must be set at build time for static sites.

Your own server

Upload your built files via FTP, SFTP, or use a deploy script:

npm run build
scp -r dist/ user@yourserver.com:/var/www/html/

Docker

Create a Dockerfile for your frontend:

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
ARG STATICBACKEND_PUBLIC_KEY
ENV STATICBACKEND_PUBLIC_KEY=$STATICBACKEND_PUBLIC_KEY
RUN npm run build
CMD ["npm", "start"]

Build and deploy:

docker build --build-arg STATICBACKEND_PUBLIC_KEY=your-key -t myapp .
docker run -p 3000:3000 myapp

Testing before deployment

Test against production from local

The CLI provides a proxy to test your local app against production:

backend proxy

This routes localhost:8099 requests to StaticBackend’s production API.

Use this to:

Important: Stop your local dev server first (backend server) before starting the proxy.

Staging environment

For larger projects, consider a staging deployment:

  1. Create a separate StaticBackend account for staging
  2. Deploy your app to a staging URL
  3. Test thoroughly
  4. Deploy to production when ready

Common deployment issues

“Invalid public key” error

Problem: Using development settings in production

Solution: Make sure you changed "dev" to "na1" and are using your real public key.

Environment variables not working

Problem: Variables not loaded at build time

Solution: Check your platform’s documentation. Most static site generators need variables at build time, not runtime.

CORS errors

Problem: Frontend domain not configured

Solution: StaticBackend allows requests from any origin by default. Check your browser console for the actual error.

Authentication failing in production

Problem: Using wrong region or keys

Solution: Verify you’re using production keys and the correct region ("na1").

Production best practices

Use environment variables

Never hardcode keys in your source code:

// ❌ Don't do this
const backend = new Backend('pk_1234567890abcdef', 'na1');

// ✅ Do this
const backend = new Backend(process.env.STATICBACKEND_PUBLIC_KEY, 'na1');

Keep root token secret

Your root token is for server-side operations only:

Monitor your app

Use your StaticBackend dashboard to:

Set up error tracking

Add error tracking to catch production issues:

const result = await backend.create(token, 'todos', data);

if (!result.ok) {
  // Log to your error tracking service
  console.error('Failed to create todo:', result.content);
  // Show user-friendly error
  alert('Something went wrong. Please try again.');
}

Deploying updates

When updating your deployed app:

  1. Test locally first with backend server
  2. Test against production with backend proxy
  3. Deploy to staging if you have one
  4. Deploy to production
  5. Monitor for errors in the first few minutes

Self-hosted backend deployment

If you’re self-hosting StaticBackend, see our self-hosting guide for deployment details.

Key differences:

Next steps


Questions about deployment? Ask in our GitHub Discussions

© 2023 Focus Centric Inc. All rights reserved.