Sharing Your Project With The World

This is a continuation of my series on setting up a project with ShipFast.

Level 1 - Getting Started Building

Level 2 - Creating Your Project

Follow this guide to unlock level 3!

Unlock Level 3

In this guide we’ll pick up where we left off on level 2 and we will use Vercel to share our project with the world. All for free!

Once we have our project running locally, the next step is to connect Vercel to your GitHub repository and connect your domain name to Vercel.

Vercel Connection

Login to your Vercel account and click the “Add New” button and select “Project” from the drop down.

Vercel will ask you to connect to your GitHub account, so select “Continue with GitHub”.

After logging into GitHub and allowing Vercel to have access, you should be presented with a list of repositories on GitHub. If you’ve been working on your project from the last post, your project should be listed at the top. Hit the “Import” button next to your project’s repository.

Make sure to connect to your GitHub repository, not Marc’s ShipFast repository.

You’ll be presented with the “Configure Project” screen. All of the defaults should be correct, but I always verify that the project name is correct and the Framework Preset is “Next.js”. Then hit the “Deploy” button.

Vercel will now grab your source from GitHub, build it on their servers and deploy it to their web servers. This may take a minute or two. If all goes well you should see something like this. If so go ahead and hit the “Continue to Dashboard” button.

You’ll be brought to the main project overview screen which should look something like the following. You’ll see under the Domains section that there is a url with your project name ending with “vercel.app”. If you click this link you’ll see your project live on the internet. Congratulations.

You only need to make this connection once per project. From now on whenever you “push” your local changes to GitHub, Vercel will automatically detect those changes are rebuild your app. We’ll do this in the next post.

Assign Our Domain Name

Our next step is to connect the domain name we bought in step 1. You could share the domain name assigned by Vercel, but that will be difficult for people to remember and find. Using our purchased domain name will make it easier to share our project.

However, this part really is optional. If you are just creating something for fun you could continue using the Vercel domain.

If you are ready to connect your domain name, hit the “Domains” button. This takes us to the Domains tab on the Settings screen.

Type your domain name into the input box and click the “Add” button.

Vercel will ask how you want to access your site. You can either access the “www” domain or the “naked” domain. If you select the first option, users entering your domain name without the “www” at the front will seamlessly get the “www” domain in their address bar. I like this better and Vercel recommends it, so hit the “Add” button.

Vercel will now attempt to verify that your DNS settings are correct. Obviously they are not since we haven’t told our registrar (PorkBun) to update. Vercel will also tell you that you need to add 1 DNS record for the main domain name and 1 DNS record for the “www” domain name. We’ll start with the first “A” record and add it to PorkBun. You can hit the little copy button to the right of the A record details or select and copy the values.

Login to your PorkBun account and find the domain details for your domain name. We want to hit the “Edit” button under DNS Records.

First we’ll need to scroll down a bit until we see the existing DNS records. PorkBun has created some default DNS entries that we need to delete. Find the two below for your domain and delete them if they exist.

We want to leave the other entries. The existing MX DNS entries allow people to send email to you and the TXT DNS entries allow for emails you are sending to be validated and not counted as spam.

If you scroll back up, you’ll see the DNS entry form. It asks for a Type and we’ll pick “A - address record” and then copy our Vercel A record information into the “Answer” input box. Don’t mistakenly copy it into the “Host” input box, that one stays blank. We leave it blank because this A record is for the naked domain name, i.e. https://shipfasttutorial.com. Note there is nothing between the https:// part and your domain name. Then hit the “Add” button.

If you now go back to Vercel (you might need to wait a bit for it to refresh), you’ll see that Vercel has recognized the DNS changes you made and has accepted it as a “Valid Configuration”. If this doesn’t happen within a minute or so you’ll need to go back and verify that you entered the right information for the A record in PorkBun.

We’ll repeat the same process for the CNAME record. This directs PorkBun to send any traffic to your domain starting with “www” to Vercel as well. Copy the DNS entry information for CNAME and head back to PorkBun. This time select CNAME as the Type, enter “www” (without the quotes) into the Host input box and paste your DNS entry information into the Answer input box. When it looks good, hit the “Add” button.

Then head back to Vercel and look for the “Valid Configuration” message.

Congratulations!

This step only happens once per project.

Generating SSL Certificates

Since we are using Vercel, this will happen automatically. Adding an SSL certificate to our domain allows us to use https instead of http. This makes traffic to our site secure. This doesn’t mean our app is secure, that part is up to us.

This step used to take a lot of work and money. Thanks to open source projects and Vercel’s setup this is handled automatically for us.

Vercel will also automatically renew our SSL certificates as needed.

Summary

Our domain is now connected to our project and our project is visible to the world. You can try it out by typing your domain name into the address bar of a browser.

If your project doesn’t come up, you may have to wait a few hours for everything to sync up on the servers. They say this can take up to 48 hours, but I’ve never had it take more than 1-4 hours.

That’s it for our setup in level 3. All of this is one time setup stuff. From now on we’ll make changes to code on our local computer and send it to GitHub. Vercel and PorkBun will handle all the rest.

If you have questions or suggestions, please contact me by email, X, Discord, etc.