Draftbit Tutorials
Draftbit Tutorials
🕸️

Deploying your Draftbit app as a PWA to a Custom Google Domain with Netlify

You can publish your app as a PWA directly in Draftbit and hosted at a Draftbit URL. If you're interested in publishing your app at your own URL, you can do so if you're comfortable exporting your project and working in code/the command line.

To follow along with this tutorial you'll need to have:

  • A Draftbit Pro plan (to access the full project code export)
  • Expo CLI installed
  • A free Netlify account and Netlify CLI installed
  • A Google Domain (you can use the domain service of your choice, we're just using Google in this example)

Export out of Draftbit

Once you've finished your app inside of Draftbit, click the </> Code button at the top-right corner of the Builder to launch the View Code modal. Click the Export App button at the bottom-right of the View Code modal to download a .zip of your project.

image

After you've unzipped your file, navigate into the project directory in the command line. Once you're inside of the directory, run yarn install or npm install to install all of the necessary dependencies.

After the installation has been finished, run expo build:web to generate your PWA build.

image

Once the build is complete, run netlify deploy. Running this command will launch some prompts.

1. Select Create & configure a new site

2. Select your Team

3. Set a site name (optional)

4. Set the publish directory to web-build

image

This initial deployment will be a draft deployment. Once you're ready to link your PWA to your custom domain, run the command netlify deploy --prod to push to production (do not skip this step!)

After running the command, you will be asked for a publish directory and it should be set to web-build again. After you've successfully deployed to production, you're done working in the command line.

image

☝

If you choose to update your PWA, you can push any changes to your deployed app by running the netlify deploy/ netlify deploy --prod commands from the project directory

Google Domain Setup

In Google Domains, go to the Domain overview of the domain you'd like to connect to your PWA.

  1. Go to the DNS tab
  2. Switch to 'Use custom name servers' under the Name servers heading
  3. Add dns1.p03.nsone.net , dns2.p03.nsone.net, dns3.p03.nsone.net, and dns4.p03.nsone.net as your name servers
  4. Save your changes

image

Netlify Setup

Go to your dashboard in Netlify and you should see the app you just deployed appear as a new site under the Sites header.

image

Click into your new site and go to the Domain management > Domains section. In this section you will:

  1. Click Add custom domain
  2. Enter the domain you just configured into the input
  3. Click Verify
  4. Click Yes, add domain

This will take you back to the Domains section of your app where your connected custom domain will appear. If the connection is successful, you'll see the Netlify DNS tag next to the domain. Click on the domain to be taken to the site with your deployed PWA.

image

☝

This won't always be instantaneous! It may take a few minutes for the site to appear on your custom domain.

Resources Expo: Progressive Web Apps