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.

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:

npx degit mikaelvesavuori/acmecorp-potted-plants-app my-app

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.

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

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

Good job!

Structure#

Take a look at the structure of the project.