Updating your app built with ShipFast

ShipFast is a wonderful boilerplate template for building applications quickly (and cheaply).

I’ve used it to build 4 applications so far, here is how I keep updated.

What we are trying to do

It’s easy to start using ShipFast by cloning the template to your own project. However, keeping your project up to date is a little trickier.

From time to time Marc makes updates to ShipFast and you probably want those changes reflected in your own project.

We can’t just pull the template into our project again because this would overwrite any of our app specific code.

Keeping code separate

When building our app it’s important to try and change the code provided by the template as little as possible.

The template has a few basic areas:

• Code in /app

• Code in /components

• Code in /libs and /models

I try hard to not change any code in /app/api and the top level layout.js file. I put my own api files in /app/api/app/xxx and any app specific pages under the /dashboard folder.

For the /components files, I obviously make changes to the text in the files to fit my app, but I try to leave all the html and css alone.

In the /libs I won’t make any changes and in /models I’ll add any app specific models without changing the default models.

Since I am careful about changing the files provided by the template, my work in updating to the latest template files is a lot easier.

Methods for updating

If you follow the ShipFast Discord you’ll see it mentioned that there is a way using Git to pull changes from the original repository.

I’m not good enough with git or trusting enough to use this method and I prefer a more manual approach.

The method I use involves a VS Code plugin called Compare Folders from MoshFeu.

Start with a local copy of ShipFast

First I clone ShipFast locally and keep it updated. I usually do a git pull on my local folder every few weeks.

Then every month or so I’ll spend an hour updating my apps to the latest ShipFast code.

I do this by opening each project in VS Code and selecting the Compare Folder icon in the left navigation.

Then pick the “Click to select a folder” button at the top and pick the official ShipFast repository that I have cloned (and updated) locally.

Then we wait for the compare to run (which shouldn’t take long).

The left hand side should then contain 3 boxes of files that are the results of the comparison. I find it easiest to work from the bottom up on these 3 boxes.

Bottom box - Only In Compared Folder

I will take any new components, images, files, etc. from here by right clicking the file or folder and picking “Copy to my folder”. Usually there is nothing to do here unless a new component is added to ShipFast.

Middle box - Only In My Folder

I mostly ignore these files. These are files I’ve created for my app so of course they don’t exist in the ShipFast repository.

I take a quick look at the file names and expand each folder. These should only be files that I have created, not files that came with the template and I’ve modified.

Top box - Differences

This list takes the most effort so I save it for last.

For every file (except package-lock.json) I review all the changes.

There are 3 basic categories that the differences will fall into.

• I have no app specific changes in the file and can copy the entire file from ShipFast to my project - I use right click “Take Compared File”. This is usually the case if a bug fix is made to a core component in the /app/api, /libs or /models folders.

• I have made app specific changes in the file, but there are additional differences in the code that I did not change from the template - I manually copy and paste the changes into my files. These will be cases where the core components that I have modified have received bug fixes or style changes, mostly in the /components folder.

• All the differences in the files are ones that I changed for my app - I make no changes to these. These will be text changes I made on the landing page files, changes I’ve made to my config.js file, etc. mostly in the /components and /app folders.

After saving a file I modify, the compare will run again and I will double check that the edits are correct.

Conclusion

This method works for me because I do it monthly so there aren’t many changes to check. Also, once I’ve gone through the process for one project, the rest are easy since they will have all the same changes.

This would be much harder if I didn’t keep the official ShipFast files as they are as much as possible. I really don’t modify any files except the components used on the landing page.

I’ve been doing this for 9 months now and I’m pretty happy with the way it works.

Reach out on 𝕏 if you have any feedback. 😀