If you want to create basic React components and publish them into npm as an open source project without spending time on configuration, you can simply follow the steps and publish your own component.
Table of Contents
- How to Install
- How to Use
- Component Test
- Publishing your React Component to npm
- Deploy your React Component Demo to GitHub Pages
- Auto-deploy to Github Pages with Travis CI
- Author
-
Clone to repository into your local device
First of all, you have to clone the repository in your own working environment to get started.
git clone git@github.com:fatihtelis/react-component-boilerplate.git
Navigate the root folder of your component (You can rename the folder if you want in these step)
cd react-component-boilerplate
Don't forget to remove .git folder and init your own git config.
rm -rf .git git init
-
Install packages
You have to install packages before constructing your component in your root folder.
npm install
or
yarn
-
Start your development server
You can see the basic scripts in
packages.json
file. Use the following command to start your development environment;npm run start
or
yarn start
After starting navigate through
localhost:3000
from your browser's address bar and start building your component right away.
There are 2 folders in the root of the repository, one is src
and other is examples
.
src is the main folder for code belongs to your component.
examples is the demo folder for displaying your component as an HTML page in localhost:300 on development and on GitHub pages.
SASS Loader is added to the project as default style loader. You can add your custom component styles in src/component.scss
file and it will transpile your .scss file into .css when it is published to /dist folder before publishing to npm. Users can access and import the custom styles by importing;
import 'react-component-boilerplate/dist/component.css'
Alternatively, you can import this css file from your component directly to make it default. People who use your package do not need to add css file manually by this way. But don't forget, eslint may show you an error since this file is produced after build. So you may disable eslint error for this particular import.
Add these lines to /src/index.js
;
// File is created during build phase and placed in dist directory
// eslint-disable-next-line import/no-unresolved
import './component.css';
Jest and Enzyme is added for testing the component. You can write your own test on component.test.js file and check the results by running the script;
npm run test
or
yarn test
You have to transpile your code with Babel before publishing it to npm. prepublishOnly script auto-transpile the code before publishing. So, you only need to publish your component to the npm directory. You have to login to your npm account first from terminal first:
npm login
After signing in with your username, password and email address, you are ready for the last step.
npm publish
GitHub Pages offers developers to deploy their open source project demos into their directory. You can use the following scripts to deploy your demos into Github Pages.
npm run publish:gh-pages
or
yarn publish:gh-pages
It opens a new branch in your project called 'gh-pages' and publishes your demo. You can access your demo link from:
https://<github-username>.github.io/<github-repo-name>/
For this repo, the demo is available at:
https://fatihtelis.github.io/react-component-boilerplate/
If you don't want to update your component demo manually on GitHub Pages by running "publish:gh-pages" script each time you make a change on your repo, you may use Travis CI integration.
.travis.yml
file includes a configuration to publish your code to GitHub pages. All you need to do is adding a variable called "GITHUB_TOKEN" to Travis CI dashboard from settings of related repo. You can generate the token from GitHub by navigating "Settings > Developer Settings > Personal access tokens".
When you push your code to master branch on GitHub, Travis CI will publish your demo on GitHub Pages if the repo is builded successfully and passing tests. For details about Travis CI, please check:
Travis CI Docs for GitHub Pages Deployment
![]() |
Fatih Telis http://fatihtelis.com |