You may have noticed that a lot of GitHub projects have some badges in their homepage, showing for example the status of their latest build. For a node (JavaScript) project, you can use a few more badges to show the world that everything is in order.
Let’s start with the build status badge. That badge is typically coming from Travis when we’re talking about open source projects in GitHub. That’s because Travis is a free CI service for open source projects and it has a very good integration with GitHub.
Here you can see my Travis homepage. It automatically connects to GitHub and picks up my projects. You can choose for which of your projects you’d like to enable Travis.
In the next screenshot, you can see an example of a failed build.
The badge I’m talking about sits on the top. It’s next to the header and it says “build failing”. That’s pretty clear that something needs to be fixed in this project! Side note: this project is called generator-csharp-cli-app and I’ll be using that name for the rest of the blog post just as a placeholder. Just replace it with your own project name.
How do we add this badge to the project’s homepage in GitHub? That’s typically done in the README.md file. Click the badge on the Travis page and a popup will appear. In there, select “Markdown”. Markdown is the popular formatting language that GitHub also uses. Just copy paste that markdown code into your readme file, usually just below the title so that it appears on the top.
Travis supports many technologies and languages, so this badge isn’t really JavaScript specific. If you’re using GitHub for your open source projects, I’d definitely recommend giving Travis a try and setting it up.
The next badge is specific to JavaScript projects: the node dependencies status badge. This one comes from a service called David, a service that is watching your node.js dependencies. If your dependencies are up to date, you get a green badge. This badge is useful because it offers an indication of how well a project is being maintained.
Just like Travis, David integrates well with GitHub. The markdown code is also similar:
[](https://david-dm.org/ngeor/generator-csharp-cli-app)
Clicking the badge takes you to David’s page that tells you in details what’s wrong with the dependencies:
The final badge is relevant to node.js projects that publish npm packages: the npm version badge. You’d like to tell the world perhaps what your current version is and link to the npm page as well? You can use a service called shields.io for that badge. It supports all sorts of other badges as well, but I haven’t explored them yet. The markdown code for this badge would be:
[](https://npmjs.org/package/generator-csharp-cli-app)
Putting all these badges together, you get a nice homepage for your project:
Hope this helps! Now, it looks like I have some red badges to fix :-)