Scaffolding the codebases

Time to get knee-deep in coding, which we will kick-start by using a bit of boilerplate that we're going to scaffold.

Let's revisit the plan a bit.

We are setting up a pipeline to supercharge our capability of producing design, turning it into code, and putting it out there in a live environment for real users to enjoy.

We need several things to be in place for this to happen:

  • Infrastructure and services, for example, GitHub. Most of this we have handled already.

  • A codebase for the component library, from which we can share our work.

  • A codebase for some application to use our components.

The two last parts are what we'll act on in this lesson.

As I have previously told you, the tech stack for our apps will be React, Styled Components, and Storybook.

Install degit#

Degit is a convenient tool to do something that's always been bugging me: when you clone something, you don't necessarily want all the history and branches of whatever you cloned. Using degit, you only get a "shallow clone" of a repo containing the most recent code—perfect for downloading a template!

In your terminal or editor, we need to first install degit on your machine. Run npm install -g degit to make it globally available.

The application#

Next, navigate somewhere on your machine where it's okay to put the two codebases.

Then go ahead and clone the application repository:

Feel free to change my-app to anything you like better.

Verify functionality#

We need to get things running. Run npm install. It will take a moment or two for it to install the dependencies.

Now, run npm start to fire up the Webpack development server. The app will start at the /demo path.

It may not yet be worthy of the Awwwards, but at least we have a skeleton structure in place.

Figma app scaffold

There is also the products view at localhost:8080/products:

Figma app scaffold

And the checkout view (localhost:8080/checkout):

Figma app scaffold

Good job!

Structure#

Take a look at the structure of the project.

Figma component library structure

Start a new discussion. All notification go to the author.