Web Publishing (Local)

One-click publishing

Draftbit provides a one-click publishing feature that allows you to publish your app to the web with a single click. Learn more about one-click publishing.

Publishing your app as a Web App might seem complex, but this guide will walk you through each step in simple terms. Don’t worry if you’re not familiar with technical concepts – we’ll explain everything along the way.

Prerequisites

Before you can publish your app as a Web App, you’ll need to set up an account and install some software. Think of these as the basic tools you need:

Required Accounts

• Expo Account - This is a free service that helps build and host your app. It’s like having a construction crew and web hosting service all in one.

Required Software

• Node.js - This is a tool that helps run the code needed to build your app. Download the “LTS” version (which stands for “Long Term Support” - the most stable version).
• Git - This helps manage your app’s code files. It’s like a filing system for programmers.

Using the Console

Throughout this guide, you’ll need to use something called a “console” or “terminal.” This is a text-based way to give instructions to your computer. Don’t worry - it’s easier than it sounds!

Finding Your Console

Mac

1. Press Command + Space CommandSpace Command + Space CommandSpace Command + Space CommandSpace to open Spotlight search
2. Type “Terminal” and press Enter
3. A black or white window will open - this is your console

Windows

1. Press Windows + R WindowsR Windows + R WindowsR Windows + R WindowsR
2. Type “cmd” and press Enter
3. OR: Press Windows + X WindowsX Windows + X WindowsX Windows + X WindowsX and select “Command Prompt” or “PowerShell”

Linux

1. Press Control + Alt + T ControlAltT Control + Alt + T ControlAltT Control + Alt + T ControlAltT
2. OR: Look for “Terminal” in your applications menu

What is EAS?

EAS (Expo Application Services) is like a specialized factory for apps and Web Apps. Instead of needing complex software on your computer, EAS builds your app in the cloud (on Expo’s powerful computers) and can even host your Web App for you.

Think of it this way: instead of baking a cake in your kitchen and then finding a place to serve it, you give the recipe to a professional bakery that also runs a café - they bake it and serve it to customers for you.

Install EAS CLI

First, you need to install a tool that lets you communicate with EAS. This tool is called “EAS CLI” (CLI stands for “Command Line Interface” - basically a way to give text commands to your computer).

1. Install EAS CLI

   Open your console (see instructions above) and copy-paste this command, then press Enter:

   npm i -g eas-cli

   This downloads and installs the EAS tool on your computer. The process might take a few minutes.

2. Sign in to Expo

   After installation, you need to log in to your Expo account. In the same console window, type:

   eas login

   The console will ask for your Expo username and password. Type them and press Enter after each one. Don’t worry if you can’t see the password as you type - this is normal for security reasons.

Download Your Project

After building your app in Draftbit, you’ll have a folder containing all your app’s code. Here’s how to prepare it:

1. Download and Open Your Project

   1. Download your app’s code from Draftbit
   2. Extract the ZIP file to a location you’ll remember (like your Desktop or Documents folder)
   3. You can open this folder in a code editor if you have one (like VS Code), but it’s not required

2. Navigate to Your Project in the Console

   You need to tell the console where your app files are located. In your console:

   1. Type cd (that’s “cd” followed by a space)
   2. Drag your project folder from your file manager into the console window
   3. Press Enter

   Your console should now show the path to your project folder.

3. Install Project Dependencies

   Dependencies are like ingredients your app needs to work properly. Install them by typing:

   npm install

   This downloads all the necessary components for your app. It might take a few minutes.

4. Check Everything is Working

   Run this command to make sure everything is set up correctly:

   npx expo-doctor --check

   This is like a health check for your app. If it finds any issues, it will suggest how to fix them.

Set Up Your Project

Before publishing, you should customize your app’s name and other details.

1. Updating Your App Name

   1. In your project folder, find a file called app.json
   2. Open it with any text editor (even Notepad works)
   3. Look for a line that says "name": "..." and change the text between the quotes to your app’s name

   For example:

   "name": "My Shopping List App"

2. Setting Your App Slug

   The “slug” is like your app’s unique identifier. It should be lowercase with no spaces:

   "slug": "my-shopping-list-app"

   Important: Once you publish your app, you can’t change the slug, so choose carefully!

3. Initialize EAS for Your Project

   In your console, run:

   eas init

   This connects your project to EAS. You’ll be asked to choose which Expo account should own this project. Use the arrow keys to select your account and press Enter.

4. Configure EAS Build

   EAS Build is the service that actually creates your Web App files. Think of it as setting up the assembly line in that factory we mentioned earlier.

   In your console, run:

   eas build:configure

   This sets up the configuration for web deployment. You’ll see some text appear - this is normal and means EAS is preparing your project.

Deploy Your Web App

Now comes the exciting part - actually creating your Web App and making it available online!

1. Generate Your Web App Files

   First, you need to create the files that will become your Web App. In your console, run:

   npx expo export --platform web

   This command takes your app and converts it into Web App files. These files will be saved in a folder called dist in your project directory. This process usually takes a few minutes.

   Think of this step like converting your recipe into the actual finished product - your app becomes a collection of web files that browsers can understand.

2. Deploy to the Web

   Now you’ll upload your Web App to Expo’s servers so people can visit it. In your console, run:

   eas deploy --prod

   This command will:

   1. Upload your Web App files to Expo’s servers
   2. Give you a web address (URL) where people can visit your app
   3. Make your app available to anyone with an internet connection

   You’ll be asked to choose a preview URL for your project. You can usually just press Enter to accept the suggested URL.

3. Share Your Web App

   Once the deployment is complete, you’ll receive a web address (URL) that looks something like https://your-app-name.exp.host. This is your Web App’s address - you can share this link with anyone, and they’ll be able to use your app in their web browser!

What Makes This Different from Mobile Apps?

Unlike mobile apps that need to be downloaded from app stores, your web app can be used immediately by anyone with a web browser. People can:

• Visit your Web App on their phone, tablet, or computer
• Use it without downloading anything
• Bookmark it like any other Web App
• Share the link with others easily

Manage Your Web App

Congratulations! Your app is now live on the web. Here’s what you can do next:

Updating Your Web App

When you make changes to your app in Draftbit:

1. Download the updated code
2. Follow the same steps to export and deploy
3. Your Web App will be updated with the new changes

Monitoring Your Web App

• Your Web App will stay online as long as your Expo account is active
• You can check how many people are visiting through Expo’s dashboard
• The Web App works on all devices and browsers automatically

Getting Your Own Domain (Optional)

If you want a custom web address (like www.myapp.com instead of the Expo URL), you can:

1. Purchase a domain name from services like GoDaddy or Namecheap
2. Set up domain forwarding to point to your Expo URL
3. This step is optional - your Expo URL works perfectly fine for sharing

Need Help?

If you get stuck at any point, remember that Draftbit’s one-click publishing can handle all of these steps automatically. You can also find more detailed technical information in Expo’s deployment documentation.

Publishing your first web app is a fantastic achievement - you’ve just made your creation available to anyone in the world with an internet connection!