Creating Your Project

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

Part 1 - Getting Started Building

This post will continue with setting up our project. You’ll end up with your project running locally.

Quick Setup

Open up the Ship Fast Documentation and go through the Get Started section.

Detailed Setup

I’m going to walk through this using a domain I bought called ShipFastTutorial.com.

ShipFast is a private GitHub repository that you gain access to when you buy ShipFast

Once you are granted access, accept the GitHub invitation and you’ll see the repository in your GitHub account. You only have read access, so don’t worry, you can’t mess anything up with the official repository.

Clone The Repository

You’ll need find the command line tool that comes with your operating system. On macOS this is called Terminal, on Windows it’s called Command Prompt.

The first command we will run is the “git clone” command.

When you run the command “git clone …” you are asking git to make a copy of the official repository on your local computer.

The next step for your project is to create the initial source code. We’ll take a copy of the ShipFast template and then use the “cd” command to enter the new folder.

Replace “[YOUR_APP_NAME]” (including the []) with your actual app name.

You don’t want spaces or any special characters in your name. I usually use all lower case letters and separate words with “-”. No one will see this name except you. In my case I’ll use “ship-fast-tutorial”.

git clone https://github.com/Marc-Lou-Org/ship-fast.git [YOUR_APP_NAME]
cd [YOUR_APP_NAME]

After running these command, my terminal on macOS looked like this.

This will create a copy of the template on your local folder with all the source you need to start. This copy is still connected to the official template GitHub repository, so we’ll remove that with this Git command. “origin” is the default name of the remote repository at GitHub

git remote remove origin

After running all these commands on my local computer my terminal looks like this.

Open The Code Editor

Now we’ll open the Visual Studio Code tool (which I’ll call VSCode from now on) and open our new project. Your window should look something like this.

We will use VSCode for almost everything we do. VSCode comes with a lot of tools built in, but we’ll just stick to the basics for now.

On the left there is a menu system for switching between different modes in VSCode. By default you are in the Explorer mode indicated by the icon at the very top left.

Next to the menu on the left is an outline of all the files in your project. These were all created by the template. If you take a look through all the files and folders you can see all the code that you don’t have to write. This is the power of using a template.

With a few changes to this set of files you can have a website available on the web that allows logins (using email or Google), purchases of your product and sending/receiving emails. It also includes all the code to put up a decent SaaS landing page.

Next we will need to enter some terminal commands (like we did earlier). VSCode has a built in terminal we can use for this. It’s easier for a lot of people to use everything from one app, so can close your terminal/command prompt tool since we won’t need to use it anymore.

Hit control-` to show the Terminal window (that’s a backtick character not an apostrophe) or use View → Terminal from the menu.

Initial The Project

We need to initialize our project and bring in all the libraries needed to run our project. We’ll do this with this command. Type it into the terminal window and hit enter.

npm i

After running this my terminal window in VSCode looks like this.

Ignore the security warning for now, we’ll clean that up later. If your screen looks like this, then you have successfully installed all the code and libraries you need to run the project.

Run Your Project Locally

The command for running the project is:

npm run dev

You’ll memorize this over time because this will be the number 1 command you type into the terminal. After entering this command and hitting enter, your terminal will respond with this.

You now have your app running on your local computer. This is a big step even though it doesn’t do anything yet. Developing an app is all about taking small steps and verifying them. If something breaks you need to know as soon as possible to narrow down the potential causes.

If you open a web browser on your local computer and type http://localhost:3000 into the address bar at the top you should see something like this.

You’ll find it quicker to hold down the command key on macOS/control key on Windows and clicking the link for http://localhost:3000 in the terminal window on VSCode instead of launching your browser and typing in the address. You’ll do this a lot too.

Hitting control-c in the terminal window will stop the local server. You might have to click the terminal window to make it active first.

Connect To GitHub

The last thing we need to do is connect our new project to GitHub. This will safely store our app’s code in the cloud and allow other services to gain access to that code.

If you pick the third menu option on the left, you’ll go into Source Control mode. Since you don’t have this project connected to GitHub, VSCode will ask you to publish it.

Pressing the “Publish Branch” button will most likely ask you to log into GitHub and allow VSCode to have access. Just login and grant access. You should only need to do this once on your local computer.

VSCode will then ask if you want to publish to a private or public repository.

It’s important to pick private here. We don’t want everyone to have access to our project’s source code. Even if it’s just a fun project or sample, we don’t want to give everyone access to the template code. Remember everything in the ShipFast template is in your project.

Once it’s published you’ll get a little notification in the bottom right corner of VSCode.

Your project is now connected to your GitHub account and backed up in the cloud.

Finish Step 2

Congratulations on getting this far. It may not seem like much, but getting this far means your source code is in the correct starting point and all your tools are setup correctly.

Next time we’ll connect your source code to Vercel so the world can see your project.

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