DEV Community: Mayank Patel

Seeking your opinion on our upcoming project

Mayank Patel — Tue, 21 Jan 2025 12:01:31 +0000

We're building a UI component library using the Quasar Framework and would love your feedback before moving forward with development. It’ll take just 30 seconds to answer 3 quick questions. Your input would mean a lot!

https://r.kiteform.com/r/LYigHfQ

If you have any questions, you can reach out to me at mayank091193@gmail.com

Quasar Prime Admin Template (Quasar 2/Vue 3 - Typescript & Javascript both versions)

Mayank Patel — Wed, 07 Feb 2024 06:36:33 +0000

9 Happy Customers

Launched Quasar Prime Admin Template — Your Ultimate Solution for a Powerful and Elegant Dashboard!

Developer-Friendly and Highly Customizable
Premium Quality Applications Made Easy
Ready-to-Use Template
Global Dark mode
Free Lifetime Updates
One-time payment and get full access

Live preview — https://quasar-prime-admin-template.netlify.app/analytics

You can either email me at mayank091193@gmail.com to purchase directly OR

Buy on Gumroad at https://techforest9.gumroad.com/l/QuasarPrimeAdminTemplate

Writing, packaging, and deploying AWS Lambda function written in Python

Mayank Patel — Fri, 10 Feb 2023 07:09:13 +0000

Follow me on Twitter
Connect on LinkedIn

What is AWS Lambda

AWS Lambda is a serverless computing service provided by AWS. It is a service that runs your code in response to an event and automatically manages the resources required for running your code. You don't need to worry about any underlying resources which are required.

One example of such an event is a file uploaded to the S3 bucket. You can trigger your lambda function when the file is uploaded to your S3 bucket. You can think of a data processing job where files are being uploaded to your bucket and you want to start processing as soon as files arrive in the bucket. This will help you achieve real-time data processing use cases.

Now that you know what the AWS lambda function is, let's create our first Lambda function.

Create the file named app.py and include the following code in it.

# This is a handler
def handler_name(event, context):
    # Your logic
    return True

You must be wondering what is handler_name function. Basically, the handler function is a method in your code that processes events. When you invoke your lambda function, lambda runs your handler method. For example, if you have configured an event for triggering the lambda function on file upload in an S3 bucket, upon successful upload of the file in a bucket, Lambda will run your method named handler_name .

Now that we know what the handler is, we need to know how we define the handler's name. It depends on 2 things.

The filename in which your handler method is written
Your handler method name

For example, the filename is app.py and the method name is lambda_handler , your lambda handler name will be app.lambda_handler .Basically filename.handler_method_name

When your Lambda function is invoked, lambda passes 2 arguments to your handler function. event and context (Lambda context)

event: The first argument is event which is the JSON document that contains data for your Lambda function to process

context: The context object provides methods and properties that provide information about the invocation, the function, and the runtime environment. For example, it contains a unique ID for each lambda invocation.

Let's assume event data is {first_name: "Mayank", last_name: "Patel"} . Now update your lambda_handler with the following code.

def lambda_handler(event, context):
    message = 'Hello {} {}, this is from Lambda Function!'.format(event['first_name'], event['last_name'])  
    return { 
        'message' : message
    }

Now, we need to build the deployment package.

Prepare a deployment package with no dependencies

Open your terminal and run the following commands

mkdir my_function
cd my_function
Copy your app.py file in this folder
zip lambda_deployment_package.zip app.py This will generate your deployment package named lambda_deployment_package.zip in your project root directory

Prepare a deployment package with dependencies

Let's update the handler method with the following content which has a dependency on python requests library

import requests
def lambda_handler(event, context):   
    response = requests.get("https://www.example.com/")
    print(response.text)
    return response.text

Now, open your terminal and run the following commands.

mkdir my_function
cd my_function
Install requests library in the venv folder using the following command
pip install --target ./venv requests
Now create the deployment package with installed library in venv
cd venv
zip -r ../lambda_deployment_package.zip .
The above commands will generate your deployment package named lambda_deployment_package.zip in your project root directory
Now add the app.py file to the root of your zip file using below command
cd ..
zip lambda_deployment_package.zip app.py

After following the above steps, now you have your lambda deployment package ready locally. Now, it's time to deploy this package.

Follow the below steps to deploy your local lambda package.

There are 2 ways you can deploy your lambda function. Using AWS CLI or from the console.

Deploy using AWS CLI

Here, I assume you have configured AWS CLI.

Please create the execution policy. It gives your lambda function access to AWS resources.

aws iam create-role --role-name lambda-ex --assume-role-policy-document '{"Version": "2012-10-17","Statement": [{ "Effect": "Allow", "Principal": {"Service": "lambda.amazonaws.com"}, "Action": "sts:AssumeRole"}]}

Now, you need to add permission to your role

aws iam attach-role-policy --role-name lambda-ex --policy-arn arn:aws:iam::aws:policy/service-role/AWSLambdaBasicExecutionRole

Now, run the below command to deploy your package.

aws lambda create-function --function-name my-function --zip-file fileb://lambda_deployment_package.zip --handler app.lambda_handler --runtime python3.9 --role arn:aws:iam::123456789012:role/lambda-ex

Here, replace 123456789012 with your AWS Account ID. You can get it by logging into the AWS console and clicking on your name in the top-right corner.

Deploy using AWS Console

Please follow the below steps to deploy your lambda function

Login to your AWS console and search/open the AWS Lambda service
Click Create function
Give input to Function name and select appropriate runtime. We will choose python3.9 and hit Create function
Now, select your newly created function if not selected
Under the code tab, click Upload from option. There are 2 ways to upload. Either you can upload the lambda package zip file from the local disk or you can upload your zip file to S3 and give S3 location. We will upload it from the local disk. Upload and hit Save
Now, under the Runtime settings section, hit Edit and give your Handler name. In our case, it is app.lambda_handler and hit Save

Now, you can test your lambda function. However, there are some key settings that you may want to set for your function.

Memory & Timeout: Under the Configuration tab -> General configuration, hit Edit update Memory and Timeout
Concurrency: You can set concurrency for your lambda function under Concurrency sub-tab

Test the Lambda function

To test your newly deployed serverless lambda function, head to the Test sub-tab.

You can either Save your Test event by giving the name and providing input to Event JSON if applicable and hit Save.

If you don't want to Save and just want to Test, hit Test after giving input to Event JSON.

So far, I have covered basic lambda function package preparation, deployment, and setting key configuration.

Example Use Cases

Realtime data processing: For example, if you want to process the data that you are receiving in the form of files, you can choose to upload files in the S3 bucket and trigger your lambda function as soon as the file arrives in the S3 bucket
If you are developing the website and you want to host the back-end service on AWS Lambda function
If you want to perform some sort of data analytics on top of the data you have in your warehouse
Log analysis
Document conversion

Benefits of Lambda

No servers to manage
Continuous scaling
Increases innovation
Pay-for-use billing model
High availability

So far I have covered the basics of AWS lambda which include writing Lambda handler method, preparing lambda package with and without dependencies, and deploying lambda function using AWS CLI and from AWS Console.

There is more to it like configuring VPC, Retry behavior, Limitation of lambda package size, Lambda layering, etc.

I will be covering more details in my future blogs about AWS serverless service. If you want me to explain in detail or explain any of the use case, let me know in comment below.

Thank you for taking the time in reading my blog!

Deploy web application built using Quasar framework and Python Flask framework on AWS EC2 instance, using PM2 & Nginx web server

Mayank Patel — Thu, 09 Feb 2023 06:25:22 +0000

Follow me on Twitter
Follow me on LinkedIn

What is Quasar Framework?
Quasar framework is a Vue.js-based framework for building websites with a single codebase and you can deploy it on the web as SPA, PWA, SSR, and to Android, iOS, and Desktop apps too.

What is Python flask framework?
Flask framework is a micro framework that is written in Python. It is called a micro framework because it doesn't require any tools or libraries.

What is PM2?
pm2 is a process manager that makes the management of background processes easy. It's very easy to use.

What is Nginx?
Nginx is a web server and it can be even used as a reverse proxy, load balancer, mail proxy, or HTTP Cache.

I assume you have an application built and running using the Quasar framework which is connected to Python flask framework API. Please set up the Database as per your application requirement and give the correct Database URI in the configuration.

Few assumptions for the whole blog we are making:

Repository name: demo-app (Front-end content is in quasar-app folder and the back-end is stored at the root level with file app.py)
Ubuntu server running on IP 10.209.201.30, Username: ubuntu
key to connect: private.pem

Now, let's SSH into the server

ssh -i private.pem ubuntu@10.209.201.30

Clone your repository on the server and setup both front-end

git clone <your_repo_url> cd quasar-app npm install Now, check if front-end is running fine or not by running quasar dev

Setup back-end. Here I am assuming you have requirements stored in requirements.txt file.

Install python3: sudo apt install python3

Install pip3: sudo apt install python3-pip

Install virtualenv: pip3 install virtualenv

Setup back-end

virtualenv venv source venv/bin/activate pip install -r requirements.txt

Now check if your flask app is running fine by running the command python app.py

So far both the front-end and back-end are working fine on the server.

Let's install pm2 now.

npm install pm2 -g

Now run your back-end app in background using pm2

pm2 start app.py --interpreter venv/bin/python3 pm2 save

It is important to run pm2 save so that so it will respawn after reboot

Now, your back-end app is continuously running on the server in background on port 5000 (Assuming you have defined port 5000)

Setup front-end
To set up the front-end, first, you need to build your Quasar app.

quasar build

Once you run the quasar build command, it will create the spa folder in the dist directory. (path: dist/spa)

To make the front end available, you need to copy spa folder at /var/www/html/ path.

I recommend you create the deployment script named deploy-front-end.sh within your quasar-app folder with the following content.

sudo rm -rf /var/www/html/demo_app/ sudo cp -r dist/spa /var/www/html/demo_app

This will copy static app (spa) at /var/www/html location.

Now, you can expose your front end to the outside world through the Nginx web server.

Now, your front-end and back-end both are working on the server.

The final step is to configure your full-stack application in Nginx.

Navigate to /etc/nginx/ location. There you will see 2 folders named sites-available and sites-enabled .

sites-available contains configuration files of all the available websites you may have.

sites-enabled contains those websites which are currently live.

Now go to sites-available folder and create the file named demo_app with the following content.

`server {
root /var/www/html;

server_name _;
location /api/ {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://127.0.0.1:5000;
}
location / {
    root /var/www/html/demo_app;
    try_files $uri $uri/ /index.html;
}

Here, /api is where your back-end running. Since your python is running on port 5000 , you can see I have given location http://127.0.0.1:5000

Since we have copied the front-end to /var/www/html/demo_app location, in Nginx / location, I have given that path.

Now, your website is available but not yet live. We need to link it to sites-enabled location to make it available on the internet.

Navigate to /etc/nginx/sites-enabled location and run the following command.

sudo ln -s ../sites-available/demo_app

Now, run the following commands to restart the Nginx web server so that it considers the latest changes made to it.

sudo service nginx reload sudo service nginx restart

Now, your website is live. If you haven't mapped the domain, you can access your website using the EC2 server's public IP or public URL.

I hope this will help you deploy your full-stack applications which you have developed using the Quasar framework and Python-Flask framework on the AWS EC2 server.

Do let me know of any doubts or issues you may have. Thank you for reading

Basics of AWS VPC: Understanding Subnets, Route Tables, Internet Gateways, and NAT Gateways

Mayank Patel — Wed, 25 Jan 2023 12:12:09 +0000

What is AWS VPC?
Amazon Virtual Private Cloud (VPC) is a virtual network allocated to your AWS account. If you are wondering what a virtual network is, it allows communication between computers, servers, or other devices. VPC allows you to start AWS resources like EC2(Server) in your virtual network.

VPC is basically an IP CIDR block that AWS allocates to your AWS account. White creating the AWS VPC, you just need to give inputs to the VPC name and IPv4 CIDR block for example 10.30.0.0/24. There are some advanced configuration options as well but you don't need to worry about them for now.

For example, you have created VPC named dev-vpc with an IP range 10.0.0.0/24

VPC Name: dev-vpc

IPV4 Range: 10.0.0.0/24

Now, this IP range is allocated to your AWS account and nobody else can have the same IP range.

What is Subnet?
A subnet is a set of IP addresses in your VPC. A subnet must be in a single availability zone. Availability Zones are distinct locations within the AWS Region. For example, one availability zone is ap-south-1: Asia Pacific.

To create a new Subnet, you need to first select the VPC from the VPC dropdown. Second, name your subnet, choose the availability zone and give IPV4 CIDR block. Please note that your IPV4 CIDR block must reside within the IP range of your selected VPC.

Create public subnet

Choose VPC: dev-vpc
Subnet name: public-subnet-1
Availability Zone: ap-south-1
IPV4 CIDR Block: 10.0.1.0/24

Create private subnet

Choose VPC: dev-vpc
Subnet name: private-subnet-1
Availability Zone: ap-south-1
IPV4 CIDR Block: 10.0.2.0/24

Once you create the subnet, resources within this subnet are not able to connect to the internet or route outbound traffic yet. There are 2 types of subnects.

Public subnet
Private subnet

Difference between the public subnet and private subnet
If we talk in simple language, instances in the public subnet can send traffic to the outside world whereas instances in the private subnet can't.

Now you must be wondering how we define/identify public and private subnets. To understand it better, let's come back to the subnet we created named public-subnet-1. I have named it "public" but it is not public yet.

To understand between the public subnet and private subnet, let's understand the Route table, Internet gateway, and NAT gateway

Route Table: It is used to do routing decisions. It contains existing routes to CIDR blocks outside of the ranges in your VPC. For example, it controls routing to Internet gateways, NAT gateways

Internet Gateway: It is a component that allows communication between VPC and internet. If your VPC doesn't have an internet gateway, resources within your VPC can't be accessed from the internet. For example, a website deployed to one of your EC2 servers.

NAT Gateway: A Network Address Translation (NAT) allows instances in your private subnet to connect to outside services like Databases but restricts external services to connecting to these instances.

One key thing to note while creating NAT Gateway is that "You must create NAT gateway in a public subnet so that other resources within the same VPC can communicate internally"

You just need to give a name to the route table and create. Once the route table is created, you can select that route table, and add routes to it. For example:

RTB-Public: A route table with a target to Internet gateway is a public route table.

RTB-Private: A route table with a target to NAT gateway is a private route table.

Now, let's come to the difference between public and private subnets.

A subnet which is connected to Public route table is Public subnet since the resources under that subnet can route outbound traffic to internet and outside services can also connect to these instances.

A subnet which is connected to Private route table is Private subnet since the resources under that subnet can route outbound traffic to internet but outside services can't connect to these instances.

Create an Internet Gateway named "igw-dev".

Create the NAT Gateway named "nat-dev" under one of the public subnets.

Choose route table RTB-Public, select Routes tab, and select Add Route. Under the Target, select the internet gateway named "igw-dev"

Choose route table RTB-Private, select Routes tab, and select Add Route. Under the Target, select the NAT gateway named "nat-dev"

Now, both public and private route tables are ready. We can assign subnets to these route tables.

Select route table RTB-Public again. Select the "Subnet associations" tab and click "Edit subnet associations". There check "public-subnet-1" and click "Save associations"

Select route table RTB-Private again. Select the "Subnet associations" tab and click "Edit subnet associations". There check "private-subnet-1" and click "Save associations"

Now, you have successfully created VPC, Subnets (Public & Private), Internet gateway, NAT gateway, Route tables and associations between Route table to Subnets.

Please post your comments regarding any doubts you may have! Thank you for taking the time to read my blog.

Quasar Admin CRM New Version [Premium] .. Quasar 2/Vue 3

Mayank Patel — Wed, 19 Oct 2022 12:14:08 +0000

I have re-designed my Admin CRM template and given it a totally new look. You can buy the new version for $79. If you are interested, please email me at mayank091193@gmail.com

Live preview: https://quasar-admin-crm-premium.netlify.app/

Few Features:

Modern and responsive design
CRM Dashboard
Analytics Dashboard
Charts
Calendar
Export Feature

Please provide your valuable feedback and I will try to work on it. I will be adding a few more screens to the premium version in the near future.

Please find some screenshots of the new version below.

Open source templates using Quasar framework/Vue.js

Mayank Patel — Wed, 14 Sep 2022 13:16:58 +0000

If you are looking for open source Quasar templates, please do checkout my work on GitHub. It may help you speed up at least your front-end development.

Please provide the valuable feedback as it helps me build better templates in the future.

If my work helps you in any way, please do consider supporting my work.

GitHub Sponsors: https://github.com/sponsors/mayank091193
Buy me a coffee: https://www.buymeacoffee.com/mayank091193

If you are looking for the template built using latest version of Quasar framework/Vue.js, you can checkout my premium admin CRM template(Live preview) at the below link:

https://next-quasar-admin-crm.netlify.app/

Thank you,
Mayank Patel
mayank091193@gmail.com

Quasar admin CRM with Quasar 2!

Mayank Patel — Mon, 03 Jan 2022 12:02:43 +0000

I have migrated my Quasar Admin CRM template to Quasar 2! I am offering it at the cheap price of $49! If you want to purchase, please send me an email at mayank091193@gmail.com

Live demo:

https://next-quasar-admin-crm.netlify.app/

Do let me know in case of any questions.

Quasar App Extension QWidgets

Mayank Patel — Mon, 01 Feb 2021 15:27:10 +0000

I just released the new quasar extension QWidgets (NPM Package). It allows you to render cool beautiful widgets on your website.

Widgets added in the first version:

Countdown
Stopwatch
Weather

NPM Package: https://www.npmjs.com/package/quasar-app-extension-q-widgets

GitHub: https://github.com/mayank091193/quasar-widgets

Live Preview: https://quasar-widgets.netlify.app/#/docs

Any feature request would be greatly appreciated. I will try my best to add the new widget.

Few Screenshots:

Any feedback will be greatly appreciated!

In case you want to support my open source work, do check out my GitHub profile:

https://github.com/sponsors/mayank091193

Quasar Admin CRM - Global dark mode (All pages)

Mayank Patel — Thu, 13 Aug 2020 05:41:12 +0000

Quasar Admin CRM global dark mode is here! Integrated the dark mode on all pages.

Source code: https://github.com/mayank091193/quasar-admin-crm

Live preview: https://quasar-admin-crm-template.netlify.app/dashboard

Any feedback will be greatly appreciated.

If it helps you, Sponsor me to support my open-source work💖 https://github.com/sponsors/mayank091193

QDraggableTree v0.0.4 has been released!

Mayank Patel — Thu, 16 Jul 2020 10:36:52 +0000

QDraggableTree v0.0.4 has been released!

Added the ability to drag a node as a sub child of a node without children
Ability to drop a node even if the sub-tree is closed

Source code: https://github.com/mayank091193/quasar-draggable-tree

Live preview: https://quasar-draggable-tree.netlify.app/docs

NPM Package: https://npmjs.com/package/quasar-app-extension-qdraggabletree

Please check out the release notes here. https://github.com/mayank091193/quasar-draggable-tree/blob/master/app-extension/CHANGELOG.md

If it helps you, Sponsor me to support my open-source work💖 https://github.com/sponsors/mayank091193

Any feedback will be greatly appreciated.

Thank you!

Quasar Admin CRM version 3 (Dark mode)

Mayank Patel — Thu, 09 Jul 2020 10:05:04 +0000

Quasar Admin CRM version 3 (Dark mode) is here! Any feedback will be greatly appreciated.

Source code: https://github.com/mayank091193/quasar-admin-crm

Live preview: https://quasar-admin-crm-template.netlify.app/dashboard_v3

If it helps you, Sponsor me to support my open-source work💖 https://github.com/sponsors/mayank091193

I hope you will like it.

Thank you!