Using Azure Boards with GitHub

Damian speaks with Alex Nichols about how to integrate Azure Boards with your GitHub project. As your organization and projects grow it can get challenging to stay focused on what’s most important next and organize the various types of work involved to make progress.

Damian speaks with Alex Nichols about how to integrate Azure Boards with your GitHub project. As your organization and projects grow it can get challenging to stay focused on what’s most important next and organize the various types of work involved to make progress.

Now you can integrate Azure Boards with your code repository on GitHub to reduce the integration tax of using multiple systems by simply mentioning work items in your commits or pull requests. Alex shows how you can even make cards move across your Kanban board by merely merging a pull request!


Learn More

AZ-300 Azure Architecture Technologies Certification Exam

Microsoft AZ-300: Azure Architect Technologies

Microsoft Azure - Beginner’s Guide

Why Azure is Better Than AWS

Five Azure services every developer should know

Build Productive Python Web Apps with VS Code and Azure

Build and Deploy a Node.js Application into Azure Web Apps Using Azure DevOps (CI/CD)

Build and Deploy a Node.js Application into Azure Web Apps Using Azure DevOps (CI/CD)

This post is as an introduction to Azure DevOps. If you're new to this topic, check out a helpful DZone article&nbsp;<a href="https://dzone.com/articles/introduction-to-azure-pipelines?preview=true" target="_blank">here</a>.

In this tutorial, we look at how to get a Node.js app up and running and then deploy it to an instance of Azure DevOps.

This post is as an introduction to Azure DevOps. If you're new to this topic, check out a helpful DZone article here.

We'll use an azure-pipelines.yml file at the root of the repository. Get this file to build the Node.js application using CI (Continuous Integration) Build.

Follow the instructions in Create your build pipeline to create a build pipeline for your node application.

Steps:

  • The agent pool needs to be selected on Microsoft-hosted agents. This is the VM where the build runs. If the hosted agent is not working, use the self-hosted agent machine as a host.
pool:
  name: Hosted Ubuntu 1604
  demands: npm

  • The agent pool needs to be selected on Microsoft-hosted agents. This is the VM where the build runs. If the hosted agent is not working, use the self-hosted agent machine as a host.
steps:
- task: [email protected]
  displayName: 'WhiteSource '
  inputs:
    cwd: 'cctitan-ui-code'
    extensions: '.json .js .ts .css .html'
    productName: UIcode
    WhiteSourceService: 'cc-titan'
  enabled: false

  • The agent pool needs to be selected on Microsoft-hosted agents. This is the VM where the build runs. If the hosted agent is not working, use the self-hosted agent machine as a host.
- task: [email protected]
  displayName: 'Use Node 8.x'
  inputs:
    versionSpec: 8.x

  • The agent pool needs to be selected on Microsoft-hosted agents. This is the VM where the build runs. If the hosted agent is not working, use the self-hosted agent machine as a host.
task: [email protected]
  displayName: 'npm install'
  inputs:
    workingDir: 'cctitan-ui-code'

  • The agent pool needs to be selected on Microsoft-hosted agents. This is the VM where the build runs. If the hosted agent is not working, use the self-hosted agent machine as a host.
- task: [email protected]
  displayName: 'install angular [email protected]'
  inputs:
    command: custom
    workingDir: 'cctitan-ui-code'
    verbose: false
    customCommand: 'install -g @angular/[email protected] '

  • The agent pool needs to be selected on Microsoft-hosted agents. This is the VM where the build runs. If the hosted agent is not working, use the self-hosted agent machine as a host.
- bash: |
   ls /home/vsts/work/1/s
   cd cctitan-ui-code 
   ls
   ng --version
   ls
   ng build
   ls

  • The agent pool needs to be selected on Microsoft-hosted agents. This is the VM where the build runs. If the hosted agent is not working, use the self-hosted agent machine as a host.
- task: whitesource.ws-bolt.bolt.wss.WhiteSource [email protected]
  displayName: 'WhiteSource Bolt'
  inputs:
    cwd: 'cctitan-ui-code'

  • The agent pool needs to be selected on Microsoft-hosted agents. This is the VM where the build runs. If the hosted agent is not working, use the self-hosted agent machine as a host.
- bash: |
 cd CCtest
 npm install karma karma-jasmine karma-chrome-launcher karma-jasmine-html-reporter karma-coverage-istanbul-reporter
 npm install karma-coverage --save-dev
 npm install karma karma-coverage
 ng test --watch=false --code-coverage
displayName: 'CodeCOverage tests'

  • The agent pool needs to be selected on Microsoft-hosted agents. This is the VM where the build runs. If the hosted agent is not working, use the self-hosted agent machine as a host.
- task: [email protected]
  displayName: 'Archive cctitan-ui-code/dist'
  inputs:
    rootFolderOrFile: 'cctitan-ui-code/dist'
    includeRootFolder: false

  • The agent pool needs to be selected on Microsoft-hosted agents. This is the VM where the build runs. If the hosted agent is not working, use the self-hosted agent machine as a host.
- task: [email protected]
  displayName: 'Publish Artifact: drop'

Publish the test results to Azure pipelines or TFS when tests are executed to provide complete test reports and analytics. Use the test runner that supports the required test results format. Some specific result formats include JUnit, NUnit, and Visual Studio Test (TRX). This task will generate the JUnit XML formats, and Azure DevOps Build will use this XML file in its build task to grab the test results and publish to the dashboard summary of the build.

steps:
- task: [email protected]
  displayName: 'Publish Test Results **/test-results*.xml **/e2e-results-junit*.xml '
  inputs:
    testResultsFiles: |
     **/test-results*.xml
     **/e2e-results-junit*.xml
    mergeTestResults: true
  continueOnError: true
  condition: succeededOrFailed()

  • The agent pool needs to be selected on Microsoft-hosted agents. This is the VM where the build runs. If the hosted agent is not working, use the self-hosted agent machine as a host.
steps:
- task: [email protected]
  displayName: 'Deploy Azure App Service'
  inputs:
    azureSubscription: '$(Parameters.ConnectedServiceName)'
    appType: '$(Parameters.WebAppKind)'
    WebAppName: '$(Parameters.WebAppName)'
    TakeAppOfflineFlag: true

Further Reading

The Complete Node.js Developer Course (3rd Edition)

Build a Node.js Application Using Azure DevOps (CI/CD)

How you can do continuous delivery with Vue, Docker, and Azure

Originally published by  Sudheer Mareddy at dzone.com


Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Build a Node.js Application Using Azure DevOps (CI/CD)

Build a Node.js Application Using Azure DevOps (CI/CD)

In this tutorial, we look at how to get a Node.js app up and running and then deploy it to an instance of Azure DevOps.

In this tutorial, we look at how to get a Node.js app up and running and then deploy it to an instance of Azure DevOps.

We’ll use an azure-pipelines.yml file at the root of the repository. Get this file to build the Node.js application using CI (Continuous Integration) Build.

Follow the instructions in Create your build pipeline to create a build pipeline for your node application.

Steps:

  • The agent pool needs to be selected on Microsoft-hosted agents. This is the VM where the build runs. If the hosted agent is not working, use the self-hosted agent machine as a host.
pool:
  name: Hosted Ubuntu 1604
  demands: npm

  • This task detects all open source components in your build, security vulnerabilities, and scans for libraries and outdated libraries (including dependencies from the source code). You can view it at the building level, project level, and account level.
steps:
- task: [email protected]
  displayName: 'WhiteSource '
  inputs:
    cwd: 'cctitan-ui-code'
    extensions: '.json .js .ts .css .html'
    productName: UIcode
    WhiteSourceService: 'cc-titan'
  enabled: false

  • Install Node.js for the specified path of your project. A specific version of your node needs to mention it, or else specify multiple versions of a node on a build and test application.
- task: [email protected]
  displayName: 'Use Node 8.x'
  inputs:
    versionSpec: 8.x

  • Use the npm task to install and publish npm packages. Make sure that the working directory contains a package.json file.
task: [email protected]
  displayName: 'npm install'
  inputs:
    workingDir: 'cctitan-ui-code'
    verbose: false

  • Install the latest version of Angular CLI using npm. Later, use the ng tool from other scripts.
- task: [email protected]
  displayName: 'install angular [email protected]'
  inputs:
    command: custom
    workingDir: 'cctitan-ui-code'
    verbose: false
    customCommand: 'install -g @angular/[email protected] '

  • Use a bash script task to write shell commands for checking the Angular version you have (ng), build the apps (ng build), and deploy the build artifacts.
- bash: |
   ls /home/vsts/work/1/s
   cd cctitan-ui-code 
   ls
   ng --version
   ls
   ng build
   ls

  • White source bolt is a free developer tool for finding and fixing open source code vulnerabilities.
- task: whitesource.ws-bolt.bolt.wss.WhiteSource [email protected]
  displayName: 'WhiteSource Bolt'
  inputs:
    cwd: 'cctitan-ui-code'

  • Before executing the test-cases and producing code-coverage reports, some changes in root repository of the code, some additions need to be made to the p****ackage.json file under dev dependencies section.

  • Some changes in root repository of the code, some additions to the angular.json file,under test add code-coverge shoud be true.

  • Run the unit test cases through Karma by using the Jasmine test framework. You need to add the required plugins before running the test. You may also need to make some changes in the root repository of the code and some additions to the karma.conf.js fileto add plugins and code coverage formats.

  • Run unit tests (ng test) in the root of the project and generate code-coverage reports. Karma reporters are directly passed to the Karma runner.
- bash: |
 cd CCtest
 npm install karma karma-jasmine karma-chrome-launcher karma-jasmine-html-reporter karma-coverage-istanbul-reporter
 npm install karma-coverage --save-dev
 npm install karma karma-coverage
 ng test --watch=false --code-coverage
displayName: 'CodeCOverage tests'

  • A code coverage report is generated by using published code coverage results. The two types of tools are there, i.e.Cobertura or JaCoCo code coverage tools. You can use either but the results will be generated in XML format.
  • The path of the summary file is to identify the code-coverage statistics such as line coverage and class methods, etc.
  • Report code-coverage results in the form of HTML are stored in the report directory, users can access the artifacts and summary of a build.

  • Use this task to archive files compression formats such as .rar, .zip, and .tar.gz.
- task: [email protected]
  displayName: 'Archive cctitan-ui-code/dist'
  inputs:
    rootFolderOrFile: 'cctitan-ui-code/dist'
    includeRootFolder: false

  • Use this task in build pipelines to publish the build artifacts to Azure pipelines. This will store it in the Azure DevOps server so you can later download and use it for the releases (CD) pipeline.
- task: [email protected]
  displayName: 'Publish Artifact: drop'

  • Publish the test results to Azure pipelines or TFS when tests are executed to provide complete test reports and analytics. Use the test runner that supports the required test results format. Some specific result formats include JUnit, NUnit, and Visual Studio Test (TRX). This task will generate the JUnit XML formats, and Azure DevOps Build will use this XML file in its build task to grab the test results and publish to the dashboard summary of the build.
steps:
- task: [email protected]
  displayName: 'Publish Test Results **/test-results*.xml **/e2e-results-junit*.xml '
  inputs:
    testResultsFiles: |
     **/test-results*.xml
     **/e2e-results-junit*.xml

    mergeTestResults: true
  continueOnError: true
  condition: succeededOrFailed()

  • Run end-to-end (E2E) tests (npm run e2e) using Protractor.
  • Use a headless-browser, like Chrome Puppeter, to run on hosted agents. Some additions need to be in the file protractor.conf.js fileto generate test results using JUnit reporter.

  • Click into the ‘Variables’ tab in build, add a system.debug as a name and set the value to true. This will troubleshoot to the build in debug mode.

  • After the build has succeeded, build artifacts are published in the summary section. These published artifacts will be used to deploy the app later in a release (CD) pipeline.

  • Get the logs for a build generated during the build of the job.

  • Release Pipeline (CD) for Deploy a Node.js into Azure Web App

  • This will build and deploy our Node.js code (CI) into aweb app through the Azure App service (CD).
    Select the Azure Resource Manager subscription for the deployment.To configure a new service connection, select the Azure subscription from the list and click ‘Authorize.’Use the existing service principal, or if the subscription is not listed, set up an Azure service connection.Set the type as function app on windows, then choose the web app’s name that you created in the azure-portal.In a release (CD) pipeline, artifacts are used as an input for Continuous Integration (CI) build code (Node.js) by using a package or a folder containing the app service’s contents that were generated via a compressed zip or war file.
 steps:
- task: [email protected]
  displayName: 'Deploy Azure App Service'
  inputs:
    azureSubscription: '$(Parameters.ConnectedServiceName)'
    appType: '$(Parameters.WebAppKind)'
    WebAppName: '$(Parameters.WebAppName)'
    TakeAppOfflineFlag: true

Thanks for reading ❤

Learn how to CI/CD with GitHub Actions and Docker

Learn how to CI/CD with GitHub Actions and Docker

In this post, you'll learn how to CI and CD a Node.JS Application Using GitHub Actions

Originally published by Abhinav Dhasmana at https://blog.bitsrc.io

This article will cover the following:

  • Use Docker instead of bare metal deployment
  • Use GitHub actions for continuous integration of your app
  • Use GitHub actions for continuous deployment by pushing the Docker image to a Docker registry (Docker Hub)

Our workflow will look like this

A workflow of a Node.js app deployed using GitHub actions

The complete source code is available on GitHub

Use Docker instead of bare metal deployment

Dockerizing an existing app is easy. All we need is a Dockerfile and an optional .dockerignore file. Below is a Dockerfile for our app.

FROM node:10.16.0-alpine

WORKDIR /source/github-action-example-node

COPY package.json /source/github-action-example-node

RUN cd /source/github-action-example-node && npm i --only=production

COPY . .

EXPOSE 3000
CMD ["sh", "-c", "node server.js"]

It copies our package.json, runs npm install and starts the server. To make sure our file is correct, we can run docker build -t abhinavdhasmana/github-action-example-node . from the root folder. If we run docker images , we will see our latest image. We can also run our container with docker run -d -p 3000:3000 abhinavdhasmana/github-action-example-node. Point the browser to http://localhost:3000/ and text will appear.

What are GitHub Actions and how do they work

‘GitHub Actions’ is an API that can react to any event, GitHub’s or our own events. For example, for every push event on the repository, we want our test cases to run.

For GitHub Actions to work, we need to create a .github/workflows folder. We need to create our workflows inside this folder. Let’s create push.yml. Here is what we want from our workflow:

On every push, perform these actions in the given order

  1. git clone the repo
  2. run npm install
  3. run npm lint
  4. run npm test
  5. build the docker image
  6. login to docker hub
  7. Push the image to docker hub

Since we have to run each of these commands inside a docker we have to declare a Dockerfile for each of these actions and run the command in those containers. This is, of course, very tedious and error-prone. Remember, GitHub Actions are code, so we can just reuse, edit and fork them as we do with any other piece of code.

This is how our push.yml would look like

on: push
name: npm build, lint, test and publish
jobs:
build-and-publish:
name: build and publish
runs-on: ubuntu-latest
steps:
- uses: actions/[email protected]
- name: npm install
uses: actions/[email protected]
with:
args: install
- name: npm test
uses: actions/[email protected]
with:
args: run test
- name: npm lint
uses: actions/[email protected]
with:
args: run lint
- name: docker build
uses: actions/docker/[email protected]
with:
args: build -t abhinavdhasmana/github-action-example-node .
- name: docker login
uses: actions/docker/[email protected]
env:
DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
- name: docker push
uses: actions/docker/[email protected]
with:
args: push abhinavdhasmana/github-action-example-node

GitHub actions file for npm actions and push to docker hub

Let’s dissect this file

line 1: We want to trigger our workflow when someone pushes the code to our repo

line 3–6: We are defining a job build-and-publish which runs on ubuntu-latest. Each job runs in a fresh instance of a virtual environment. A job can contain one or more steps .

line 8: This is step 1 of our application. Here we want to get our source code. We can write our own code to pull our source code or reuse an open source. The repo link is https://github.com/actions/checkout

line 9-12: This is step 2 of our workflow where we run npm install on our codebase. Again, we use an open source action at https://github.com/actions/npm and pass install as an argument.

line 13–20: These are same as the last step except the argument passed to npm command.

line 21–24: We build a docker image of our code with the help of docker action and tag the image as abhinavdhasmana/github-action-example-node

line 25-29: This one is a little different where we want to login into docker hub. Here we use secrets which are passed as an env variables to our build. We can set these env variables in many ways. To set this up via GitHub, go to Settings-> Secrets and create new secrets

Store secrets in GitHub

line 30-33: We push the image to the docker hub with the tag we created in line 24.

If we commit these changes, GitHub Actions will come into play and start running all the steps in our job. We should see something like this

GitHub Actions running our job

To validate if a new image has been pushed to DockerHub, we should see a new image being pushed in Docker Hub

Docker Hub image

Full source code is available on GitHub.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow me on Facebook | Twitter

Further reading

Docker and Kubernetes: The Complete Guide

Docker Mastery: The Complete Toolset From a Docker Captain

Docker for the Absolute Beginner - Hands On - DevOps

Docker for Absolute Beginners

How to debug Node.js in a Docker container?

Docker Containers for Beginners

Deploy Docker Containers With AWS CodePipeline

Build Docker Images and Host a Docker Image Repository with GitLab

How to create a full stack React/Express/MongoDB app using Docker



20+ Outstanding Vue.js Open Source Projects

20+ Outstanding Vue.js Open Source Projects

There are more than 20 Vue.js open-source projects in this article. The goal was to make this list as varied as possible.

There are more than 20 Vue.js open-source projects in this article. The goal was to make this list as varied as possible.

In this short intro, I won’t go back to the history of the Vue.js or some statistics on the use of this framework. Now it is a matter of fact that Vue is gaining popularity and projects listed below are the best evidence of its prevalence.

So here we go!

Prettier

Opinionated code formatter

Website: https://prettier.io

Demo: https://prettier.io/playground/

**GitHub **:https://github.com/prettier/prettier

GitHub Stars: 32 343

Prettier reprints your code in a consistent style with several rules. Using a code formatter you don’t have to do it manually and argue about what is the right coding style anymore. This code formatter Integrates with most editors (Atom, Emacs, Visual Studio, Web Storm, etc. and works with all your favorite tools such as JavaScript, CSS, HTML, GraphQL, etc. And last year Prettier started to run in the browser and support .vue files.

Image source: https://prettier.io

Image source: https://prettier.io

Vuetify

Material Component Framework

Website: https://vuetifyjs.com/en/

GitHub: https://github.com/vuetifyjs/vuetify

GitHub Stars: 20 614

This framework allows you to customize visual components. It complies with Google Material Design guidelines. Vuetify combines all the advantages of Vue.js and Material. That is more Vuetify is constantly evolving because it has been improved by both communities on GitHub. This framework is compatible with RTL and Vue CLI-3. You can build an interactive and attractive frontend using Vuetify.

Image source: https://vuetifyjs.com/en/

iView

A set of UI components

Website: https://iviewui.com/

GitHub: https://github.com/iview/iview

GitHub Stars: 21 643

Developers of all skill levels

can use iView but you have to be familiar with a Single File Components

(https://vuejs.org/v2/guide/single-file-components.html).. "https://vuejs.org/v2/guide/single-file-components.html).") A friendly API and

constant fixes and upgrades make it easy to use. You can use separate

components (navigation, charts, etc.) or you can use a Starter Kit. Solid documentation of the iView is a big plus and of course, it is compatible with the latest Vue.js. Please note that it doesn’t support IE8.

Image source: https://iviewui.com/

Image source: https://iviewui.com/

Epiboard

A tab page

GitHub: https://github.com/Alexays/Epiboard

GitHub Stars: 124

A tab page gives easy access to RSS feeds, weather, downloads, etc. Epiboard focuses on customizability to provide a user with a personalized experience. You can synchronize your settings across your devices, change the feel and look and add your favorite bookmarks. This project follows the guidelines of the material design. The full list of the current cards you can find on the GitHub page.

Image source: https://github.com/Alexays/Epiboard

Light Blue Vue Admin

Vue JS Admin Dashboard Template

Website: https://flatlogic.com/admin-dashboards/light-blue-vue-lite

Demo: https://flatlogic.com/admin-dashboards/light-blue-vue-lite/demo

GitHub: https://github.com/flatlogic/light-blue-vue-admin

GitHub Stars: 28

Light Blue is built with latest Vue.js and Bootstrap has detailed documentation and transparent and modern design. This template is easy to navigate, has user-friendly functions and a variety of UI elements. All the components of this template fit together impeccably and provide great user experience. Easy customization is another big plus, cuts dramatically development time.

Image source: https://flatlogic.com/admin-dashboards/light-blue-vue-lite

Image source: https://flatlogic.com/admin-dashboards/light-blue-vue-lite

Beep

Account Security Scanner

Website: https://beep.modus.app

GitHub: https://github.com/ModusCreateOrg/beep

GitHub Stars: 110

This security scanner was built with Vue.js and Ionic. It runs security checks and keeps passwords safe. So how this check is working? Beep simply compare your data with all the information in the leaked credentials databases. Your passwords are safe with Beep thanks to the use of the SHA-1 algorithm. Plus this app never stores your login and password as it is.

Image source: https://beep.modus.app

Sing App Vue Dashboard

Vue.JS admin dashboard template

Website: https://flatlogic.com/admin-dashboards/sing-app-vue-dashboard

Demo: https://flatlogic.com/admin-dashboards/sing-app-vue-dashboard/demo

GitHub: https://github.com/flatlogic/sing-app-vue-dashboard

GitHub Stars: 176

What do you need from an admin template? You definitely need classic look, awesome typography and the usual set of components. Sing App fits all these criteria plus it has a very soft color scheme. A free version of this template has all the necessary features to start your project with minimal work. This is an elegantly designed dashboard can be useful more the most of web apps like CMS, CRM or simple website admin panel.

Image source: https://flatlogic.com/admin-dashboards/sing-app-vue-dashboard

Image source: https://flatlogic.com/admin-dashboards/sing-app-vue-dashboard

Vue Storefront

PWA for the eCommerce

Website: https://www.vuestorefront.io

GitHub: https://github.com/DivanteLtd/vue-storefront

GitHub Stars: 5 198

This PWA storefront can connect almost with any backend for the eCommerce because it uses headless architecture. This includes popular BigCommerce platform, Magento, Shopware, etc. Vue Storefront isn’t easy to learn at once because it is a complex solution. But it gives you lots of possibilities and it always improving thanks to growing community of professionals. Some of the advantages of Vue Storefront include mobile-first approach, Server-Side Rendering (good for SEO) and offline mode.

Image source: https://www.vuestorefront.io

Cross-platform GUI client for DynamoDb

GitHub: https://github.com/Arattian/DynamoDb-GUI-Client

GitHub Stars: 178

DynamoDB is a NoSQL database applicable in cases where you have to deal with large amounts of data or serverless apps with AWS Lambda. This GUI client gives remote access plus supports several databases at the same time.

Image source: https://github.com/Arattian/DynamoDb-GUI-Client

vueOrgChart

Interactive organization chart

Demo: https://hoogkamer.github.io/vue-org-chart/#/

GitHub: https://github.com/Hoogkamer/vue-org-chart

GitHub Stars: 44

With this solution, no webserver, install or database needed. This simple chart can be edited in excel or webpage. You can easily search for a particular manager or department. Also, there are two options for usage. First as a static website. This option is suitable for you if you want to use vueOrgChart without modification. If you are planning to build your own chart on top of this project you will have to study the section “Build Setup”.

Image source: https://hoogkamer.github.io/vue-org-chart/#/

Faviator

Favicon generator

Website: https://www.faviator.xyz

Demo: https://www.faviator.xyz/playground

GitHub: https://github.com/faviator/faviator

GitHub Stars: 63

This library helps you to create a simple icon. The first step is to pass in a configuration, and second, choose the format of your icon. You can choose JPG, PNG or SVG format. As you can see in the screenshot you can choose any font from the Google Fonts.

Image source: https://www.faviator.xyz

Minimal Notes

Web app for PC or Tablet

Demo: https://vladocar.github.io/Minimal-Notes/

GitHub: https://github.com/vladocar/Minimal-Notes

GitHub Stars: 48

There is not much to say about this app. It is minimalistic, works on a browser locally, stored in localStorage and the file is only 4Kb. It is also available for Mac OS but the file form 4KB becomes 0.45 Bb. But it is still very lightweight.

Image source: https://vladocar.github.io/Minimal-Notes/

Directus

CMS built with Vue.js

Website: https://directus.io

Demo: https://directus.app/?ref=madewithvuejs.com#/login

GitHub: https://github.com/directus/directus

GitHub Stars: 4 607

Directus is a very lightweight and simple CMS. It has been modularized to give the developers the opportunity to customize it in every aspect. The main peculiarity of this CMS is that it stores your data in SQL databases so it can stay synchronized with every change you made and be easily customized. It also supports multilingual content.

Image source: https://directus.io

VuePress

Static Site Generator

Website: https://vuepress.vuejs.org

GitHub: https://github.com/vuejs/vuepress

GitHub Stars: 12 964

The creator of Vue.js, Evan You, created this simple site generator. Minimalistic and SEO friendly it has multi-language support and easy Google Analytics integration. A VuePress site is using VueRouter, Vue, and webpack. If you worked with the Nuxt or Gatsby you will notice some familiarities. The only difference is that Nuxt was created to develop applications and VuePress is for building static websites.

Image source: https://vuepress.vuejs.org

Docsify

Documentation site generator

Website: https://docsify.js.org/#/

GitHub: https://github.com/docsifyjs/docsify

GitHub Stars: 10 105

This project has an impressive showcase list. The main peculiarity of this generator lies in the way pages are generated. It simply grabs you Markdown file and displays it as a page of your site. Another big plus of this project is a full-text search and API plugins. It supports multiple themes and really lightweight.

Image source: https://docsify.js.org/#/

vue-cli

Standard Tooling for Vue.js Development

Website: https://cli.vuejs.org

GitHub: https://github.com/vuejs/vue-cli

GitHub Stars: 21 263

This well-known tooling was released by the Vue team. Please note that before starting to use it you should install the latest version of Vue.js, Node.js, NPM, and a code editor. Vue CLI has a GUI tool and instant prototyping. Instant prototyping is a relatively new feature. It allows you to create a separate component. And this component will have all “vue powers” as full Vue.js project.

Image source: https://cli.vuejs.org

SheetJS

Spreadsheet Parser and Writer

Website: https://sheetjs.com/

Demo: https://sheetjs.com/demos

GitHub: https://github.com/SheetJS/js-xlsx

GitHub Stars: 16 264

SheetJS is a JS library that helps you to operate data stored in excel file. For example, you can export a workbook on browser-side or convert any HTML table. In other words, SheetJS doesn’t involve a server-side script, or for example AJAX. This the best solution for front-end operation of two-dimensional tables. It can export and parse data and run in node terminal or browser side.

Image source: https://sheetjs.com/

Vue-devtools

Browser devtools extension

GitHub: https://github.com/vuejs/vue-devtools

GitHub Stars: 13 954

Almost any framework provides developers with a suitable devtool. This is literally an additional panel in the browser which very differs from the standard one. You don’t have to install it as a browser extension. There is an option to install it as a standalone application. You can activate it by right-click the element and choose “Inspect Vue component” and navigate the tree of components. The left menu of this tool will show you the data and the props of the component.

Image source: https://github.com/vuejs/vue-devtools

Handsontable

Data Grid Component

Website: https://handsontable.com

GitHub: https://github.com/handsontable/handsontable

GitHub Stars: 12 049

This component has a spreadsheet look, can be easily modified with a plugin and binds to almost any data source. It supports all the standard operations like read, delete, update and create. Plus you can sort and filter your records. What is more, you can include data summaries and assign a type to a cell. This project has exemplary documentation and was designed as customizable as it needs to be.

Image source: https://handsontable.com

Vue webpack boilerplate

Website: http://vuejs-templates.github.io/webpack/

GitHub: https://github.com/vuejs-templates/webpack

GitHub Stars: 9 052

Vue.js provides great templates to help you start the development process with your favorite stack. This boilerplate is a solid foundation for your project. It includes the best project structure and configuration, optimal tools and best development practices. Make sure this template has more or less the same features that you need for your project. Otherwise, it is better to use Vue CLI due to its flexibility.

Image source: http://vuejs-templates.github.io/webpack/

Material design for Vue.js

Website: http://vuematerial.io

GitHub: https://github.com/vuematerial/vue-material

GitHub Stars: 7 984

What is great about this Material Design Framework is truly thorough documentation. The framework is very lightweight with a full array of components and fully in line with the Google Material Design guidelines. This design fits every screen and supports every modern browser.

Image source: http://vuematerial.io

CSSFX

Click-to-copy CSS effects

Website: https://cssfx.dev

GitHub: https://github.com/jolaleye/cssfx

GitHub Stars: 4 569

This project is very simple and does exactly what is said in the description line. It’s a collection of CSS effects. You can see a preview of each effect and click on it. You will see a pop up with a code snippet that you can copy.

Image source: https://cssfx.dev

uiGradients

Website: http://uigradients.com/

GitHub:https://github.com/ghosh/uiGradients

GitHub Stars: 4 323

This is a collection of linear gradients which allows you to copy CSS codes. The collection is community contributed and has the opportunity to filter gradients based on preferred color.

Image source: http://uigradients.com/

Vuestic

Demo: https://vuestic.epicmax.co/#/admin/dashboard

GitHub: https://github.com/epicmaxco/vuestic-admin

GitHub Stars: 5 568

Vuestic is a responsive admin template that already proving popular at the GitHub. Made with Bootstrap 4 this template doesn’t require jQuery. With 36 UI ready-to-use elements and 18 pages, Vuestic offers multiple options for customization. The code is constantly evolving not only due to the efforts of the author but also because of the support of the Vue community on GitHub.

Image source: https://vuestic.epicmax.co/#/admin/dashboard