React.js using npm, babel and webpack.

React React React… ok so what is React and how we can build a basic application in it.

Here my first trial of React.js with babel, npm and webpack.

Gone through many blogs few are saying that React can cover the complete MVC, but what I got up-to now React basically covers the V(view from MVC).

I am still struggling with the doc, yea I am trying to learn React but the flow of the doc is a bit complex to me so collecting data from several resources.

Here is the example what I tried from scratch.

Install NodejS and npm as per your distro.

Create a directory let’s say react-hello-world and initialize the it using npm.

mkdir react-hello-world
cd react-hello-world
npm init

Select default for all prompts.

Installing and configuring webpack using npm.

webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules based on configuration what you did.

npm i webpack -S

Configuration for webpack.

I follow vim, so the commands with vim. You can use any editor you wish.

vim webpack.config.js

var webpack = require(‘webpack’);
var path = require(‘path’);

var BUILD_DIR = path.resolve(__dirname, ‘src/client/public’);
var APP_DIR = path.resolve(__dirname, ‘src/client/app’);

var config = {

entry: APP_DIR + ‘/index.jsx’,
output: {

path: BUILD_DIR,
filename: ‘bundle.js’

}

};
module.exports = config;

The APP_DIR holds the directory path of the React application’s codebase and the BUILD_DIR represents the directory path of the bundle file output.

The output instructs webpack what to do after bundling process has been done. Here, we are instructing it to use the src/client/public directory to output the bundled file with the name bundle.js

First, create the folder structure like

react-hello-world
– – src
– – – – client
– – – – – – app

Let’s create a index.jsx into ./src/client/app to verify that we did a proper configuration.

vim src/client/app/index.jsx

console.log(‘Hello World!’);

Now execute the command

./node_modules/.bin/webpack -d

The above command run the webpack in development mode and create the bundle.js

Now for making this more interactive adding an index.html in ./src/client

vim src/client/index.html

Screenshot from 2017-04-21 18:53:10
Now open your browser and enter the path absolute-path-of-your-directory/react-hello-world/src/client, you can see Hello World! in the console.

Installing Babel and configuring using npm.

npm i babel-core babel-loader babel-preset-es2015 babel-preset-react -S

The babel-preset-es2015 and babel-preset-react are plugins being used by the babel-loader to translate ES6 and JSX syntax respectively.

As we did some configuration for webpack, babel-loader also requires some configuration.

Create a .babelrc

vim .babelrc

{

“presets” : [“es2015”, “react”]

}

The next step is telling webpack to use the babel-loader while bundling the files

vim webpack.config.js

// Existing Code ….
var config = {

// Existing Code ….
module : {

loaders : [

{

test : /\.jsx?/,
include : APP_DIR,
loader : ‘babel-loader’

}

]

}

}

Now we are done with the webpack and babel. Let’s write some code in React

Install React and React-dom

npm i react react-dom -S

Replacing the existing console.log in index.jsx with

import React from ‘react’;
import {render} from ‘react-dom’;

class App extends React.Component {

render() {

return Hello World!;

}

}

render(<App/>, document.getElementById(‘app’));

Now execute the command again

./node_modules/.bin/webpack -d

Open index.html in the browser and there it is

Hello World!

Advertisements

Apache not running PHP scripts on fedora-23

From last few days, I was facing a strange issue. I installed all the requirements for LAMP(Linux Apache MySQL PHP) and tried to run the PHP script but don’t know why it was not working. All the time just getting the raw content of the PHP scripts.

After digging and spending lots of time on searching this issue, I got a workaround which seems working to me. Here are the steps,

sudo dnf update

MySQL

sudo dnf install mysql-server mysql mysql-community-server

systemctl start mysqld.service

systemctl enable mysqld.service

/usr/bin/mysql_secure_installation

httpd(Apache)

sudo dnf install httpd

sudo systemctl start httpd.service

sudo systemctl enable httpd

firewall-cmd –permanent –add-service=http

firewall-cmd –permanent –add-service=https

firewall-cmd –reload

PHP

sudo dnf install php php-mysql -y

sudo systemctl restart httpd.service

sudo systemctl reload firewalld

.conf file

sudo vim /etc/httpd/conf.d/project.conf

// Contents of project.conf file

screenshot-from-2016-12-25-01-50-01

Restart apache

sudo systemctl restart httpd.service

Now you can access project.dev or project-alias.dev in your browser.

Shortpath

Shortpath a package which reduces your time to type.

All the time I start terminal and for starting my work have to type long directory paths which were really annoying sometimes. To overcome this problem I just created a package and now I can assign a short name for that path and this really makes me happy.

Brief:

shortpath assign a short name which you passed or it will generate a random string for your path that you entered. If no path you are entering this will take the current working directory as a path. The short name will be user wise. If you will set a short name from a root user this will not work for the guest user and vice versa.

Installation:

$ pip install shortpath

Usage:

$ shortpath –help

$ shortpath –v

$ shortpath –p –s

$ shortpath –p

$ shortpath –s

Note: After setting short name for any path, open a new terminal or a new tab then use your path’s short name.

Command line for your package

In the previous post, I explained how to create a package.
Everyone also wants to use their package with command line so here the steps you can follow. The package we built named shortpath. The structure of our package was

/shortpath

shortpath/

__init__.py
shortpath.py

MANIFEST.in
README.rst
__init__.py
setup.py

Now add new script to it for accessing your package with command line

/shortpath

bin/

shortpath

shortpath script will have some code like

#!/usr/bin/env python

import shortpath
print shortpath.some_method()

Now we have to declare our command script in setup.py

setup(
    ...
    scripts=['bin/funniest-joke'],
    ...
)

When we will be done with our installation of the package, setup tools will copy the script to our PATH and make the command available for general use.

$ shortpath

 

Create a Python package?

We assume that we are creating a package shortpath.

The package should contain these files.
README.rst
MANIFEST.in
setup.py
setup.cfg (If you have any configuration to your package)

Now we have to build our setup.py based on our package details, for creating setup.py follow this.

If you are done with the above steps, your package structure will be something like

/shortpath

shortpath/

__init__.py
shortpath.py

MANIFEST.in
README.rst
__init__.py
setup.py

The shortpath.py will contain your methods, classes. Now, you can test your package locally using

$ pip install -e .

>>> import shortpath
>>> print some_method()

Now for uploading your package to PyPI,

$ pip install twine

Follow the link for registering on PyPI and configuring .pypirc

To generate your package distribution

$ python setup.py sdist

To generate you package info

$ python setup.py egg_info

Now upload your package with command

$ twine upload dist/*

Install the uploaded package

$ pip install shortpath

Note: If any error in installing the package it must be conflicting with the local package so remove the local package and symlink

  • The packages you will find in
    /usr/local/lib/python/dist-packages/
  • The symlink will be in
    /usr/local/lib/python/dist-packages/easy-install.pth

Mosquitto-PHP with Ubuntu

This is just an extension to allow using the Eclipse Mosquitto™ MQTT client library with PHP

# For Installing pecl
sudo apt-get install php-pear

# Install PHP developer packages
sudo apt-get install php5-dev
or
sudo apt-get install php7-dev

# Mosquitto setup
sudo apt-add-repository ppa:mosquitto-dev/mosquitto-ppa
sudo apt-get update
sudo apt-get install libmosquitto-dev
sudo apt-get install mosquitto mosquitto-clients
sudo pecl install Mosquitto-alpha

Add extension=mosquitto.so to php.ini

sudo vim /etc/php5/cli/php.ini

Now test your setup, create new subscriber.php

$client = new Mosquitto\Client();
$client->onConnect(‘connect’);
$client->onDisconnect(‘disconnect’);
$client->onSubscribe(‘subscribe’);
$client->onMessage(‘message’);
$client->connect(“localhost”, 1883, 60);
$client->subscribe(‘/#’, 1);

while (true) {
$client->loop();
sleep(2);
}

$client->disconnect();
unset($client);

function connect($r) {
echo “I got code {$r}\n”;
}

function subscribe() {
echo “Subscribed to a topic\n”;
}

function message($message) {
printf(“\nGot a message on topic %s with payload:%s”,
$message->topic, $message->payload);
}

function disconnect() {
echo “Disconnected cleanly\n”;
}

Execute the subscriber.php

php subscriber.php

On executing the above command, you will get

I got code 0
Subscribed to a topic

Test the subscriber with mosquitto_pub command
mosquitto_pub -h localhost -t “/mqtt” -m “Hello World!”

On executing the above command, you will get

Got a message on topic /mqtt with payload:Hello World

Now create new publisher.php

$client = new Mosquitto\Client();
$client->onConnect(‘connect’);
$client->onDisconnect(‘disconnect’);
$client->onPublish(‘publish’);
$client->connect(“localhost”, 1883, 5);

while (true) {
try{
$client->loop();
$mid = $client->publish(‘/mqtt’, “Hello from PHP!”);
$client->loop();
}catch(Mosquitto\Exception $e){
return;
}
sleep(2);
}

$client->disconnect();
unset($client);

function connect($r) {
echo “I got code {$r}\n”;
}

function publish() {
global $client;
echo “Mesage published\n”;
$client->disconnect();
}

function disconnect() {
echo “Disconnected cleanly\n”;
}

Execute the publisher.php

php publisher.php

On executing the above command, we will get a message as shown below :

I got code 0
Mesage published
Disconnected cleanly

Also, we can see the published message as shown below at the terminal where the subscriber ( subscriber.php ) is running :
I got code 0
Subscribed to a topic
Got a message on topic /mqtt with payload:Hello from PHP!

For now only implemented few steps looking for how much I can dive into.

Scroom : A jQuery plugin

I was working on project and client ask for something but after a lot of Googling, I didn’t find anything that matches my expectations. But there was a lot of searches related to that.
I thought someone has to build a plugin which will fulfill this requirement, then I thought that someone could be me.

And here it is the Scroom jQuery plugin.

# The Scroom plugin will basically have features like
1. Scroll the big images.
2. zoom in and out.
4. Selection of area.
5. Open modal after selection.
6. Savable form data and co-ordinates.
7. Removable selection with form data and co-ordinates.
8. Visualization of selection details.

Scroom keys
1. boxes : For populating selected areas.
2. saveDataUrl : URL which will handle the form data.
3. saveCoordinateUrl : URL which will handle the coordinates.
4. deleteUrl : URL which will use for deletion of saved selected area.
5. hoverData : Fields name display on hover with values.

# For populating saved selected area
var savedBoxes = [
{“id”:”square-306-238″,”left”:”306″,”top”:”238″,”width”:”40″,”height”:”27″},
{“id”:”square-660-312″,”left”:”660″,”top”:”312″,”width”:”80″,”height”:”51″},
{“id”:”square-380-265″,”left”:”380″,”top”:”265″,”width”:”180″,”height”:”124″}
];

$(‘#scroom-block’).scrollZoom({boxes: savedBoxes});

# For displaying details of selected area on hover
var savedBoxes = [
{“id”:”square-306-238″,”left”:”306″,”top”:”238″,”width”:”40″,”height”:”27″, “name”:”test1″, “description”:”testdes1″},
{“id”:”square-660-312″,”left”:”660″,”top”:”312″,”width”:”80″,”height”:”51″, “name”:”test2″, “description”:”testdes2″},
{“id”:”square-380-265″,”left”:”380″,”top”:”265″,”width”:”180″,”height”:”124″, “name”:”test3″, “description”:”testdes3″}
];

var displayFields = [‘name’, ‘description’];

$(‘#scroom-block’).scrollZoom({boxes: savedBoxes, hoverData: displayFields});