Downloading Projects

Export your Juliet projects as ZIP files to run locally, deploy, backup, or share with others.

Written By Samir Patel

Last updated 3 months ago

Downloading Projects - Export your Juliet projects as ZIP files to run locally, deploy, backup, or share with others.

Why Download Projects?

Common Use Cases

Local Development: Edit in your preferred IDE (VS Code, WebStorm, etc.) Use local development tools Work offline Better performance for large projects

Deployment: Deploy to hosting services (Vercel, Netlify, AWS) Push to production servers CI/CD integration Custom hosting solutions

Backup: Keep safe copy of important work Protection against accidental deletion Archive completed projects Version control with Git

Sharing: Send to colleagues or clients Share with team outside Juliet Provide deliverables Code reviews

Learning: Study generated code Learn project structure Understand AI's implementation Reference for future projects

How to Download

From Project Builder

When project is open:

  1. Look for Download button (top toolbar)

  2. Click "Download" or download icon (⬇)

  3. ZIP file downloads automatically

  4. Filename: project-name.zip

Quick and easy - downloads current project state immediately.

From Dashboard

When viewing project list:

  1. Find project card

  2. Click settings icon (⚙)

  3. Select "Download" or "Export"

  4. ZIP file downloads

Useful for downloading without opening project.

Download Location

File saves to your browser's default download folder (usually /Downloads or C:\Users\YourName\Downloads).

Check browser settings for custom locations.

Filename format: project-name.zip (e.g., todo-app.zip, landing-page.zip)

What's Included

Source Files

All your code: JavaScript/TypeScript files (.js, .jsx, .ts, .tsx) HTML files (.html) CSS files (.css, .scss, .sass) JSON files (.json) All files you created or AI generated

Configuration Files

Project setup: package.json - Dependencies and scripts package-lock.json or pnpm-lock.yaml - Dependency locks .gitignore - Git ignore rules Config files (.eslintrc, vite.config.js, tailwind.config.js, etc.) Environment templates (.env.example if exists)

Public Assets

Static files: HTML entry files Images Fonts Icons Other public assets

Documentation

If present: README.md Documentation files License files Other markdown docs

What's NOT Included

node_modules/

Dependencies folder excluded. Why? Extremely large (50MB to 500MB+), contains thousands of files.

What to do: Run npm install after extraction. Dependencies install from package.json (takes 30 seconds to 2 minutes).

Build Artifacts

Generated files excluded (dist/ or build/ folders, compiled/bundled code).

Why? Regenerated by running npm run build. Don't need to save build output.

What to do: Run npm run build to create production build.

Environment Variables

.env files excluded. Why? May contain sensitive data, API keys should not be in ZIP.

What to do: Create .env file locally, add your API keys and secrets, reference .env.example if provided.

Cache Files

Temporary files excluded: .cache/ folders, temporary build files, operating system files (.DS_Store), IDE-specific files (.vscode/, .idea/).

Extracting the ZIP

On Windows

Method 1: Right-click

  1. Right-click the ZIP file

  2. Select "Extract All..."

  3. Choose destination folder

  4. Click "Extract"

Method 2: 7-Zip or WinRAR

  1. Right-click ZIP file

  2. Select "7-Zip" → "Extract to project-name/"

  3. Or "Extract Here"

On macOS

Double-click:

  1. Double-click the ZIP file

  2. Folder extracts automatically

  3. Appears in same location as ZIP

Or drag:

  1. Drag ZIP to desired location

  2. Double-click to extract

On Linux

Command line: unzip project-name.zip

Or specify destination: unzip project-name.zip -d /path/to/destination

GUI: Right-click → "Extract Here" or use Archive Manager

Running Project Locally

Prerequisites

What you need:

  1. Node.js installed Download from nodejs.org Version 14+ required (18+ recommended) Check: node --version

  2. npm, pnpm, or yarn Comes with Node.js (npm) Or install pnpm: npm install -g pnpm Or install yarn: npm install -g yarn

  3. Terminal/Command Prompt Terminal (Mac/Linux) Command Prompt or PowerShell (Windows)

Step-by-Step

  1. Extract the ZIP

  2. Navigate to project: cd project-name

  3. Install dependencies: npm install (wait 30 seconds to 2 minutes)

  4. Start development server: npm run dev

  5. Open in browser: Terminal shows URL (http://localhost:3000 or http://localhost:5173)

  6. Make changes: Edit files in your preferred editor, save changes, browser auto-updates

Common Commands

Development: npm run dev - Start dev server (Vite, Next.js) npm start - Start dev server (React)

Building: npm run build - Create production build npm run preview - Preview production build

Testing: npm test - Run tests npm run test:watch - Watch mode

Linting: npm run lint - Check code quality npm run lint:fix - Auto-fix issues

Using in Your Own IDE

VS Code

Open project:

  1. Launch VS Code

  2. File → Open Folder

  3. Select extracted project folder

  4. Project opens with file tree

Recommended extensions: ESLint, Prettier, Auto Rename Tag, Path Intellisense, GitLens

Integrated terminal: View → Terminal, run npm commands, start dev server.

WebStorm/IntelliJ

Open project:

  1. Launch WebStorm

  2. File → Open

  3. Select project folder

  4. Trust project if prompted

Features: Smart code completion, refactoring tools, built-in terminal, Git integration, debugging tools.

Sublime Text

Open project:

  1. Launch Sublime Text

  2. File → Open Folder

  3. Select project folder

Use terminal: Open external terminal, navigate to project, run npm commands.

Other Editors

Any text editor works (Atom, Brackets, Notepad++, Vim/Emacs). Just need to edit files and use terminal separately.

Deploying Downloaded Projects

Vercel

Deploy to Vercel:

  1. Install Vercel CLI: npm install -g vercel

  2. From project folder: vercel

  3. Follow prompts

  4. App deploys to Vercel URL

Or use Vercel dashboard: Connect Git repository, auto-deploy on push.

Netlify

Deploy to Netlify:

  1. Install Netlify CLI: npm install -g netlify-cli

  2. From project folder: netlify deploy

  3. Follow prompts

  4. App deploys to Netlify URL

Or drag & drop: Build project (npm run build), go to netlify.com/drop, drag dist/ or build/ folder.

GitHub Pages

Deploy static site:

  1. Install gh-pages: npm install --save-dev gh-pages

  2. Add to package.json scripts: "deploy": "gh-pages -d dist"

  3. Build and deploy: npm run build, then npm run deploy

Other Platforms

Works with any hosting: AWS, Google Cloud, DigitalOcean, Heroku, Railway, Render, Firebase Hosting.

General process:

  1. Build project: npm run build

  2. Upload build folder to hosting

  3. Configure server/settings

  4. Access via hosting URL

Version Control with Git

Initialize Git Repository

From project folder:

git init git add . git commit -m "Initial commit"

Connect to GitHub

Create remote repository:

  1. Go to github.com

  2. Create new repository

  3. Copy repository URL

Connect local to remote: git remote add origin https://github.com/username/repo.git git push -u origin main

Benefits of Git: Version control (track changes, revert if needed, branching) Deployment (auto-deploy from GitHub, CI/CD integration) Backup (code safe on GitHub, clone from anywhere)

Sharing Downloaded Projects

With Team Members

Options:

  1. Send ZIP file (email attachment, Dropbox/Google Drive link, Slack/Teams)

  2. Git repository (push to GitHub, share repository link, team clones and contributes - best for collaboration)

  3. Cloud storage (upload to Drive/Dropbox, share link)

With Clients

Deliver final product:

  1. Build production version: npm run build

  2. Zip build folder (dist/ or build/ - optimized production files)

  3. Share (send ZIP via email, upload to shared storage, deploy and share live URL)

Or share source code: Provide full ZIP download, include instructions, document dependencies, add README.

Best Practices

  1. Download Regularly

Backup important projects: Download completed projects Download before major changes Keep local copies Protection against data loss

Schedule: After major milestones, end of work sessions, before risky refactoring, weekly for active projects.

  1. Test After Download

Verify it works:

  1. Extract ZIP

  2. Install dependencies

  3. Run dev server

  4. Check all features work

  5. Ensure nothing missing

Catches issues early.

  1. Add Documentation

Create README.md with: Project name, description, installation steps, features, environment variables.

Helps: Remember setup later, onboard team members, share with others, professional delivery.

  1. Manage Environment Variables

Create .env.example with API keys placeholders and configuration examples.

Instructions: Copy .env.example to .env and add your values.

Security: Never commit .env to Git, .gitignore includes .env, share .env.example instead.

  1. Use Git from Start

Initialize Git immediately: First thing after download, commit initial state, track all changes, push to remote backup.

  1. Organize Downloaded Projects

Local structure: ~/Projects/ from-juliet/ todo-app/ landing-page/ dashboard/ personal/ work/

Keep organized: Separate folder for Juliet projects, clear naming, delete when no longer needed, archive completed projects.

Troubleshooting

Download Fails

Possible causes:

  1. Browser blocks download (check browser download settings, allow downloads from Juliet, try different browser)

  2. Network interruption (check internet connection, try again, use stable connection)

  3. Disk space (check available disk space, free up space if needed)

Solution: Retry download, check browser console for errors.

ZIP Won't Extract

Possible causes: Corrupted download, extraction software issue, disk space.

Solutions: Re-download the ZIP, try different extraction tool, check disk space, extract to different location.

Dependencies Won't Install

Common issues:

  1. Node.js not installed: 'node' is not recognized Solution: Install Node.js from nodejs.org

  2. Wrong Node.js version: Requires Node.js x or higher Solution: Update Node.js

  3. Network issues: npm ERR! network timeout Solution: Check internet connection, try again, use different network

  4. Permission issues (Mac/Linux): EACCES: permission denied Solution: Don't use sudo, fix npm permissions

Server Won't Start

Check:

  1. Dependencies installed? Run npm install first

  2. Port already in use? Close other servers or use different port: PORT=3001 npm run dev

  3. Syntax errors? Check terminal for error messages, fix code errors

Solution: Read error message, fix issue, try again.

Missing Files After Extract

Possible reasons:

  1. Hidden files (enable "Show hidden files" in file explorer, files starting with . are hidden)

  2. Extraction location (check extraction went to right folder, look in parent directory)

Solution: Check extraction settings, show hidden files.

Related: Creating Projects - Start new projects Managing Projects - Organize projects System Requirements - Local setup needs