Web3JS – Client-Side Only Usage of Web3

You need to instantiate it first. after the npm install web3 in node type :

var web3 = require('web3');

then the console.log(web3) will output

{ [Function: Web3]
  providers: { HttpProvider: [Function], IpcProvider: [Function] } }
undefined

for more info read : https://www.npmjs.com/package/web3

Web3 is designed to work both server-side and client side. The client side must be a preprocessed JS bundle, because browsers can't handle advanced JavaScript. You can grab a bundle distribution or create one yourself.

Web3 communicates using XMLHTTPRequest when run in a browser. If you do not have your own node to communicate with the situation is grim at the moment. EtherScan.io provides API key based services that also exposes some of Ethereum JSON-RPC bindings. However as far as I know they are not providing native Web3 provider, so you need to call their specific APIs using their client instead of Web3.

Here is an example project of client side Ethereum application that uses Webpack and Babel (ECMAScript 2016) and EtherScan APIs on a web page.

There are now alternatives such as installing the Metamask extension on Chrome or implementing Metamascara on your site so that the user doesn't need a local node to interact with the blockchain.