Creating a New Instance for React
So the quickest way of getting our Storybook React project setup is to create a directory for your project, I'll be using the directory
Storybook on my desktop but you can initialise the project anywhere you feel appropriate.
Within your project directory, we need to create a
package.json file for our dependencies to be managed. We can do this by running the following -
Following the interactive questions to configure the
After setting up your package file, within your directory, you'll want to run the command -
npx -p @storybook/cli sb init --type react
This command will install the required dependencies and configuration files we need for Storybook to run on our machine.
If for any reason this fails, please refer to the official Storybook documentation on how to complete a manual installation - https://storybook.js.org/docs/guides/guide-react/
If everything went well, you'll see some new directories in your project, these directories contain the core config files for the global project.
As well as these config files, we have access to some example stories and components to give us a structure to follow when composing our own stories.
Starting the development server
With the new assets and files, you'll then need to run the following to start a local development server -
npm run storybook
You should now have a React Storybook instance development server available at
I won't be going into how we compose stories just yet, that will come up in a following lesson of this course, for now, take reference of how to navigate to the development server and how we run our storybook instance in development mode.
Creating a Github Repository for the Project
Finally, we will want to create a Github repository for our Storybook project.
Some developers may want to tightly couple the storybook instance with their product repository but I invite you to hold off on doing so as separating the two allows the design system to be used across many products and not isolated to a single system or site.
So to create a git instance, we first need to run the following within the root directory of our project (
Our project is now a git initialised project, but before we go about committing our project to a git repository, we first want to ignore specific directories related to our packages.
This is because by committing directories such as
node_modules to our repository, we are potentially committing tens of thousands of files which are expected to change frequently. Insteadm we will use the
package.json file to manage these files and run
npm install whenever cloning the codebase or deploying the codebase to a server. Keeping the files outside of the codebase until installed.
To ignore common directories I use the following tool - https://www.gitignore.io/ to generate a file placed in the root directory of my project called
Alternatively, you can copy and paste the settings to a
.gitignore file which I get when entering windows, macOS, node on the site https://www.gitignore.io/ -
# Created by <https://www.gitignore.io/api/node,macos,windows> # Edit at <https://www.gitignore.io/?templates=node,macos,windows> ### macOS ### # General .DS_Store .AppleDouble .LSOverride # Icon must end with two \r Icon # Thumbnails ._* # Files that might appear in the root of a volume .DocumentRevisions-V100 .fseventsd .Spotlight-V100 .TemporaryItems .Trashes .VolumeIcon.icns .com.apple.timemachine.donotpresent # Directories potentially created on remote AFP share .AppleDB .AppleDesktop Network Trash Folder Temporary Items .apdisk ### Node ### # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* lerna-debug.log* # Diagnostic reports (<https://nodejs.org/api/report.html>) report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json # Runtime data pids *.pid *.seed *.pid.lock # Directory for instrumented libs generated by jscoverage/JSCover lib-cov # Coverage directory used by tools like istanbul coverage *.lcov # nyc test coverage .nyc_output # Grunt intermediate storage (<https://gruntjs.com/creating-plugins#storing-task-files>) .grunt # Bower dependency directory (<https://bower.io/>) bower_components # node-waf configuration .lock-wscript # Compiled binary addons (<https://nodejs.org/api/addons.html>) build/Release # Dependency directories node_modules/ jspm_packages/ # TypeScript v1 declaration files typings/ # TypeScript cache *.tsbuildinfo # Optional npm cache directory .npm # Optional eslint cache .eslintcache # Optional REPL history .node_repl_history # Output of 'npm pack' *.tgz # Yarn Integrity file .yarn-integrity # dotenv environment variables file .env .env.test # parcel-bundler cache (<https://parceljs.org/>) .cache # next.js build output .next # nuxt.js build output .nuxt # react / gatsby public/ # vuepress build output .vuepress/dist # Serverless directories .serverless/ # FuseBox cache .fusebox/ # DynamoDB Local files .dynamodb/ ### Windows ### # Windows thumbnail cache files Thumbs.db Thumbs.db:encryptable ehthumbs.db ehthumbs_vista.db # Dump file *.stackdump # Folder config file [Dd]esktop.ini # Recycle Bin used on file shares $RECYCLE.BIN/ # Windows Installer files *.cab *.msi *.msix *.msm *.msp # Windows shortcuts *.lnk # End of <https://www.gitignore.io/api/node,macos,windows>
Pushing Our Project to a Github Repository
Now although git and Github may share similar names they are not the same.
Git is version control, it is the core technology used to track, manage and edit your codebase.
Github is one of many platforms used to host the git information and host project files.
You can use git across Github, Bitbucket, Gitlab and more git hosting providers. In this course, we will use Github to create free public and private repositories but the same concepts can be applied to your platform of choice.
With a Github account, you can create a new repository or repo for short by navigating to - https://github.com/new
You'll be asked to set a repository name, for which I will use the name 'storybook-atomic-design-react'.
Next, you can set an optional description.
I'll be setting my repository privacy to public for the sakes of this course but you can set yours to private if you are working on a sensitive project or commercial product.
I'll skip over setting up a readme.md for now, but it's helpful to use one to document your installation process to ease the onboarding process for those contributing to the project.
You'll then be presented with a quick start guide by Github.
We can use a slightly modified command-line example to help us get our code pushed to the repository.
git remote add origin email@example.com:<github-username>/<project-name>.git git add -A git commit -m "Initialise Repository" git push -u origin master
Now you should see a success message in your command line and have access to your Storybook project on Github.
We now have a version-controlled Storybook React project, ready for us to start customising with our own React components and story files to document our components.