Hi,
I have released a new version of my SonarQube plugin to integrate the ESLint linter into your Sonarqube projects.
The plugin has been upgraded to the version 6.7 of SonarQube and fix one issue.
The issue is quite frequent, an NPE was generated when ESLint cannot parse some files or simply ignoring them.
The link to download the 0.3.0 version is this one.
I have already written an article about it here.
An article dealing with Java application and testing frameworks and related libraries. Continue Reading
This article is showing you how to use SonarQube with ReactJS and its JSX files. I will use both SonarQube JavaScript plugin and the additional plugin Sonar EsLint plugin.
<%- toc(str, [options]) %>
For the people who has missed my previous article, I have created a new SonarQube plugin to extends the Javascript analysis.
The first step is to download the plugin directly from Github here.
Download the plugin
Find the latest release.
Find the latest release
Copy it in your Sonar extension folder.
Copy the plugin
Restart the server by calling the commands (here on linux)
➜ sonarqube-6.0 ./bin/linux-x86-64/sonar.sh stop
Stopping SonarQube...
Waiting for SonarQube to exit...
Stopped SonarQube.
➜ sonarqube-6.0 ./bin/linux-x86-64/sonar.sh startDon’t forget to modify your SonarQube profile to enable the new ESLint rules :
Add the ESLint rules to your SonarQube profile
Enable the ESLint rules to your SonarQube profile
Most projects requires the SonarQube scanner (Wiki Link to analysis Javascript. Download it somewhere on your disk and unzip it.
Creates a file sonar-project.properties̀ into your project.
Copy-paste this content and modify it :
sonar.projectKey=sleroy:reactjs-demo
sonar.projectName=ReactJS demo
sonar.projectVersion=1.0
sonar.sources=src
sonar.sourceEncoding=UTF-8
sonar.javascript.file.suffixes=.js,.jsxDon’t forget the line sonar.javascript.file.suffixes=.js,.jsx, it’s the hack to make SonarQube working on JSX files!
OK! SonarQube Scanner is configured!
We want to perform the SonarQube analysis with the additional results of ESLint. Eslint is a popular linter that provides recent rules for many javascript frameworks – ReactJS included.
ESLint is thereby often upgraded and contains through its extension system, rules and frameworks that you won’t find in the regular SonarQube installation.
If you haven’t created yet an ESLint configuration file, here is the commands :
ESLint Configuration
You can try the configuration by launching ESLint ony your project. It may warn you that some extensions are missing. Install them with NPM or Yarn.
Missing NPM Module
Usually, the ReactJS extension is missing of your project. You can add them like developer extensions (--save-dev) or globally (-g).
Install missing ESLINT ReactJS extension
With the right configuration and ESLint installation, the scan of a JSX File should work :
Scanning JSX File
OK! ESLint is configured!
Launchs the SonarQube scanner with the command :
~/tools/sscanner/bin/sonar-scannerAnd the analysis is running …
➜ react-jsx git:(master) ✗ ~/tools/sscanner/bin/sonar-scanner
INFO: Scanner configuration file: /home/sleroy/tools/sscanner/conf/sonar-scanner.properties
INFO: Project root configuration file: /home/sleroy/git/react-jsx/sonar-project.properties
INFO: SonarQube Scanner 3.0.3.778
INFO: Java 1.8.0_121 Oracle Corporation (64-bit)
INFO: Linux 4.10.0-21-generic amd64
INFO: User cache: /home/sleroy/.sonar/cache
INFO: Load global repositories
INFO: Load global repositories (done) | time=211ms
INFO: User cache: /home/sleroy/.sonar/cache
INFO: Load plugins index
INFO: Load plugins index (done) | time=14ms
INFO: SonarQube server 6.0
INFO: Default locale: "fr_FR", source code encoding: "UTF-8" (analysis is platform dependent)
INFO: Process project properties
INFO: Load project repositories
INFO: Load project repositories (done) | time=214ms
INFO: Load quality profiles
INFO: Load quality profiles (done) | time=94ms
INFO: Load active rules
INFO: Load active rules (done) | time=897ms
INFO: Publish mode
INFO: ------------- Scan ReactJS demo
INFO: Load server rules
INFO: Load server rules (done) | time=482ms
INFO: Base dir: /home/sleroy/git/react-jsx
INFO: Working dir: /home/sleroy/git/react-jsx/.scannerwork
INFO: Source paths: src
INFO: Source encoding: UTF-8, default locale: fr_FR
INFO: Index files
INFO: 9 files indexed
INFO: Quality profile for js: Sonar way
INFO: Sensor Lines Sensor
INFO: Sensor Lines Sensor (done) | time=41ms
INFO: Sensor SCM Sensor
INFO: SCM provider for this project is: git
INFO: 9 files to be analyzed
INFO: 0/9 files analyzed
WARN: Missing blame information for the following files:
WARN: * /home/sleroy/git/react-jsx/src/example/hello.jsx
WARN: * /home/sleroy/git/react-jsx/src/example/index.jsx
WARN: * /home/sleroy/git/react-jsx/src/fixtures/this.jsx
WARN: * /home/sleroy/git/react-jsx/src/example/index.js
WARN: * /home/sleroy/git/react-jsx/src/example/imager.jsx
WARN: * /home/sleroy/git/react-jsx/src/fixtures/component.jsx
WARN: * /home/sleroy/git/react-jsx/src/fixtures/advanced.jsx
WARN: * /home/sleroy/git/react-jsx/src/fixtures/react.jsx
WARN: * /home/sleroy/git/react-jsx/src/fixtures/hello.jsx
WARN: This may lead to missing/broken features in SonarQube
INFO: Sensor SCM Sensor (done) | time=504ms
INFO: Sensor XmlFileSensor
INFO: Sensor XmlFileSensor (done) | time=1ms
INFO: Sensor JavaScript Squid Sensor
INFO: 9 source files to be analyzed
INFO: 9/9 source files have been analyzed
INFO: Unit Test Coverage Sensor is started
INFO: Integration Test Coverage Sensor is started
INFO: Overall Coverage Sensor is started
INFO: Sensor JavaScript Squid Sensor (done) | time=893ms
INFO: Sensor Linting sensor for Javascript files
INFO: Sensor Linting sensor for Javascript files (done) | time=1438ms
INFO: Sensor Zero Coverage Sensor
INFO: Sensor Zero Coverage Sensor (done) | time=38ms
INFO: Sensor Code Colorizer Sensor
INFO: Sensor Code Colorizer Sensor (done) | time=2ms
INFO: Sensor CPD Block Indexer
INFO: DefaultCpdBlockIndexer is used for js
INFO: Sensor CPD Block Indexer (done) | time=1ms
INFO: Calculating CPD for 2 files
INFO: CPD calculation finished
INFO: Analysis report generated in 170ms, dir size=24 KB
INFO: Analysis reports compressed in 254ms, zip size=18 KB
INFO: Analysis report uploaded in 39ms
INFO: ANALYSIS SUCCESSFUL, you can browse http://localhost:9000/dashboard/index/sleroy:reactjs-demo
INFO: Note that you will be able to access the updated dashboard once the server has processed the submitted analysis report
INFO: More about the report processing at http://localhost:9000/api/ce/task?id=AVwHr7JyDHBkCqlFC7Sx
INFO: Task total time: 8.046 s
INFO: ------------------------------------------------------------------------
INFO: EXECUTION SUCCESS
INFO: ------------------------------------------------------------------------
INFO: Total time: 10.141s
INFO: Final Memory: 48M/301M
INFO: ------------------------------------------------------------------------Go to your Sonar interface, and jump directly to the dashboard.
Our project has been analyzed.
SonarQube analysis
We observe that the violation’s number is increasing with the new rules.
SonarQube analysis details
Hourra, our JSX files are analyzed !
JSX Analysis
In this article, we have installed, configured a new plugin to perform better Javascript analysis into SonarQube, working with ReactJS and JSX files.
In this article, I will present you two new Sonar plugins that you will never find on SonarQube (for some good reasons).
Keep reading if you are developing in TypeScript, AngularJS 2, Javascript.
This short article to announce a new release of the plugin SonarQube ESLint.
This plugin can be used to integrate the results from ESLint inside SonarQube. It’s a wrapper over ESLint to trigger an analysis , fetch the results and store them into SonarQube.
The changes are :
The documentation to use the plugin is there.
The release files are here.
Notice
Thanks to its popularity, Docker has disrupted many companies and blurred the silos between Developers and Operations. In this article, based partially on my own experiences, I will depict some of the disruptions that containers have provoked into the IT companies. I wish that this article will depict familiar situations and brings you argument to win the obstacles to the container technology propagation 🙂
Disclaimer : Despite I am quoting Docker quite a lot in this article, it is not an endorsed article. If you have a better alternative, simply replace Docker by another Container Technology, the arguments should still be valid.
If you appreciate this article, please relay or like it.
That is my first day on the job. A brand-new laptop, decent performance and feature. Default Operating system : Windows.
Well, I am a Linux hardcore developer and I spent many efforts to live without Excel, PowerPoint and Outlook. And who knows ? Maybe my customers won’t be on Windows. Therefore, I am wondering how to create my new software development environments ? Node.JS ? Java ? Mobile, each technology is coming with their own tools, servers and configuration.
What are the choices ? The company is fair and provides a decent laptop with sufficient power. However the software installation on the native OS has been blocked. I need to proceed by virtual machines. Virtual machines ? What a cumbersome solution. I need to download ISO or OVA’s and proceed to the installation of my software. What is your virtual machine creation’s strategy ? I made a quick survey to my colleagues, who confirm that they create a virtual machine by customer’s project. And they share their virtual machine like Pokemon. WTF ? Many dozen of gigabytes are transferred through USB3, a tiny hard drive and the team is ready. Well after several hours.
Docker or any similar container technology is offering me a better solution.
These are the following arguments :
Reduce your startup time and be more efficient. You can find many docker images to set up a development environment ready to use :
Broadcast your software programming best practices by using the same env in your team. As a tech lead, my mission is to make my colleagues better than me. And to reach that goal, I am trying to provide them the best tools, configuration, IDE, and automation to help them in their work. How many times, I had to provide a format style guideline to indent their code ? A syntax checker configuration ? An IDE with the right plugins ? All these issues can be solved by providing my docker image and updating it regularly.
The time for for Web IDE software is probably come : Eclipse and Visual Studio, Borland Delphi, such IDE have been used by generations of developers. They all come with the same advantages and drawbacks. Powerful, clever code completion, nice OS integration and notifications, a whole bad of features. Clearly the develop has a great environment to write its software but these solutions do not scale well inside a team. How to share my configuration ? My preferences ? How to share code ? How to communicate ? To create coziness in your team, you will have to rely on a great IT administrator. A magician of the command line, Powershell to setup your OS with the same configuration everywhere, yet able to update it regularly.
My recommendation is to rely on two kind of tools to produce your software : – lightweight code editors such like Atom, Visual Studio Code from Microsoft – Web IDE such like Cloud 9 or CodeEnvy is a great example. Using Eclipse Che, the web rewrite of Eclipse, a Saas IDE with the same lot of features and configuration. The most amazing thing is that this great and complex system can be installed with a Docker one liner.
As software specialists, we are well aware of the threats coming from the web applications, unobserved operating systems, data breaches. Our daily duty is to protect our customer data.
The consequence for developers is a matter of rule, our computers are locked. Software installation is double checked by IT, Internet is accessed through a proxy, antivirus, whitelist and so on. Hard disk ciphered and so on. in ch All developments have to be done on Virtual machines. BUT Virtual machines are such a pain to manage. A huge disk space, hard to customize, fairly expensive solutions (licence cost of VMWare to be able to perform VM snapshot on every developer laptop…)
Docker Datacenter
Building Virtual Disk images is a tremendous task for the system administrators : slow to copy, hard to customize, mostly manual installation and snapshots to produce them. Developers does not find the necessary flexibility to adapt to their customer projects.
Docker is offering a neat and efficient way to produce images, thanks to the docker script language. A good mix between automation and the traditional system administrator work of producing shell scripts.
Using Docker images is offering enough security control to system administrator, less efforts to maintain and developers can also provide easily their own images to the Security/Administrator Team for review. But how to store your Docker images. At the present time, I would recommend something like Docker Datacenter to host your company containers on premise.
Traditional "legacy" IT Projects features : * a code base * scripts to build the software * some manual test cases * a huge and extensive installation documentation to setup : * the test environment * the production environment * perform the maintenance, the upgrade, the backup of the system * scripts to install the database schema
In practice, most IT projects enforces developers to manually install their development, test, production environments using an out of date documentation, incomplete. How the software team is performing a QA session ? Will they create a brand new test environment with fresh data in a given state and the latest produced software version ? The answer is probably no, definitively no.
Usually, IT teams are relying on a single test server, painstakingly built through the scrum sprints, on a virtual machine. Do you think that I am exaggerating ? Ask to your team, how much time do they need to recreate this environment ? And what if their snapshot is lost or damaged ?
Continuous Dockery, ElectricCloud image property
Docker is providing several solutions to common IT project problems :
Deploying the customer application on the developer laptop : docker images are shared between developers to have access to a debug environment. Docker composer can help the software development team to build ready-to-use.
Initializing and populating a database for tests : another solution to execute integration tests is to rely on Docker to build an image, ready-to-use of your data. Start the container, wait the readiness , execute your integration tests and kill the container once used. Such scenario is easy to create with Docker, even with proprietary databases such like Oracle of MSSQL. This article is a good instruction to Docker and test automation.
Deterministic Test Automation
Recently, I have encountered a brilliant developer – although alone – maintaining a messy piece of PHP code. He was not the originator of the project, though, in charge of the project since two years. He told me that the manager offered him a virtual machine with everything on it at the begin of the project, to help him. The same one he is using on it.
Currently, he is struggling with the customer and that software. Both the customer and him have different deployment environments. And the difference of server, languages and frameworks versions is creating a huge mess.
Another project and situation. This IT team has been relying on Ansible (with Puppet it would have been the same situation), to deploy their software in the different environments. Despite the improvements thanks to the automation provided by Ansible, there is always a slight tension when launching the Ansible scripts. Maybe it’s the system entropy, the virtual machine erosion, most likely the reason is that the virtual machine has never been deleted and recreated. Anyway there are some subtile differences between the environments and probably and the Ansible deployments are sometimes failing when new features are shipped.
System erosion
With that team, we have reached a common point of view. When should we use Ansible to deploy the software ? We should rather use Ansible to prepare the virtual machines to host Docker, open the firewall, establishing the network routes, program the monitoring and so on. And the software will be shipped as a docker image, copied by Ansible and launched.
Docker/Containers can simplify your software deployments whether you have a private cloud or regular virtual machines. Simply install the docker system on your virtual machines and change your way to ship your software, past the effort, you won’t regret it.
The last situation where Docker/Containers is really brilliant is when you use Docker inside your software factory.
Docker can be used in a software factory to make your Software factory evolve from a monolithic all-usage but slow and frustrating software factory to a real platform Software Factory As A Service (If you like the term SFAAS, it’s mine 🙂
The main differences between a Software Factory and a SFAAS are the following : – Product owner, Team manager are creating the new Software Factories for their projects directly through a WebUI by picking the technologies, tools they need. – Developers have the possibility to instantiate new environments to build or test the software without any interaction, paper submission and waiting for a round trip between Earth and Mars. – Integration engineers are providing new tools and environments accessible to the projects, if they wish. – Few interactions are necessary between the infrastructure and system administration teams and the software teams. It’s a win-win solution and the IT bottleneck has been removed.
Docker Software Factory : Marcel Birkner
I strongly recommend that Software factories built on the top of containers like these great initiative projects.
If you have read the whole article, I can only say you a Big thank you and I hope you have been able to learn one thing or two. The apparition of containers is really helping developers, ops and I wish that the IT companies fully embrace these technologies to make our profession much funnier and attractive.
Hi I have developed a rather small plugin for the great static site generator hexo hexo.
If you still don’t know Hexo is a static site generator written in javascript that allows you to build fast blogs without the burden to instantiate a full CMS like WordPress.
This website is powered up by Hexo. Since I am writing sometimes Slideshare presentations, I have decided to build a small plugin to display Slideshare presentations.
The plugin code source is available there Github repo.
To install the plugin, simply write the command inside your Hexo blog folder :
npm install hexo-generator-slideshare --saveAnd then your site is ready to embed slideshare presentations by adding the following tag :
{% slideshare slideshareID %}More informations are available on : – npm – readme
In 2017, this blog is powered by Hexo.js. However I am looking for a replacement since Hexo.JS is lacking of crucial features.
TLDR : HexoJS is too limited, I want online post edition!
I have been recently working to replace the technology powering my blog. A major point is that I am disappointed with its theme. I would like to replace it, with a new technology Vue.JS, for which I have already discussed there.
Since I am replacing the whole front-end, I have been using the great plugin hexo-generator-json. However I still have major issues with my assets (stored with the posts) and it is not really compatible with a CDN solution.
The second feature I am missing, is the possibility to edit my post online. I am an user of Medium and I love the mobile application to create and edits my posts as well watching statistics. A thing I did not think at first, is the impossibility to create new posts with Hexo.JS without an computer. Indeed, to generate your site, you have to generate it, using a full Node.JS environment, commiting, pushing on GITHub your modifications, deploy the docker container and so on. A lot of tasks I have mostly automated but yet, I don’t have a CI Environment available for it.
I did not want to switch back to Drupal and WordPress, equals for me as a bloated solution, slow and hard to tune. I wanted a compromise : why not having a NoSQL Database, a light REST backend, an AdminUI and that’s all. At the beginning of this blog, it was my plan to build this backend, but I decided shortly to concentrate on the content, rather than on the code.
Fortunately, the technologies have evolved and I made a list of Headless CMS / API-First CMD and tested them.
Headless CMS
I won’t spend too much time in the details, a good description has been done there.
Basically, legacy / traditional CMS are highly coupled solutions where the following components are tied :
Usually this kind of CMS are stored in one big block called WordPress, Drupal, Joomla and so on.
The good news is that even these famous solutions are evolving to apply the following modern and well-known principles :
I am expecting from an Headless CMS to contains :
The list of experiments and my opinion about it.
Docker-compose was not running (I used this project). The docker instructions worked for me.
I launched it and soon enough I received a lot of technical alerts wasting my pleasure of a fresh installation.
Directus / Error message
My last blocking point, and the reason I have rejected : I did not find any way to create a content category (called table) in the admin UI. Seems to manipulate the SQL Database to create them : no thanks (rant here).
Uh Uh, a Java solution to power a small blog : no thanks.
Too big, too well-known. The REST API is for sure the next security hole of these solutions.
But the reason of my reject, the UI cannot be separated from the backend!! And why would I like a UI embedded in my backend when I want to create a SPA WebSite ?
I will use them when they will have deleted their UI from the installer.
I suggest to call them HydraCMS.
GraphCMS
Looks Great but I want my own self-hosted solution and don’t want to pay for that.
Site here
Honestly, I had a crush with Ghost. Sexy, a great installer, a great documentation, everything to tempt me like an attractive woman.
The problem is that Ghost has almost everything to charm me but he has an embedded UI!!!
I don’t want an UI, I want to build mine 🙁
Apart from that point, GhostCMS is really great.
Ghost CMS
It even has an Slack integration and loves Markdown!!
Cockpit CMS
Listed in the Awesome CMS List, Cockpit CMS is a rather small solution.
The good points are :
** Docker is working fine. ** The concepts and architecture are OK. ** Nice AdminUI, I really appreciated the way to create my collections
But what really disappointed me was :
** No documentation (REST and so on). For an developer it’s unusable ** PHP : There is no documentation and the REST API is coded in PHP.. Meh ** Lonesome developer yes he is brave, we should encourage him, but he is freaking alone.
In summary, I think that this project goes in the right direction but took some tough and spiky path. PHP is clearly not the appropriate language for such solution. Compared to an Express server, the amount of work to be delivered is too high. It really needs more contributors (actives) to create a good solution and fill the big documentation blackhole. I cannot help since I don’t want to code again in PHP but the solution could be great.
Site is here
Well at the first glance, I rejected, could not find any Docker image. Or the few ones were not working. But my first attempt was dumb. KeystoneJS is not an Headless CMS by itself it’s rather an implementation of a CMS, fully customizable to create your own blog!
Powered by Express and Node.JS, two technologies I am particularly fond of!
The site is there
The positive sides of KeyNodeJS :
The negative points are :
I have rejected most of these solutions.
The consequence is that I am using KeystoneJS and I hope I won’t have too much work to power a new version of my blog.
Stay tune!
**
Some time ago, I organized a talk on “Code Quality and why developers should care about” for my company. In that presentation, I demonstrate some tools, unfamiliar for the audience : young developers and battle-hardened IT developers. One among these tools has brought to me a lot of questions : Codacy. I will present its features and perform a comparison between Codacy and SonarQube from SonarSource.
Recent Comments