<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Umer</title>
    <description>The latest articles on DEV Community by Umer (@umer009).</description>
    <link>https://dev.to/umer009</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F556154%2F8954bc94-f72d-4116-9a0e-ce430d0127ef.jpg</url>
      <title>DEV Community: Umer</title>
      <link>https://dev.to/umer009</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/umer009"/>
    <language>en</language>
    <item>
      <title>Angular 17 vs Angular 19: What’s New and Why It Matters!</title>
      <dc:creator>Umer</dc:creator>
      <pubDate>Fri, 18 Jul 2025 16:59:26 +0000</pubDate>
      <link>https://dev.to/umer009/angular-17-vs-angular-19-whats-new-and-why-it-matters-1aih</link>
      <guid>https://dev.to/umer009/angular-17-vs-angular-19-whats-new-and-why-it-matters-1aih</guid>
      <description>&lt;p&gt;As an Angular developer, I’ve been closely following the evolution from Angular 17 to the latest Angular 19, and the improvements are exciting for both developers and businesses!&lt;/p&gt;

&lt;p&gt;🔍 What’s New in Angular 19:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;✅ Better Performance for end-users.&lt;/li&gt;
&lt;li&gt;✅ Less Code to maintain = faster feature delivery.&lt;/li&gt;
&lt;li&gt;✅ Improved SEO for marketing success.&lt;/li&gt;
&lt;li&gt;✅ Future-Ready Architecture with standalone components and signals.&lt;/li&gt;
&lt;li&gt;✅ Easier Onboarding for new developers joining the project.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Angular 19 shows how much the Angular team listens to the community — it’s not just about syntax updates, it’s about developer experience and performance gains.&lt;/p&gt;

&lt;p&gt;If you’re still on Angular 17 or older, it might be time to plan your upgrade and enjoy these amazing benefits. 🚀&lt;/p&gt;

</description>
      <category>angular</category>
      <category>performance</category>
      <category>productivity</category>
      <category>seo</category>
    </item>
    <item>
      <title>How to deploy Puppeteer with node on Render.com</title>
      <dc:creator>Umer</dc:creator>
      <pubDate>Tue, 24 Dec 2024 13:43:00 +0000</pubDate>
      <link>https://dev.to/umer009/how-to-deploy-puppeteer-with-node-on-rendercom-ml4</link>
      <guid>https://dev.to/umer009/how-to-deploy-puppeteer-with-node-on-rendercom-ml4</guid>
      <description>&lt;p&gt;Hello everyone, today I want to share my experience with everyone it’s a very challenging to deploy puppeteer on render because after a lot of search and I did not find any solution and chatgpt as well failed to give me a complete and proper solution after 3 days a lot searches I found the solution and successfully deploy my puppeteer node app on render. Today we will discuss how to deploy apps on render. I’ll try to explain everything in this post.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw72lfhtw6e14re9va9ou.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw72lfhtw6e14re9va9ou.png" alt="Image description" width="604" height="293"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hopefully this will be in your code as well and I had the issue when I deployed my app on render then on the “Launch” line my code was broken and said that chrome is not supported on it.&lt;/p&gt;

&lt;p&gt;My package.json file. Install the puppeteer latest version&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnhk5gzi5j1scw0uhnt76.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnhk5gzi5j1scw0uhnt76.png" alt="Image description" width="656" height="503"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After that create a new file with the name of “render-build.sh” on the root of the project. Like that&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F79hzktidtnwpvmz8yu9p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F79hzktidtnwpvmz8yu9p.png" alt="Image description" width="394" height="326"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In the “render-build.sh” file Add these codes.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;#!/usr/bin/env bash
# exit on error
set -o errexit

# Install dependencies
npm install
# Uncomment this line if you need to build your project
# npm run build 

# Ensure the Puppeteer cache directory exists
PUPPETEER_CACHE_DIR=/opt/render/.cache/puppeteer
mkdir -p $PUPPETEER_CACHE_DIR

# Install Puppeteer and download Chrome
npx puppeteer browsers install chrome

# Store/pull Puppeteer cache with build cache
if [[ ! -d $PUPPETEER_CACHE_DIR ]]; then 
  echo "...Copying Puppeteer Cache from Build Cache"
  # Copying from the actual path where Puppeteer stores its Chrome binary
  cp -R /opt/render/project/src/.cache/puppeteer/chrome/ $PUPPETEER_CACHE_DIR
else 
  echo "...Storing Puppeteer Cache in Build Cache"
  cp -R $PUPPETEER_CACHE_DIR /opt/render/project/src/.cache/puppeteer/chrome/
fi

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is the screenshot of the code.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvj3vo86cnffu75w0jclx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvj3vo86cnffu75w0jclx.png" alt="Image description" width="711" height="602"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After that push these changes to the github and then go to the render dashboard and add the build command to the render dashboard. Go to your service and then go to the Environment tab and then scroll down to the build section and add the line.&lt;/p&gt;

&lt;p&gt;“./render-build.sh”&lt;/p&gt;

&lt;p&gt;After adding just save and deploy again your changes. Now hopefully your changes will be deloyed and puppeteer will work successfully. If you face any route issue in the logs like &lt;/p&gt;

&lt;p&gt;Said that any route issue then check your logs and if your opt routes is not match this below route then change your render-build file route and push changes and deploy again.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F09xl8zvc6u1n367aauyy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F09xl8zvc6u1n367aauyy.png" alt="Image description" width="739" height="587"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hopefully this post will be helpful for you. If you face any issue please comment below I’ll try to help you.&lt;/p&gt;

&lt;p&gt;Thanks&lt;/p&gt;

</description>
    </item>
    <item>
      <title>How to deploy Puppeteer with node on Render.com</title>
      <dc:creator>Umer</dc:creator>
      <pubDate>Tue, 24 Dec 2024 13:43:00 +0000</pubDate>
      <link>https://dev.to/umer009/how-to-deploy-puppeteer-with-node-on-rendercom-4jo7</link>
      <guid>https://dev.to/umer009/how-to-deploy-puppeteer-with-node-on-rendercom-4jo7</guid>
      <description>&lt;p&gt;Hello everyone, today I want to share my experience with everyone it’s a very challenging to deploy puppeteer on render because after a lot of search and I did not find an solution and chatgpt as well failed to give me a complete and proper solution after 3 days a lot searches I found the solution and successfully deploy my puppeteer node app on render. Today we will discuss how to deploy apps on render. I’ll try to explain everything in this post.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw72lfhtw6e14re9va9ou.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw72lfhtw6e14re9va9ou.png" alt="Image description" width="604" height="293"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hopefully this will be in your code as well and I had the issue when I deployed my app on render then on the “Launch” line my code was broken and said that chrome is not supported on it.&lt;/p&gt;

&lt;p&gt;My package.json file. Install the puppeteer latest version&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnhk5gzi5j1scw0uhnt76.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnhk5gzi5j1scw0uhnt76.png" alt="Image description" width="656" height="503"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After that create a new file with the name of “render-build.sh” on the root of the project. Like that&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F79hzktidtnwpvmz8yu9p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F79hzktidtnwpvmz8yu9p.png" alt="Image description" width="394" height="326"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In the “render-build.sh” file Add these codes.&lt;/p&gt;

&lt;h1&gt;
  
  
  !/usr/bin/env bash
&lt;/h1&gt;

&lt;h1&gt;
  
  
  exit on error
&lt;/h1&gt;

&lt;p&gt;set -o errexit&lt;/p&gt;

&lt;h1&gt;
  
  
  Install dependencies
&lt;/h1&gt;

&lt;p&gt;npm install&lt;/p&gt;

&lt;h1&gt;
  
  
  Uncomment this line if you need to build your project
&lt;/h1&gt;

&lt;h1&gt;
  
  
  npm run build
&lt;/h1&gt;

&lt;h1&gt;
  
  
  Ensure the Puppeteer cache directory exists
&lt;/h1&gt;

&lt;p&gt;PUPPETEER_CACHE_DIR=/opt/render/.cache/puppeteer&lt;br&gt;
mkdir -p $PUPPETEER_CACHE_DIR&lt;/p&gt;

&lt;h1&gt;
  
  
  Install Puppeteer and download Chrome
&lt;/h1&gt;

&lt;p&gt;npx puppeteer browsers install chrome&lt;/p&gt;

&lt;h1&gt;
  
  
  Store/pull Puppeteer cache with build cache
&lt;/h1&gt;

&lt;p&gt;if [[ ! -d $PUPPETEER_CACHE_DIR ]]; then &lt;br&gt;
  echo "...Copying Puppeteer Cache from Build Cache"&lt;br&gt;
  # Copying from the actual path where Puppeteer stores its Chrome binary&lt;br&gt;
  cp -R /opt/render/project/src/.cache/puppeteer/chrome/ $PUPPETEER_CACHE_DIR&lt;br&gt;
else &lt;br&gt;
  echo "...Storing Puppeteer Cache in Build Cache"&lt;br&gt;
  cp -R $PUPPETEER_CACHE_DIR /opt/render/project/src/.cache/puppeteer/chrome/&lt;br&gt;
fi&lt;/p&gt;

&lt;p&gt;This is the screenshot of the code.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvj3vo86cnffu75w0jclx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvj3vo86cnffu75w0jclx.png" alt="Image description" width="711" height="602"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After that push these changes to the github and then go to the render dashboard and add the build command to the render dashboard. Go to your service and then go to the Environment tab and then scroll down to the build section and add the line.&lt;/p&gt;

&lt;p&gt;“./render-build.sh”&lt;/p&gt;

&lt;p&gt;After adding just save and deploy again your changes. Now hopefully your changes will be deloyed and puppeteer will work successfully. If you face any route issue in the logs like &lt;/p&gt;

&lt;p&gt;Said that any route issue then check your logs and if your opt routes is not match this below route then change your render-build file route and push changes and deploy again.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F09xl8zvc6u1n367aauyy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F09xl8zvc6u1n367aauyy.png" alt="Image description" width="739" height="587"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hopefully this post will be helpful for you. If you face any issue please comment below I’ll try to help you.&lt;/p&gt;

&lt;p&gt;Thanks&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
