{"id":110391,"date":"2021-06-22T07:00:00","date_gmt":"2021-06-22T04:00:00","guid":{"rendered":"https:\/\/www.javacodegeeks.com\/?p=110391"},"modified":"2021-06-14T20:03:33","modified_gmt":"2021-06-14T17:03:33","slug":"express-js-cookies-tutorial","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/express-js-cookies-tutorial.html","title":{"rendered":"Express.js Cookies Tutorial"},"content":{"rendered":"

Hello in this tutorial, we will understand Cookies and implement them in an Express.js application.<\/p>\n

1. Introduction<\/h2>\n

Cookies<\/strong> are a piece of any information sent from the server and are stored in the client\u2019s browser. This information helps to track the client\u2019s action and the browser sent it back to the server every time a client visits the website to recognize the client and its actions. Cookies in an application are used to manage sessions, client personalization, and tracking.<\/p>\n

1.1 Setting up Node.js<\/h3>\n

To set up Node.js on windows you will need to download the installer from this<\/a> link. Click on the installer (also include the NPM package manager) for your platform and run the installer to start with the Node.js setup wizard. Follow the wizard steps and click on Finish when it is done. If everything goes well you can navigate to the command prompt to verify if the installation was successful as shown in Fig. 1.<\/p>\n

\n
\"express.js<\/a>
Fig. 1: Verifying node and npm installation<\/figcaption><\/figure>\n<\/div>\n

2. Express.js Cookies Tutorial<\/h2>\n

To set up the application, we will need to navigate to a path where our project will reside. For programming stuff, I am using Visual Studio Code<\/a> as my preferred IDE. You’re free to choose the IDE of your choice.<\/p>\n

2.1 Setting up dependencies<\/h3>\n

Navigate to the project directory and run npm init -y<\/code> to create a package.json<\/code> file. This file<\/a> holds the metadata relevant to the project and is used for managing the project dependencies, script, version, etc. Add the following code to the file wherein we will specify the required dependencies.<\/p>\n

package.json<\/em><\/span><\/p>\n

\n
\n\n\n\n
\n
01<\/div>\n
02<\/div>\n
03<\/div>\n
04<\/div>\n
05<\/div>\n
06<\/div>\n
07<\/div>\n
08<\/div>\n
09<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n
15<\/div>\n
16<\/div>\n
17<\/div>\n
18<\/div>\n
19<\/div>\n
20<\/div>\n
21<\/div>\n<\/td>\n
\n
\n
{<\/code><\/div>\n
  <\/code>\"name\"<\/code>: <\/code>\"expressjs-cookies\"<\/code>,<\/code><\/div>\n
  <\/code>\"version\"<\/code>: <\/code>\"1.0.0\"<\/code>,<\/code><\/div>\n
  <\/code>\"description\"<\/code>: <\/code>\"Express js and cookies tutorial\"<\/code>,<\/code><\/div>\n
  <\/code>\"main\"<\/code>: <\/code>\"index.js\"<\/code>,<\/code><\/div>\n
  <\/code>\"scripts\"<\/code>: {<\/code><\/div>\n
    <\/code>\"test\"<\/code>: <\/code>\"echo \\\"Error: no test specified\\\" && exit 1\"<\/code><\/div>\n
  <\/code>},<\/code><\/div>\n
  <\/code>\"keywords\"<\/code>: [<\/code><\/div>\n
    <\/code>\"expressjs\"<\/code><\/div>\n
  <\/code>],<\/code><\/div>\n
  <\/code>\"author\"<\/code>: <\/code>\"daniel atlas\"<\/code>,<\/code><\/div>\n
  <\/code>\"license\"<\/code>: <\/code>\"MIT\"<\/code>,<\/code><\/div>\n
  <\/code>\"dependencies\"<\/code>: {<\/code><\/div>\n
    <\/code>\"cookie-parser\"<\/code>: <\/code>\"^1.4.5\"<\/code>,<\/code><\/div>\n
    <\/code>\"express\"<\/code>: <\/code>\"^4.17.1\"<\/code><\/div>\n
  <\/code>},<\/code><\/div>\n
  <\/code>\"devDependencies\"<\/code>: {<\/code><\/div>\n
    <\/code>\"nodemon\"<\/code>: <\/code>\"^2.0.7\"<\/code><\/div>\n
  <\/code>}<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

To download the dependencies navigate to the directory path containing the file and use the npm install<\/code> command. If everything goes well the dependencies will be loaded inside the node_modules<\/code> folder and you are good to go with the further steps.

<\/div> <\/div><\/p>\n

2.2 Creating the controller file<\/h3>\n

Create a controller file in the routes<\/code> folder. This file will expose endpoints that will be responsible to entertain the request from the client.<\/p>\n

api.js<\/em><\/span><\/p>\n

\n
\n\n\n\n
\n
01<\/div>\n
02<\/div>\n
03<\/div>\n
04<\/div>\n
05<\/div>\n
06<\/div>\n
07<\/div>\n
08<\/div>\n
09<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n
15<\/div>\n
16<\/div>\n
17<\/div>\n
18<\/div>\n
19<\/div>\n
20<\/div>\n
21<\/div>\n
22<\/div>\n
23<\/div>\n
24<\/div>\n
25<\/div>\n
26<\/div>\n
27<\/div>\n
28<\/div>\n
29<\/div>\n
30<\/div>\n
31<\/div>\n
32<\/div>\n
33<\/div>\n
34<\/div>\n
35<\/div>\n
36<\/div>\n
37<\/div>\n<\/td>\n
\n
\n
const express = require(<\/code>'express'<\/code>);<\/code><\/div>\n
const router = express.Router();<\/code><\/div>\n
 <\/div>\n
\/\/ http get<\/code><\/div>\n
\/\/ http:\/\/localhost:4001\/<\/a><\/code><\/div>\n
 <\/div>\n
router.get(<\/code>'\/'<\/code>, (req, res) => {<\/code><\/div>\n
    <\/code>res.status(200).json({info: <\/code>'Application is working fine'<\/code>});<\/code><\/div>\n
});<\/code><\/div>\n
 <\/div>\n
\/\/ http post<\/code><\/div>\n
\/\/ http:\/\/localhost:4001\/set?id=2f4c0e2d-7cbc-41f0-9636-0f6e39b55b46&full_name=Daniel<\/a><\/code><\/div>\n
 <\/div>\n
router.post(<\/code>'\/set'<\/code>, (req, res) => {<\/code><\/div>\n
    <\/code>console.log(<\/code>'Setting cookie'<\/code>);<\/code><\/div>\n
 <\/div>\n
    <\/code>let<\/code> obj = {<\/code><\/div>\n
        <\/code>id: req.query.id,<\/code><\/div>\n
        <\/code>full_name: req.query.full_name<\/code><\/div>\n
    <\/code>};<\/code><\/div>\n
 <\/div>\n
    <\/code>res.status(201)<\/code><\/div>\n
        <\/code>.cookie(<\/code>'emp'<\/code>, obj, {maxAge: 360000})   <\/code>\/\/The cookie will expire after 360000 ms from the time it is set.<\/code><\/div>\n
        <\/code>.json({info: <\/code>'Cookie set successfully'<\/code>});<\/code><\/div>\n
});<\/code><\/div>\n
 <\/div>\n
\/\/ http get<\/code><\/div>\n
\/\/ http:\/\/localhost:4001\/get<\/a><\/code><\/div>\n
 <\/div>\n
router.get(<\/code>'\/get'<\/code>, (req, res) => {<\/code><\/div>\n
    <\/code>console.log(<\/code>'Returning cookie'<\/code>);<\/code><\/div>\n
 <\/div>\n
    <\/code>res.status(200).json({info: req.cookies});<\/code><\/div>\n
});<\/code><\/div>\n
 <\/div>\n
\/\/ routes<\/code><\/div>\n
module.exports = router;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

2.3 Creating an index file<\/h3>\n

Create an index file that will act as an entry point for our server. The file will contain the code to define the routes to the application endpoints.<\/p>\n

index.js<\/em><\/span><\/p>\n

\n
\n\n\n\n
\n
01<\/div>\n
02<\/div>\n
03<\/div>\n
04<\/div>\n
05<\/div>\n
06<\/div>\n
07<\/div>\n
08<\/div>\n
09<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n<\/td>\n
\n
\n
const express = require(<\/code>'express'<\/code>);<\/code><\/div>\n
const cookieParser = require(<\/code>'cookie-parser'<\/code>);<\/code><\/div>\n
 <\/div>\n
const app = express();<\/code><\/div>\n
 <\/div>\n
app.use(cookieParser())<\/code><\/div>\n
\/\/Application routes<\/code><\/div>\n
app.use(<\/code>'\/'<\/code>, require(<\/code>'.\/routes\/api'<\/code>));<\/code><\/div>\n
 <\/div>\n
const PORT = process.env.port || 4001;<\/code><\/div>\n
app.listen(PORT, () => {<\/code><\/div>\n
    <\/code>console.log(`Server started on port ${PORT}`);<\/code><\/div>\n
});<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

3. Run the Application<\/h2>\n

To run the application navigate to the project directory and enter the following command as shown in Fig. 4. If everything goes well the application will be started successfully on port number 4001<\/code>.<\/p>\n

\n
\"express.js<\/a>
Fig. 2: Starting the application<\/figcaption><\/figure>\n<\/div>\n

4. Project Demo<\/h2>\n

When the application is started, open the Postman<\/a> tool to hit the application endpoints. You are free to choose any tool of your choice.<\/p>\n

Application endpoints<\/em><\/span><\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n<\/td>\n
\n
\n
\/\/ index<\/code><\/div>\n
HTTP GET url - http:\/\/localhost:4001\/<\/a><\/code><\/div>\n
 <\/div>\n
\/\/ set the cookie<\/code><\/div>\n
HTTP POST url - http:\/\/localhost:4001\/set?id=2f4c0e2d-7cbc-41f0-9636-0f6e39b55b46&full_name=Daniel<\/a><\/code><\/div>\n
 <\/div>\n
\/\/ get the cookie<\/code><\/div>\n
HTTP GET url - http:\/\/localhost:4001\/get<\/a><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Similarly, you can create other endpoints. That is all for this tutorial and I hope the article served you with whatever you were looking for. Happy Learning and do not forget to share!<\/p>\n

5. Summary<\/h2>\n

In this tutorial, we learned \u2013<\/p>\n