Publish & Export Your App

Your app is ready. Now share it with the world.

Publishing vs Exporting

Most users start with Publish. Export when you need full control over hosting and customization.

Publish Your App

Get a live URL you can share with anyone.

How to publish

1. Click Publish in the Console
2. Wait for build to complete (~1-2 minutes)
3. Copy your shareable link

What you get

• A live URL you can share
• Automatic HTTPS
• Fast loading via CDN

Export Your Code (Pro)

Download the complete source code to host anywhere.

How to export

1. Click Export in the Console
2. Select Download
3. Save the zip file
4. Extract and open in your code editor

What's included

your-project/
├── src/
│   ├── App.tsx
│   ├── pages/
│   ├── components/
│   └── providers/
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

This is a standard React/TypeScript project using:

• Refine framework
• Vite for bundling
• TypeScript for type safety

Running locally

# Navigate to the project
cd your-project

# Install dependencies
pnpm install

# Start development server
pnpm dev

Your app runs at http://localhost:5173.

Setting up environment variables

Create a .env file in your project root:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_anon_key
VITE_API_KEY=your_api_key

The generated code references these via import.meta.env.VITE_*.

Hosting Your Exported Code

Once you've exported, you can host anywhere that supports React apps.

Vercel

npm install -g vercel
vercel

AWS Amplify

npm install -g @aws-amplify/cli
amplify init
amplify publish

Docker

Create a Dockerfile:

FROM node:18-alpine AS build
RUN corepack enable && corepack prepare pnpm@latest --activate
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile
COPY . .
RUN pnpm build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80

Build and run:

docker build -t my-app .
docker run -p 80:80 my-app

Static hosting (S3, GitHub Pages, etc.)

Build the project:

pnpm build

Upload the dist/ folder to your static host.

Self-Hosting Checklist

Before going live with your exported app:

• Environment variables are set in your hosting platform
• API keys have appropriate permissions (not admin keys)
• CORS is configured on your backend (if using REST API)
• Supabase RLS policies are enabled (if using Supabase)
• Custom domain is configured (optional)

Troubleshooting

Exported app won't run locally

App works locally but not when hosted

"Failed to fetch" errors

Updating Your App

If using Publish

Changes sync automatically when you publish again.

If using Export

1. Make changes in the Console
2. Export again
3. Merge with your existing codebase if you made local changes

Version Control (Exported Projects)

For team projects, put your exported code in Git:

cd your-project
git init
git add .
git commit -m "Initial export from Refine"
git remote add origin your-repo-url
git push -u origin main

From here, you can:

• Track changes over time
• Collaborate with teammates
• Set up CI/CD pipelines
• Continue development in your preferred IDE

Next Steps

• Using the Console — Continue building
• Prompting Guide — Improve your prompts
• Troubleshooting — Common issues