DEV Community: Omar Moustafa

Build a to-do Node.js CLI with Prisma and Next.js

Omar Moustafa — Mon, 05 Sep 2022 16:33:47 +0000

Yo! What's up? Remember the last article where we used Prisma with Next.js and made a CLI and added an authentication feature? I noticed many of you learned a lot! So here?! You will learn even more, including making a to-do list app as a CLI with Prisma and Next.js API powering the application to give it the best functionality!

Hold on, Omar? Why do we need Prisma/Next.js? The reason why buddy is because this application allows you to sync your tasks from anywhere in the world!

Without further time wasting, let's get started.

Creating our API

First of all, we need a database, so let's use PlanetScale for this! Head over to planetscale.com and click Get Started, create your database, and wait for it to get ready for work!

Now, launch your terminal and start a new Next.js project using npx after that change directory:

npx create-next-app
cd to-do-list-app

Now after we created our project, let's add Prisma and get it ready so run the following command in the terminal:

yarn add prisma @prisma/client
yarn prisma init

After that we will get a schema.prisma file in the prisma folder, replace the file with the following:

generator client {
  provider = "prisma-client-js"
  previewFeatures = ["referentialIntegrity"]
}

datasource db {
  provider = "mysql"
  url = env("DATABASE_URL")
  referentialIntegrity = "prisma"
}

So, what we just most importantly changed the database provider to mysql because we are using a MySQL database.

Now on the PlanetScale dashboard, click on Connect and choose Prisma as the option to connect with, copy the .env file provided and create a .env file in your project and paste what you just copied.

Now we will make 2 models, a User and a Task, so add these 2 models to your Prisma schema file:

model User {
  id Int @id @default(autoincrement())
  username String @unique
  password String
  token String @unique
}

model Task {
  id Int @id @default(autoincrement())
  title String
  userToken String
}

Now, your schema file should look like this:

generator client {
  provider = "prisma-client-js"
  previewFeatures = ["referentialIntegrity"]
}

datasource db {
  provider = "mysql"
  url = env("DATABASE_URL")
  referentialIntegrity = "prisma"
}

model User {
  id Int @id @default(autoincrement())
  username String @unique
  password String
  token String @unique
}

model Task {
  id Int @id @default(autoincrement())
  title String
  userToken String
}

Now run yarn prisma db push to sync your MySQL PlanetScale Database.

We have to now create our API files, first remove pages/api/hello.js file and create a file called register.js in pages/api folder and paste the following code:

import { PrismaClient } from '@prisma/client';

export default function handler(req, res) {
    const prisma = new PrismaClient();
    const { username, password, token } = req.body;
    if (!username || !password || !token) {
        res.status(400).json({
            message: 'Missing username, password or token'
        });
        return;
    }
    prisma.user.findUnique({
        where: {
            username: username
        }
    }).then(user => {
        if (user) {
            res.status(400).json({
                message: 'Username already taken'
            });
        } else {
            prisma.user.findUnique({
                where: {
                    token: token
                }
            }).then(user => {
                if (user) {
                    res.status(400).json({
                        message: 'Token already taken'
                    });
                } else {
                    prisma.user.create({
                        data: {
                            username: username,
                            password: password,
                            token: token
                        }
                    }).then(user => {
                        res.json({
                            message: "User created successfully",
                            user: user
                        });
                    });
                }
            }
            );
        }
    });

}

What we are doing here is defining a Prisma client and making variables for username, password, and token. If one of the parameters isn't provided, we return an error:

const prisma = new PrismaClient();
    const { username, password, token } = req.body;
    if (!username || !password || !token) {
        res.status(400).json({
            message: 'Missing username, password or token'
        });
        return;
    }

And for registration we first check if username is used, if yes, we return an error, if not, we check if the token is used, if yes, returns an error as usual, if not, we will proceed to registration:

    prisma.user.findUnique({
        where: {
            username: username
        }
    }).then(user => {
        if (user) {
            res.status(400).json({
                message: 'Username already taken'
            });
        } else {
            prisma.user.findUnique({
                where: {
                    token: token
                }
            }).then(user => {
                if (user) {
                    res.status(400).json({
                        message: 'Token already taken'
                    });
                } else {
                    prisma.user.create({
                        data: {
                            username: username,
                            password: password,
                            token: token
                        }
                    }).then(user => {
                        res.json({
                            message: "User created successfully",
                            user: user
                        });
                    });
                }
            }
            );
        }
    });

Now, we have the user to be able to authenticate/login, create login.js file and paste the following:

import { PrismaClient } from '@prisma/client';

export default function handler(req, res) {
    const prisma = new PrismaClient();
    const { username, password } = req.body;
    if (!username || !password) {
        res.status(400).json({
            message: 'Missing username or password'
        });
        return;
    }
    prisma.user.findUnique({
        where: {
            username: username
        }
    }).then(user => {
        if (user) {
            if (user.password === password) {
                res.json({
                    message: 'User authenticated successfully',
                    userToken: user.token,
                    user: username
                });
            } else {
                res.status(400).json({
                    message: 'Incorrect password'
                });
            }
        } else {
            res.status(400).json({
                message: 'No user found'
            });
        }
    }
    );

}

So as always we are defining the Prisma client and checking if one of the parameters (username or password) are missing, and if so, we will return an error:

    const prisma = new PrismaClient();
    const { username, password } = req.body;
    if (!username || !password) {
        res.status(400).json({
            message: 'Missing username or password'
        });
        return;
    }

Then we use the findUnique feature to use the username which is unique to find a record/user in the table, so if we haven't found a user, we return a error, if we found one with the matching username, we check if the password provided matches along with the username, if the password is correct, we return a token which is something like a random piece of characters & numbers which is hard to guess which allows you to do anything including with the API itself (when sending requests manually), if not, we return an error that the password is incorrect:

prisma.user.findUnique({
        where: {
            username: username
        }
    }).then(user => {
        if (user) {
            if (user.password === password) {
                res.json({
                    message: 'User authenticated successfully',
                    userToken: user.token,
                    user: username
                });
            } else {
                res.status(400).json({
                    message: 'Incorrect password'
                });
            }
        } else {
            res.status(400).json({
                message: 'No user found'
            });
        }
    }
    );

Now, let's make the fun..... start! Create a new file called create.js which will allow the user to create new tasks! Paste the following code into the file:

import { PrismaClient } from '@prisma/client';

export default function handler(req, res) {
    const prisma = new PrismaClient();
    const { token, taskTitle } = req.body;
    if (!token || !taskTitle) {
        res.status(400).json({
            message: 'Missing token or task title'
        });
        return;
    }
    prisma.user.findUnique({
        where: {
            token: token
        }
    }).then(user => {
        if (user) {
            prisma.task.create({
                data: {
                    title: taskTitle,
                    userToken: token
                }
            }).then(task => {
                res.json({
                    message: 'Task created successfully',
                });
            });
        } else {
            res.status(400).json({
                message: 'No user found'
            });
        }
    }
    );
}

Simply skipping defining the Prisma client, so we use findUnique to check the user token if valid or not, if it's not, we pass an error saying that there is no such user, if the user exists, we create a task with the title given and with that token, and then we return a success message:

    prisma.user.findUnique({
        where: {
            token: token
        }
    }).then(user => {
        if (user) {
            prisma.task.create({
                data: {
                    title: taskTitle,
                    userToken: token
                }
            }).then(task => {
                res.json({
                    message: 'Task created successfully',
                });
            });
        } else {
            res.status(400).json({
                message: 'No user found'
            });
        }
    }
    );

Now if we assume someone wants to delete a task? Create delete.js and paste the following:

import { PrismaClient } from '@prisma/client';

export default function handler(req, res) {
    const prisma = new PrismaClient();
    const { token, taskId } = req.body;
    if (!token || !taskId) {
        res.status(400).json({
            message: 'Missing token or task id'
        });
        return;
    }
    prisma.user.findUnique({
        where: {
            token: token
        }
    }).then(user => {
        if (user) {
            prisma.task.findUnique({
                where: {
                    id: taskId
                }
            }).then(task => {
                if (task.userToken === token) {
                    prisma.task.delete({
                        where: {
                            id: taskId
                        }
                    }).then(task => {
                        res.json({
                            message: 'Task deleted successfully',
                        });
                    });
                } else {
                    res.status(400).json({
                        message: 'Task does not belong to the user'
                    });
                }
            }
            );
        } else {
            res.status(400).json({
                message: 'No user found'
            });
        }
    }
    );
}

So what we do is find the user using the token, if we didn't find the user, we return an error, if we found the user, we find the task using the ID, we check if the owner is matching, if so we delete it, if not, we return an error:

    prisma.user.findUnique({
        where: {
            token: token
        }
    }).then(user => {
        if (user) {
            prisma.task.findUnique({
                where: {
                    id: taskId
                }
            }).then(task => {
                if (task.userToken === token) {
                    prisma.task.delete({
                        where: {
                            id: taskId
                        }
                    }).then(task => {
                        res.json({
                            message: 'Task deleted successfully',
                        });
                    });
                } else {
                    res.status(400).json({
                        message: 'Task does not belong to the user'
                    });
                }
            }
            );
        } else {
            res.status(400).json({
                message: 'No user found'
            });
        }
    }
    );

Last but not least the view.js file which allows the user to view the tasks:

import { PrismaClient } from '@prisma/client';

export default function handler(req, res) {
    const prisma = new PrismaClient();
    const { token } = req.body;
    if (!token) {
        res.status(400).json({
            message: 'Missing token'
        });
        return;
    }
    prisma.user.findUnique({
        where: {
            token: token
        }
    }).then(user => {
        if (user) {
            prisma.task.findMany({
                where: {
                    userToken: token
                }
            }).then(tasks => {
                res.json({
                    message: 'Tasks retrieved successfully',
                    tasks: tasks
                });
            });
        } else {
            res.status(400).json({
                message: 'No user found'
            });
        }
    }
    );
}

So what we do here is find the user, if not found, we return an error, if we found the user, we return all the tasks corresponding to the user:

    prisma.user.findUnique({
        where: {
            token: token
        }
    }).then(user => {
        if (user) {
            prisma.task.findMany({
                where: {
                    userToken: token
                }
            }).then(tasks => {
                res.json({
                    message: 'Tasks retrieved successfully',
                    tasks: tasks
                });
            });
        } else {
            res.status(400).json({
                message: 'No user found'
            });
        }
    }
    );

Now, we got our API ready after hard work 🥳!

Creating our CLI

Run the following commands to get started:

mkdir todocli
cd todocli
npm init -y

Now create a index.js file and paste the following:

#!/usr/bin/env node

var args = process.argv.slice(2);
var fs = require('fs');
var request = require('request');
command = args[0];

if (command == 'login') {
    options = {
        url: 'http://localhost:3000/api/login',
        method: 'POST',
        json: {
            username: args[1],
            password: args[2]
        }
    };
    request(options, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body.message);
            fs.writeFile('./token.txt', body.userToken, function (err) {
                if (err) {
                    return console.log(err);
                }
                console.log("Token saved successfully!");
            }
            );
        } else {
            console.log(body.message);
        }
    });
} else if (command == 'register') {
    options = {
        url: 'http://localhost:3000/api/register',
        method: 'POST',
        json: {
            username: args[1],
            password: args[2],
            token: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
        }
    };
    request(options, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body.message);
            // save token
            fs.writeFile('./token.txt', body.user.token, function (err) {
                if (err) {
                    return console.log(err);
                }
                console.log("Token saved successfully!");
            }
            );
        } else if (body.message=="Token already taken") {
            console.log("Please try registering again!")
        } else {
            console.log(body.message);
        }
    });
} else if (command == 'create') {
    options = {
        url: 'http://localhost:3000/api/create',
        method: 'POST',
        json: {
            taskTitle: args.slice(1).join(' '),
            token: fs.readFileSync('./token.txt', 'utf8')
        }
    };
    request(options, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body.message);
        } else {
            console.log(body.message);
        }
    });
} else if (command == 'view') {
    options = {
        url: 'http://localhost:3000/api/view',
        method: 'POST',
        json: {
            token: fs.readFileSync('./token.txt', 'utf8')
        }
    };
    request(options, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            // save the title and id of each task in an array
            var tasks = [];
            for (var i = 0; i < body.tasks.length; i++) {
                tasks.push({
                    id: body.tasks[i].id,
                    title: body.tasks[i].title
                });
            }
            // print the tasks along with their ids
            console.log("Your tasks are:");
            for (var i = 0; i < tasks.length; i++) {
                console.log(tasks[i].id + ": " + tasks[i].title);
            }

        } else {
            console.log(body.message);
        }
    });
} else if (command == 'delete') {
    options = {
        url: 'http://localhost:3000/api/delete',
        method: 'POST',
        json: {
            taskId: args[1],
            token: fs.readFileSync('./token.txt', 'utf8')
        }
    };
    request(options, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body.message);
        } else {
            console.log(body.message);
        }
    });
} else if (command == 'help') {
    console.log("Usage: todocli <command> <arguments>");
    console.log("Commands:");
    console.log("login <username> <password>");
    console.log("register <username> <password>");
    console.log("create <task title>");
    console.log("view");
    console.log("delete <task id>");
    console.log("help");
}

Simply what we are mainly doing is getting the parameters and depending on the API, and the token is saved into a txt file locally.

Now install a required package using npm install request

Now edit your package.json and replace your scripts, paste the following:

  "scripts": {
    "start": "node index.js"
  },
  "bin": {
    "todocli": "index.js"
  }

Your package.json should now look like this:

{
  "name": "todocli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "bin": {
    "todocli": "index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "request": "^2.88.2"
  }
}

Now we are done, do npm install . -g and start using the app!

Test it out - No setup needed

Just install to-do-cli-prisma with the command:

npm i to-do-cli-prisma

And check how to use it with the command: todocli help

Important links 🔗

GitHub Repo - Omar8345/to-do-list-app-cli
npm Package - to-do-cli-prisma

Thanks for reading this article and hope you learned something useful!

How to setup authentication with Node.js CLI and Prisma

Omar Moustafa — Mon, 08 Aug 2022 18:21:44 +0000

Originally published on DevDojo

Hello there! Today we will be integrating user authentication with your Node.js CLI, we will also cover how to create one, and we will make an API to authenticate user details! Without wasting much more time, let's go!

Creating our CLI

Start by creating a folder and initializing our project 🎉:

mkdir mycli
cd mycli
npm init -y

Now, let's make a test command like mycli-help, so to do that, create an index.js file and paste the following code:

#!/usr/bin/env node

console.log("Hello World!");

Simply, what we are doing here is adding the shebang which serves as a way for your operating system program loader to locate and use toe parse the correct interpreter for your executable file. This only works in Unix Systems though.

In computing, a shebang is the character sequence consisting of the character's number sign and exclamation mark (#!) at the beginning of a script.

From: Wikipedia: https://en.wikipedia.org/wiki/Shebang_(Unix)

And we are simply printing in the console Hello World!, so let's edit our package.json, so add this scripts JSON keypair:

  "scripts": {
    "start": "node index.js"
  }

And add this bin which tells the app which file should be run once this command is executed:

  "bin": {
    "mycli-help": "index.js"
  }

Now, let's install the CLI and give it a try:

npm i . -g
mycli-help

You should get Hello World!, now let's uninstall it and work on our API 🚀:

npm uninstall mycli -g

Setting up our API + Prisma

Start by creating a new Next.js app using npx:

npx create-next-app
cd my-auth-api

After that, let's set up our Prisma schema and our MySQL database, so first of all let's get the database, for this guide, we will use PlanetScale or generally a MySQL database, it should be the same process, just update your Schema configs.

So, head over to PlanetScale and create a new database if you don't have one yet, it will take a few minutes to get ready, just be patient, once done, click on Connect, choose Prisma from the dropdown menu and copy the .env file content:

Now, let's create a .env file and paste the environment variables you just copied from PlanetScale. Now, let's setup Prisma 🚀:

yarn add prisma @prisma/client

Now, let's check out our prisma/schema.prisma and update the configs, etc. to the following:

generator client {
  provider = "prisma-client-js"
  previewFeatures = ["referentialIntegrity"]
}

datasource db {
  provider = "mysql"
  url = env("DATABASE_URL")
  referentialIntegrity = "prisma"
}

Now, let's define our Account Model, like this:

model Account {
  id Int @default(autoincrement()) @id
  username String @unique
  password String
}

Now, let's sync our database 🚀:

npx prisma db push

Now, your database is in sync with your schema, now let's work on our API.

Now, remove the pages/api/hello.js file, and let's create a file in pages/api/ called auth.js, so it should be pages/api/auth.js

Now, place this code in the auth.js file:

import { PrismaClient } from '@prisma/client'

export default function handler(req, res) {
  if (!req.body.username || !req.body.password) {
    res.status(400).json({
      error: 'Please provide username and password'
    })
  }
  const prisma = new PrismaClient()
  const findAccount = async (username, password) => {
    const account = await prisma.account.findFirst({
      where: {
        username,
        password: password,
      },
    })
    if (!account) {
      return res.json({
        status: 'error authentication failed'
      })
    } else {
      return res.json({
        status: 'authorized',
        accountAuthorized: username
      })
    }
  }
  findAccount(req.body.username, req.body.password)
}

Simply, what we are doing here, first of all, we are importing the PrismaClient to use Prisma:

import { PrismaClient } from '@prisma/client'

And after that, we are making the API and defining the Prisma Client so that we can use Prisma in the API, also we are checking if the username and password are provided in JSON:

  if (!req.body.username || !req.body.password) {
    res.status(400).json({
      error: 'Please provide username and password'
    })
  }
  const prisma = new PrismaClient()

After creating the Prisma client, let's use it to check if a record in our model matches with the credentials sent in a JSON request which will be sent from our CLI, so we use findFirst to check for a matching record and don't worry, as long as the username is unique with the help of @unique, same passwords but for different accounts won't effect, so after checking for a matching record, we either get null for the value of account because there is no such record matching, so we use a condition to return a response in JSON telling that there is an error authenticating the user, and otherwise, we will get the record details including id, username, password in account, but we don't need all of this, so we return a response in JSON with a message telling that authentication was successful and we provide the username which has been successfully authorized for confirmation:

const findAccount = async (username, password) => {
    const account = await prisma.account.findFirst({
      where: {
        username,
        password: password,
      },
    })
    if (!account) {
      return res.json({
        status: 'error authentication failed'
      })
    } else {
      return res.json({
        status: 'authorized',
        accountAuthorized: username
      })
    }
  }

Now, we will run the function and provide username and password, which are in res.body:

  findAccount(req.body.username, req.body.password)

Now, the API is good to go! Just run:

yarn dev

Authenticating the user from CLI

Now, we got an API running and waiting for someone to call! We have to get 2 things from the user, a (username) and a (password), so let's code it inside our index.js:

#!/usr/bin/env node

var args = process.argv.slice(2);
var username = args[0];
var password = args[1];

if (!username || !password) {
    console.log('Please provide username and password');
    console.log('Usage: mycli-auth <username> <password>');
    process.exit(1);
}

var request = require('request');
var options = {
    url: 'http://localhost:3000/api/auth',
    method: 'POST',
    json: {
        username: username,
        password: password
    }
}
request(options, function (error, response, body) {
    if (!error && response.statusCode == 200) {
        console.log(body);
    }
}
);

So what we are doing is that we are checking if username and password are provided when executing the command, so if both or one of the credentials aren't provided, we will log an error with expected usage and exit.

If they are both provided, we import request and set options where the API is running accepting JSON requests, setting the method to POST, and in the JSON which we will send, we provide username and password, and then if we get a JSON back with status code 200 which means OK, we return the JSON to the user in the console, which is fine, as long as our JSON response is human readable and understandable, you may configure this if you wish 😉.

Now, before trying it, just install request:

npm install request

Now, just edit mycli-help to mycli-auth in bin in the package.json file, it should be like this:

  "bin": {
    "mycli-auth": "index.js"
  }

Now, test it out! But first, run npx prisma studio and go to http://localhost:5000 and check the Account model, add a user record which you will be using to authenticate, done? Now:

npm i . -g
mycli-auth <username> <password>

And.... congrats 🎉, you have successfully made your authentication feature!

Try it - No setup!

Just install from NPM:

npm i nodejs-cli-prisma-auth -g

And try authorizing with the sample admin user:

mycli-auth admin supersecret123

And kaboom 💥! Even here is the GitHub Repo: Omar8345/nodejs-prisma-auth!

Thanks for reading this article ✨, hope you learned something useful today!

How to Add Advanced Analytics to Medusa with Next.js and Matomo

Omar Moustafa — Fri, 29 Jul 2022 07:33:04 +0000

Medusa is an open source headless commerce, it makes it easy for developers to create awesome online commerce shops in no time! Medusa aims to provide developers with a great experience and limitless customization capabilities. Well, Medusa is well known for being a Shopify open source alternative.

In this guide, you will be integrating Matomo which allows you to get your website (store) analytics, such as average session time (how long a user stays on the page), etc.

You will be integrating Matomo with a Next.js app, where it’s the same if you use Next.js to build and create your Medusa store.

Prerequisites

To follow along with this guide, the following requirements are required:

A Matomo account - Get an account from here
Node V14.0 or higher - Download from here
SQLite or PostgreSQL (SQLite is only for getting started; PostgreSQL is recommended)
Redis server up and running

More information can be found here on How-to Set up your development environment.

Setting up your Medusa Store

This section is separated into 3 parts as follows:

Setting up the Medusa Server
Setting up the Medusa Store
Setting up the Medusa Admin Dashboard

1. Setting up the Medusa Server

Start by creating a new Medusa project and seeding it:

medusa new my-medusa-store --seed

Move into the project’s directory and start the server:

cd my-medusa-store
medusa develop

Now, your Medusa server is running on port 9000.

To test it out, use your browser and go to localhost:9000/store/products and you should get a JSON response like this:

2. Setting up the Medusa Store

Start by creating the Next.js Medusa Storefront and changing the directory:

npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront
cd my-medusa-storefront

Next, get your environment variables ready:

mv .env.template .env.local

Finally, start your Next.js Medusa store:

npm run dev

Now, your Next.js Medusa Store is running 🎉 on port 8000

You can test it out by checking one of the sample products in /products/t-shirt and you can see the sample Medusa T-Shirt for €19.50.

3. Setting up the Medusa Admin Dashboard and making some things

Start by cloning the Admin GitHub repository and changing the directory:

git clone https://github.com/medusajs/admin medusa-admin
cd medusa-admin

Next, install the required packages:

npm install

Finally, start the admin dashboard:

npm run start

Now the Medusa Admin Dashboard is running on port 7000, head over to localhost:7000 and log in with the user details:

email: admin@medusa-test.com
password: supersecret

Once you are logged in, get started by creating some products.

So head over to Products and create a new product:

After creating your products, let’s create some collections, go to Collections and click New Collection.

Now, head back over to Products and assign a collection to each product like this:

Now, your products can be viewed and filtered by your users.

You can test it out by going to localhost:8000/store and you can see the products you created and filter them.

Integrating Matomo to get Analytics

Open your Matomo Dashboard, if you haven’t used Matomo before, you would be given 4 options to setup Matomo, choose Tracking Code and copy the JS code inside the <script> tag like this:

Or, if you can’t find the setup instructions for Matomo on login, head over to Settings > Websites > Tracking Code and scroll a little down until you find the JS tracking code, copy the JS code inside the <script> tag.

Now, let’s integrate Matomo, open your Next.js Medusa Store using your favorite IDE (Visual Studio Code, Atom, etc.) and head over to src/pages, and start by editing the _app.tsx file.

First of all, you will use Script to run the JS code, so use this line of code to import Script:

import Script from "next/script";

And now, inside your return() include a <Script> tag with the strategy set as afterInteractive and optionally the id to matomoAnalytics so that you can refer to this later. Be sure to add 1 angle brackets (<>) and mention an </> at the end of return(), final code should be like this:

<>
    <Script strategy="afterInteractive" id="matomoAnalytics">
        {`
        // your code here
        `}
    </Script>
</>

Now, let’s test it out, so just refresh the app, and you can see that if you go to the Matomo dashboard you can see the analytics start showing!

Testing

Now, try visiting the Medusa Store, you will find active sessions with country, etc.

Try visiting / and then /store and then head over to the Matomo Dashboard, click on Visitors > Visits Log and you will find some information, including OS, browser, region, IP address, pages visited, etc.

Also, you can head over to Real-time and check visits in real-time, you can check Devices and Software to analyze user data, and you can do even more with Matomo!

Conclusion

Now, you have successfully integrated Matomo Analytics with your Medusa Store. Now you can get Analytics data such as average session time and more from the Matomo Dashboard! Where Next.js with TypeScript was used to build and create the storefront and the <Script> tag was used to run the Matomo tracking JS code to get analytics.

Hello, World!

Omar Moustafa — Sat, 16 Jul 2022 12:22:29 +0000

Here is the first easy line

## This is 2nd heading