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.
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.
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.
We need to get things running. Run
npm install. It will take a moment or two for it to install the dependencies.
npm start to fire up the Webpack development server. The app will start at the
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
And the checkout view (
Take a look at the structure of the project.