How to store static files in Replit

Before storing any files, you need to understand a critical Replit behavior: the filesystem resets every time you publish a deployment. Files you save to disk during development will not exist in production after a redeploy. This catches many beginners off guard. If your app allows users to upload profile pictures and you save them to a local uploads folder, those files vanish on the next deploy. This is by design because Replit deployments run on fresh containers. You must use external storage for any files that need to persist.

In your Replit workspace, click the plus icon on the Tools dock in the left sidebar. Search for Object Storage and click it to open the storage pane. Object Storage is backed by Google Cloud Storage and provides a simple interface for uploading, listing, and deleting files. Each file you upload gets a publicly accessible URL that you can use in your application. The storage pane shows all uploaded files with their names, sizes, and URLs.

Click the Upload button in the Object Storage pane and select files from your computer. You can upload images, fonts, PDFs, videos, and any other static file. After upload completes, each file gets a public URL that looks like a Google Cloud Storage endpoint. Click the copy icon next to any file to copy its URL. You can organize files by using path-style names like images/logo.png or assets/hero-banner.jpg. These URLs are permanent and do not change between deployments.

Use the public URLs from Object Storage directly in your application. In React components, set image src attributes to the storage URL. In CSS, use the URL for background images. For server-side rendering, you can fetch files from the URL using standard HTTP libraries. Store the base URL as an environment variable in Secrets if you want to switch storage providers later without changing code throughout your app.

1// React component example
2import React from 'react';
3
4const STORAGE_BASE = process.env.REPLIT_OBJECT_STORAGE_URL || '';
5
6export function Logo() {
7  return (
8    <img
9      src={`${STORAGE_BASE}/images/logo.png`}
10      alt="Company Logo"
11      width={200}
12      height={60}
13    />
14  );
15}
16
17export function HeroBanner() {
18  return (
19    <div
20      style={{
21        backgroundImage: `url(${STORAGE_BASE}/images/hero.jpg)`,
22        backgroundSize: 'cover',
23        height: '400px'
24      }}
25    >
26      <h1>Welcome</h1>
27    </div>
28  );
29}

During development, you can place static files in a public or static folder at the root of your project. Most frameworks like React (via Vite), Next.js, and Express serve files from this folder automatically. This is convenient for assets that ship with your code like favicons, fonts, and placeholder images. Since these files are part of your project, they persist across deployments because they are included in the build output. However, user-uploaded content should never go here because the filesystem resets.

1// Express.js: serve a public folder
2import express from 'express';
3const app = express();
4
5// Serve files from the public directory
6app.use('/assets', express.static('public'));
7
8// Now files in /public/logo.png are accessible at /assets/logo.png
9app.listen(3000, '0.0.0.0', () => {
10  console.log('Server running on port 3000');
11});

For apps that accept user uploads, write server-side code that receives the file and stores it in Object Storage using the Replit client library. The @replit/object-storage package provides simple put and get methods. Install it via the Shell with npm install @replit/object-storage. After storing a file, save the returned URL to your database so your app can reference it later. This pattern ensures uploaded files survive deployments and container resets.

1import { Client } from '@replit/object-storage';
2import express from 'express';
3import multer from 'multer';
4
5const app = express();
6const storage = new Client();
7const upload = multer({ storage: multer.memoryStorage() });
8
9app.post('/upload', upload.single('file'), async (req, res) => {
10  try {
11    const fileName = `uploads/${Date.now()}-${req.file.originalname}`;
12    await storage.uploadFromBytes(fileName, req.file.buffer);
13    const url = await storage.getSignedUrl(fileName);
14    res.json({ success: true, url });
15  } catch (error) {
16    console.error('Upload failed:', error);
17    res.status(500).json({ error: 'Upload failed' });
18  }
19});
20
21app.listen(3000, '0.0.0.0');