Configuring Our Project

There are a few things we need to configure to start making the project our own. We’ll make these kinds of changes a lot over the life of our product so you should get familiar with the three places.

Update config.js

Config.js holds a lot of configuration details that ShipFast uses. The various ShipFast template files and helper files all pull from this. This is so you can edit a few settings in one place and have the templates pull their information from it. You’ll see that there are a lot of components in “/components” that we won’t have to touch.

First, change “appName” to your own application name. This should be a short name similar to or matching your domain name but you can include spaces and capitalization here. This is the name of your application that users will see.

Second, change “appDescription” to a longer description of what your application does. This will show in the footer under your appName and also shows in the SEO meta tags.

Third, change “domainName” to your domain name. Just put in the naked domain name without “https://” and without “www”. If you don’t have a domain name yet, just put in the one Vercel generated for you.

The domain name is used for analytics, emails, SEO and a few other things. Your application will work without it for now, but you will need a domain name to collect analytics and send emails if you choose those options.

Update .env.local

Next we’ll edit our environment variables. We’ll start by renaming “.env.example” to “.env.local”. We don’t need to make any changes to this file yet.

Environment variables are secret keys that we don’t want in our GitHub repository and don’t want users to see. They also typically differ between our local development environment and our production environment in Vercel.

After you rename it, you’ll notice that this file turns light gray in VSCode to indicate that it won’t be included in git version control and therefore won’t be sent to GitHub.

If the file doesn’t get sent to GitHub, how will Vercel get these values?

In your Vercel project settings you’ll see a section called Environment Variables. Whenever we make a change to our local .env.local file, we will need to make a corresponding change in our Vercel settings.

For now, just renaming our local file is enough.

Update page.js

NextJS works by building and serving certain files to the user as HTML. These files are React components.

In the simplest scenario, every folder under “app” that has a “page.js” file will be served to the user. So our “/app/page.js” file gets served to the user whenever a user types our domain name in. It’s the root page.

Folders under “/app” like our “/app/dashboard” folder has its own “page.js” file that will be served to users when they navigate or type in our domain name with “/dashboard” at the end.

The “layout.js” files are also important. They take the information in the “page.js” file and wrap it with components common across all pages. this way you don’t need to include duplicate code across pages.

For now, we’ll ignore the “layout.js” file. The defaults provided by ShipFast will work.

ShipFast ships with a lot of landing page helpers that every SaaS project needs but we can’t see them on our site yet. Let’s edit “/app/page.js” and show them. Replace the code in your page.js with what I have below.

import ButtonSignin from '@/components/ButtonSignin';
import CTA from '@/components/CTA';
import FAQ from '@/components/FAQ';
import FeaturesListicle from '@/components/FeaturesListicle';
import Footer from '@/components/Footer';
import Header from '@/components/Header';
import Hero from '@/components/Hero';
import Pricing from '@/components/Pricing';
import Testimonials3 from '@/components/Testimonials3';

export default function Page() {
  return (
    <>
      <Header />
      <Hero />
      <FeaturesListicle />
      <Pricing />
      <Testimonials3 />
      <FAQ />
      <CTA />
      <Footer />
    </>
  );
}

This will show a lot of the default landing page templates on your home page. Go ahead and do “npm run dev” from the VSCode terminal to bring up our website on our local computer. You should see a nice landing page with all of the ShipFast default information but with your app name.

Push Changes to GitHub

Once you have your site running locally, move to the Source Control tab in VSCode and commit your changes to git. Then Sync your changes to GitHub.

Vercel will detect the changes and start a new build. After a few minutes you should see your new landing page live on your domain name.

Customizing the Landing Page

Okay, so your landing page is live, but it’s showing a lot of ShipFast default wording. How can we change that?

We update the wording on the pages by editing the various components under the “/components” folder. If you look in that folder you’ll see a “/components/Hero.js” file. Go ahead and open that up.

One trick I use while editing these files is to keep VSCode open on the left side of my screen and Safari on the right side. If I keep “npm run dev” going while I make my edits, then every time I hit save Safari will update with my changes.

Go ahead and edit all the text in Hero.js that appears on the web page so that your app’s value is clear to users. You can do the same with all the other components in our “page.js” file.

The only exception is the “Pricing.js” file. You’ll notice that there isn’t any text to change in this file. That’s because all of the information displayed by the component comes from the “config.js” file. Go ahead and edit “config.js” and look for the pricing section. You can ignore the priceId section for now, but you can adjust the other entries under pricing to suit your situation.

By default there are 2 pricing sections. If you need more, just duplicate the first section and put it after the last. If you need less, just remove one section. Just remember this needs to be valid JavaScript, so watch the “{“ and “,” characters.

If you ever get stuck editing the template files and you start seeing errors on the screen, just go to GitHub, navigate to Marc’s ShipFast repository and copy the default code back into your file. Another quick way to undo is using VSCode’s Source Control tab and clicking the “undo” button next to the file you messed up.

The trick to programming is to move slowly in measured chunks and test those before moving on. You’ll want to know as soon as possible that you’ve made a mistake that needs to be fixed. So you might:

1. Edit Hero.js, make changes to the text

2. Verify the wording in Safari

3. Commit the changes to git on the Source Control tab

4. Sync those changes to GitHub

5. Repeat for the other component files

Next Steps

Next newsletter we’ll cover setting up a database to collect emails from interested users.

That’s it for our setup in level 4. Don’t forget to sync things to GitHub so the world can see your growing SaaS.

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