Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Articles by Shyam Hande
46 articles
Standalone React.js basic example
Lets first start with writing a simple HTML code and see how we can use ReactBasic React example − Create a simple div like below − Steve My hobby: Cricket Add some styling elements.player{ border:1px solid #eee; width:200px; box-shadow:0 2px 2px #ccc; padding: 22px; display:inline-block; margin:10px; }This is just like normal html data in web app. Now, we may have multiple same players and we then have to replicate the same div like below David My hobby: Cricket These div are same in structure but having different data inside. Here, ...
Read MoreStyling html pages in Node.js
In html files we can simply add style in head section − //add css code We can add inline css styles as well in html directly.Generally css is separated from the html code. Third option add css is to include a css file .How to serve static files in Node.js?Generally css files are added with below tag − Express js provides a middleware to seve static file. This middleware gives read access to given folder.app.use(express.static(path.join(__dirname, ‘public’)));path: its our core module ...
Read MoreServing html pages from node.js
So far we sent html code directly from the send(0 function in response object. For sending larger code, we definitely require to have a separate file for html code.sendFile() function−Response object gives a sendFile() function to return a html file to client.How to provide path to html file in sendFile() ?We import the path core module of node.js.const path = require(‘path’);path has a join function . __dirname is a global variable which holds the actual path to project main folder.path.join(__dirname, ‘views’, ‘add-user.html’); This will refer to the actual file location of add-user html code.App.jsconst http = require('http'); const express = ...
Read MoreFiltering paths and creating html page in express.js
We added express router to handle routes. One single router file handles multiple routes.Adding a path for router in App.js −const http = require('http'); const express = require('express'); const bodyParser = require('body-parser'); const route = require('./routes'); const app = express(); app.use(bodyParser.urlencoded({extended: false})); app.use('/test', route); app.use((req, res, next)=>{ res.status(404).send(' Page not found '); }); const server = http.createServer(app); server.listen(3000);In router middleware we used path −/p>app.use('/test', route);Router will handle all paths starting with /test e.g. /test/add-usernameWe have to change action in form in routes.js file −router.get('/add-username', (req, res, next)=>{ res.send(' Send '); });Routes.js file −const express ...
Read MoreAdding 404 page in express
Now we have a App.js and route.js for handling routes. For any other http requests for which we have not added any request handling will results into an error page. Example for url ‘test’ −App.jsconst http = require('http'); const express = require('express'); const bodyParser = require('body-parser'); const route = require('./routes'); const app = express(); app.use(bodyParser.urlencoded({extended: false})); app.use(route); const server = http.createServer(app); server.listen(3000);Showing meaningful error message on incorrect url’s−We can add a all catch middleware for incorrect url at the end of all middleware’s in App.js −const http = require('http'); const express = require('express'); const ...
Read MoreHow to use express router
In earlier examples, we wrote all routing code in a single file App.js. But in real world scenarios, we have to split the code into multiple files.We can create separate files and import them but express gives a router mechanism which is easy to use.Create a separate file called route.js (name can be anything)Create router using express −const express = require('express'); const router = express.Router();exporting router −module.exports = router;Adding routing functions −router.get('/add-username', (req, res, next)=>{ res.send(' Send '); }); router.post('/post-username', (req, res, next)=>{ console.log('data: ', req.body.username); res.redirect('/'); });Similar to functions we used in App.js ...
Read MoreParsing incoming requests in express.js
To receive some data in http request , lets add a form on url path ‘/add-username’:app.use('/add-username', (req, res, next)=>{ res.send(' Send '); });For parsing the http request, we requires a third party library body-parser: It’s a production required dependencynpm install –save body-parserexpress js provides middleware use function to include a body parser before adding middleware.const http = require('http'); const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.urlencoded({extended: false}));the use(0 function shown above uses next() function by default so http request gets passed to next middleware without any trouble.The above ...
Read MoreHandling different routes in express.js
For handling different routes, use() function is used. use() function has multiple overloaded version, one of version also takes url path as a argument. Based on the url path, the requests will be filtered out for respective middleware.const http = require('http'); const express = require('express'); const app = express(); app.use('/', (req, res, next)=>{ console.log('first middleware'); res.send(' first midleware: Hello Tutorials Point '); }); const server = http.createServer(app); server.listen(3000);in above example we used ‘/’ as url path, it’s a default.Now, as every route starts with ‘/’, the above middleware executes for every http request. It works for ‘/’ ...
Read MoreUnderstanding the different error types and handling in Node.js
Error types are −Syntax errorRuntime errorLogical errorSyntax error −These are easy to find as most of the development tools like visual code studio shows red lines whenever there is a syntax error. The suggestion for resolution may be not be correct in tools but it gives an idea of what went wrong in a specific area of code.On running an app, console terminal will shows the errors. Console log can point to exact line where error occurred.More common syntax error are like missing closing bracket for a block , it will need to identify correct blocks .Runtime error −Example − ...
Read MoreHow to install third party packages using npm
Now, so far we saw how to create a node project with npm init command and also adding scripts to run application.Why third party libraries are requiredWe used core modules of node.js like http, fs etc which are available by default with node.js but working only with these core modules does not simplify our work. To add more useful functionality and simpler code we requires to install third party libraries like express, body-parser etc.We get the third party libraries from cloud stored npm repository. Installation is done using npm install command.NodemonWe are running our App.js file using npm start command. ...
Read More