Cloning Your Web App and Developing Locally

This article is building on top of our Stackbit project created in From Zero to Web App in Under 60 Seconds.

So, here we are… We have our “application” deployed. Although, at this point, it may be more of a web site than a web app. Let’s make some changes!

As you may have gathered by now, you can make basic changes to the site using NetlifyCMS. Just visit https://{yoursite-domain}/admin to manage site content.

But let’s say we want to make some major changes. Let’s say instead of changing some links in the menu, we want to change the entire layout. In the screenshot below, you can see we’ve got a hamburger menu tucked away in the right side of the page. This is fine for smaller screens, but let’s make sure this is expanded across the top of the page on larger screens.

Let’s get into it:

Clone the GitHub Repository
During the creation of your Stackbit site, a GitHub repository was automatically created for you. Log into GitHub. Open the repository. Click on the “Clone or Download” button (shown below) and copy the link.

Open your editor of choice. I’m using Visual Studio Code, but you could use Atom, Sublime, etc.

From within the editor, open the folder where you’d like the repo cloned to. Open the terminal and run the following command:

git clone https://github.com/{username}/{project-name}.git

After a few seconds, the code from your repository should be cloned onto your computer.

Install the Package Dependencies
This part is easy. Open your recently cloned project in Visual Studio Code. Run the following command:

npm install

And wait while all of the packages are installed.

Connect Local Instance to Stackbit
You can get excited now, because we’re almost there. Before we get ahead of ourselves, though, we need to make sure that our local codebase and our Stackbit project can talk to each other to make sure that they’re always in sync. To do this, go to your Stackbit dashboard and copy your API key.

Then return to Visual Studio Code and run the following command:

export STACKBIT_API_KEY={your-stackbit-api-key}

After doing this, you will be able to pull site contents and updates made from within Stackbit by running the command found in your projects README:

npx @stackbit/stackbit-pull --stackbit-pull-api-url=https://api.stackbit.com/pull/{your-site-extension}

Start ‘er up!
Ok, now we have the the boring stuff out of the way. We’ve cloned the repository from GitHub to our local machine. We’ve installed the package dependencies. We’ve added our API key to the environment variables to pull updates from Stackbit. Now let’s run the project locally! From within Visual Studio Code, run the following command:

npm run development

Open a web browser and browse to http://localhost:8000/. Do you see your site?

Edit locally
Now, that we have our app banging on all cylinders locally. Let’s make some changes and then push our changes back to our GitHub repository.

For the sake of time, I’ll spare the details on the changes. You can make whatever changes you want! I just updated the Header file and some of the sass to display my links across the top of the page when the screen is larger (tablet, desktop) and the hamburger menu when it’s mobile-sized.

Stage, Commit, and Push
Once you’ve made your changes and tested them locally. Go to “Source Control” within Visual Studio Code. Write a message describing the changes you’ve made. Stage the files you wish to upload. Then click the checkmark to commit them.

After the desired changes are committed, you can run the following command:

git push origin

This will push all of your code changes to your GitHub repository. Stackbit / Netlify will automatically pick up these changes and update your live site accordingly! Pay attention to the url in the image below (hint: it’s live).