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.
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.
Once the build is complete, run
netlify deploy. Running this command will launch some prompts.
Create & configure a new site
2. Select your Team
3. Set a site name (optional)
4. Set the publish directory to
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.
If you choose to update your PWA, you can push any changes to your deployed app by running the
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.
- Go to the DNS tab
- Switch to 'Use custom name servers' under the Name servers heading
dns4.p03.nsone.netas your name servers
- Save your changes
Go to your dashboard in Netlify and you should see the app you just deployed appear as a new site under the Sites header.
Click into your new site and go to the
Domain management > Domains section. In this section you will:
Add custom domain
- Enter the domain you just configured into the input
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.
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