<?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: Tharaka Sandaruwan</title>
    <description>The latest articles on DEV Community by Tharaka Sandaruwan (@tharakamts).</description>
    <link>https://dev.to/tharakamts</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%2F968564%2Fe8f0caae-c03d-47a1-9e5f-b004daeff01d.jpeg</url>
      <title>DEV Community: Tharaka Sandaruwan</title>
      <link>https://dev.to/tharakamts</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/tharakamts"/>
    <language>en</language>
    <item>
      <title>Demystifying Serverless Architecture: Why Your Next API Should Be Event-Driven</title>
      <dc:creator>Tharaka Sandaruwan</dc:creator>
      <pubDate>Tue, 10 Feb 2026 18:42:43 +0000</pubDate>
      <link>https://dev.to/tharakamts/demystifying-serverless-architecture-why-your-next-api-should-be-event-driven-3kf7</link>
      <guid>https://dev.to/tharakamts/demystifying-serverless-architecture-why-your-next-api-should-be-event-driven-3kf7</guid>
      <description>&lt;p&gt;In the modern cloud era, the term "Serverless" is often thrown around as a buzzword. However, for a backend engineer, it represents a paradigm shift from managing infrastructure to orchestrating logic. If you are still worried about CPU utilization and memory patching, it’s time to look at the event-driven world.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Serverless, really?
&lt;/h2&gt;

&lt;p&gt;Serverless does not mean the absence of servers; it means abstraction of infrastructure. You provide the code (the "Function"), and the cloud provider handles the execution, scaling, and availability.&lt;/p&gt;

&lt;p&gt;In the AWS ecosystem, this is primarily powered by AWS Lambda.&lt;/p&gt;

&lt;h2&gt;
  
  
  Let’s Take a Real-World Example: A Food Delivery App
&lt;/h2&gt;

&lt;p&gt;Imagine you are building the backend for a food delivery service.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;The Request (API Gateway):&lt;/strong&gt; A user places an order. The request hits the API Gateway, which acts as the entry point, handling authentication and rate limiting.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;The Logic (AWS Lambda):&lt;/strong&gt; The Gateway triggers a Lambda function. This function validates the order and calculates the total. It only runs for the few milliseconds needed to process the order.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;The Data (DynamoDB):&lt;/strong&gt; The order details are stored in DynamoDB. Being NoSQL and serverless, it scales instantly to handle thousands of orders during lunch hour.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;The Decoupling (EventBridge):&lt;/strong&gt; Once the order is saved, we emit a OrderPlaced event to Amazon EventBridge. This allows other parts of the system (like the Driver Notification service or the Kitchen Dashboard) to react independently without slowing down the main order flow.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Serverless Framework vs. Terraform: The Right Tool for the Job
&lt;/h2&gt;

&lt;p&gt;One common point of confusion is whether to use Serverless Framework or Terraform. Both are Infrastructure as Code (IaC) tools, but they serve different purposes.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Serverless Framework:&lt;/strong&gt; Highly specialized for application developers. It streamlines the deployment of Lambda, API Gateway, and SQS/SNS with a developer-friendly syntax (serverless.yml).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Terraform (HashiCorp):&lt;/strong&gt; A broader tool for DevOps professionals. It is designed to manage complex, multi-cloud infrastructure like VPCs, RDS instances, and Kubernetes clusters using HCL (HashiCorp Configuration Language).&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;The Verdict:&lt;/strong&gt; If your primary focus is building and deploying serverless functions quickly, the Serverless Framework is the industry standard for a frictionless experience.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why the Tech World is Moving to Serverless
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Zero Idle Costs:&lt;/strong&gt; You pay only for the execution time. If no one uses your API at 3 AM, your cost is exactly zero.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;High Availability by Default:&lt;/strong&gt; AWS Lambda and DynamoDB are distributed across multiple availability zones automatically.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Focus on Value:&lt;/strong&gt; Engineers spend time on business logic (Domain) rather than server maintenance (Infrastructure).&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Serverless is more than just a cost-saving measure; it’s a way to build decoupled, resilient, and highly scalable systems with minimal operational overhead. As we move towards 2026, the "function-first" mindset is becoming the default for high-growth startups and enterprises alike.&lt;/p&gt;

</description>
      <category>api</category>
      <category>architecture</category>
      <category>aws</category>
      <category>serverless</category>
    </item>
    <item>
      <title>Understanding the Linux CLI to Master It</title>
      <dc:creator>Tharaka Sandaruwan</dc:creator>
      <pubDate>Mon, 26 Feb 2024 16:22:16 +0000</pubDate>
      <link>https://dev.to/tharakamts/understanding-the-linux-cli-to-master-it-4809</link>
      <guid>https://dev.to/tharakamts/understanding-the-linux-cli-to-master-it-4809</guid>
      <description>&lt;p&gt;The Linux command line interface (CLI) is a powerful tool that allows users to interact with the operating system and execute commands efficiently. To become proficient in using the Linux CLI, it's essential to understand how to read manuals for commands, pass options to commands, and get help when needed. In this article, we'll explore these aspects of mastering the Linux CLI.&lt;/p&gt;

&lt;h3&gt;
  
  
  Reading Manuals for Commands:
&lt;/h3&gt;

&lt;p&gt;Linux provides manual pages (man pages) for most commands, offering detailed information on their usage, options, and examples. To access the manual for a command, use the "man" command followed by the name of the command.&lt;/p&gt;

&lt;p&gt;Example:&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%2Fqlyr3waoc6otw0nonhot.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%2Fqlyr3waoc6otw0nonhot.png" alt="get manual page for ls command in linux" width="800" height="162"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This command displays the manual page for the "ls" command, providing information on its various options and usage scenarios. Use the arrow keys or Page Up/Page Down keys to navigate through the manual pages. Press "q" to exit the manual.&lt;/p&gt;

&lt;h3&gt;
  
  
  Passing Options to Commands:
&lt;/h3&gt;

&lt;p&gt;Many Linux commands accept options or flags that modify their behavior. Options are usually preceded by a hyphen (-) or double hyphen (--). To pass options to a command, simply append them after the command name.&lt;/p&gt;

&lt;p&gt;Example:&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%2F81sgms36w6u1yxafcg35.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%2F81sgms36w6u1yxafcg35.png" alt="showing ls -la command" width="800" height="162"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this example, the "-l" option is passed to the "ls" command to display detailed information about files and directories.&lt;/p&gt;

&lt;h3&gt;
  
  
  Getting Help for Commands:
&lt;/h3&gt;

&lt;p&gt;If you're unsure about how to use a command or need a quick refresher on its syntax, you can use the "--help" option or consult online resources.&lt;/p&gt;

&lt;p&gt;Example:&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%2Fvrzreg49btblp94lwoje.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%2Fvrzreg49btblp94lwoje.png" alt="ls --help command show" width="800" height="162"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This command displays a brief help message for the "ls" command, listing its available options and their descriptions. Alternatively, you can search for command usage and examples on Linux community forums, websites, or documentation.&lt;/p&gt;

&lt;h3&gt;
  
  
  Tips for Mastering the Linux CLI:
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Practice regularly: The more you use the command line, the more comfortable you'll become with its nuances and capabilities.&lt;/li&gt;
&lt;li&gt;Experiment with different commands: Try out various commands and options to familiarize yourself with their functionalities.&lt;/li&gt;
&lt;li&gt;Take notes: Document useful commands and their options in a personal cheat sheet for quick reference.&lt;/li&gt;
&lt;li&gt;Join online communities: Participate in Linux forums and communities to learn from others and seek assistance when needed.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;By understanding how to read manuals, pass options, and get help for commands, you'll gain confidence and proficiency in mastering the Linux command line interface. With practice and persistence, you'll become adept at efficiently managing tasks and workflows in the Linux environment.&lt;/p&gt;

</description>
      <category>linux</category>
      <category>devops</category>
      <category>terminal</category>
      <category>ubuntu</category>
    </item>
    <item>
      <title>Mastering Standard Commits: Quick Guide to Structured Commit Messages</title>
      <dc:creator>Tharaka Sandaruwan</dc:creator>
      <pubDate>Wed, 27 Dec 2023 18:34:34 +0000</pubDate>
      <link>https://dev.to/tharakamts/mastering-standard-commits-quick-guide-to-structured-commit-messages-2nm1</link>
      <guid>https://dev.to/tharakamts/mastering-standard-commits-quick-guide-to-structured-commit-messages-2nm1</guid>
      <description>&lt;p&gt;Hey fellow devs! 👋 Today, let's dive into the world of "Standard Commits" and why they're the secret sauce to leveling up your version control game. Whether you're a seasoned pro or just getting started, writing standardized commit messages can make your collaboration smoother, your history cleaner, and your future self a lot happier. So, let's get down to the nitty-gritty and learn how to craft commits like a pro.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why Standard Commits?
&lt;/h3&gt;

&lt;p&gt;Before we jump into the how, let's quickly chat about the why. Standard Commits bring order and clarity to your project's version history. By adopting a common convention, you're giving your team and your future self a roadmap to understand the changes in your codebase. No more deciphering vague commit messages or wondering what that mysterious "fixed stuff" commit actually did.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Basics
&lt;/h3&gt;

&lt;p&gt;Alright, let's break down the basics of Standard Commits using the following conventions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;fix:&lt;/strong&gt; A bug fix. Because, let's face it, bugs happen, but so does fixing them.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;build:&lt;/strong&gt; Changes that impact your build system, whether it's gulp, webpack, or another build tool.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;per:&lt;/strong&gt; Improvements in performance. Who doesn't love a faster app?&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;feat:&lt;/strong&gt; The star of the show! A new feature that you've added to your project.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;chore:&lt;/strong&gt; A task that isn't a feature, bug fix, or build change. Think of it as housekeeping for your codebase.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;docs:&lt;/strong&gt; Changes in the documentation of your project. Because good documentation is key!&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;style:&lt;/strong&gt; Anything related to the aesthetics of your app. Keep it looking sharp!&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;refactor:&lt;/strong&gt; A spring cleaning for your code. Restructuring without changing the external behavior.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;test:&lt;/strong&gt; Changes related to testing. Testing is caring, right?&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;improvement:&lt;/strong&gt; Making something better without introducing a new feature.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  How to Write Standard Commits
&lt;/h3&gt;

&lt;p&gt;Now, let's break down how to write these commits in a way that makes sense and is easy to follow. Consider this a mini cheat sheet:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Start with the type:&lt;/strong&gt; Begin your commit message with one of the defined types (e.g., &lt;code&gt;fix, feat, chore&lt;/code&gt;).
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;fix&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;resolve&lt;/span&gt; &lt;span class="nx"&gt;issue&lt;/span&gt; &lt;span class="kd"&gt;with&lt;/span&gt; &lt;span class="nx"&gt;login&lt;/span&gt; &lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;not&lt;/span&gt; &lt;span class="nx"&gt;working&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Be concise and clear:&lt;/strong&gt; Keep it short and sweet. Clearly describe what your commit is doing.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;feat&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;add&lt;/span&gt; &lt;span class="nx"&gt;dark&lt;/span&gt; &lt;span class="nx"&gt;mode&lt;/span&gt; &lt;span class="nx"&gt;toggle&lt;/span&gt; &lt;span class="nx"&gt;to&lt;/span&gt; &lt;span class="nx"&gt;settings&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Add more details if needed:&lt;/strong&gt; If your commit needs additional context, provide it in the body of the message.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;feat&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;add&lt;/span&gt; &lt;span class="nx"&gt;dark&lt;/span&gt; &lt;span class="nx"&gt;mode&lt;/span&gt; &lt;span class="nx"&gt;toggle&lt;/span&gt; &lt;span class="nx"&gt;to&lt;/span&gt; &lt;span class="nx"&gt;settings&lt;/span&gt;

&lt;span class="nx"&gt;This&lt;/span&gt; &lt;span class="nx"&gt;commit&lt;/span&gt; &lt;span class="nx"&gt;introduces&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;friendly&lt;/span&gt; &lt;span class="nx"&gt;toggle&lt;/span&gt; &lt;span class="k"&gt;switch&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="nx"&gt;the&lt;/span&gt; &lt;span class="nx"&gt;settings&lt;/span&gt; &lt;span class="nx"&gt;menu&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;allowing&lt;/span&gt; &lt;span class="nx"&gt;users&lt;/span&gt; &lt;span class="nx"&gt;to&lt;/span&gt; &lt;span class="k"&gt;switch&lt;/span&gt; &lt;span class="nx"&gt;between&lt;/span&gt; &lt;span class="nx"&gt;light&lt;/span&gt; &lt;span class="nx"&gt;and&lt;/span&gt; &lt;span class="nx"&gt;dark&lt;/span&gt; &lt;span class="nx"&gt;modes&lt;/span&gt; &lt;span class="nx"&gt;seamlessly&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Additional Resources
&lt;/h3&gt;

&lt;p&gt;Ready to explore more? Check out these links for in-depth knowledge:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://gist.github.com/qoomon/5dfcdf8eec66a051ecd85625518cfd13" rel="noopener noreferrer"&gt;Conventional Commit Messages&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716" rel="noopener noreferrer"&gt;Semantic Commit Messages&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.conventionalcommits.org/en/v1.0.0/" rel="noopener noreferrer"&gt;Conventional Commits&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Putting It Into Practice
&lt;/h3&gt;

&lt;p&gt;Now that you know the ropes, start incorporating Standard Commits into your workflow. Your future self and your teammates will thank you for the clear, structured history. Remember, communication is key in any relationship, and that includes your relationship with your codebase!&lt;/p&gt;

&lt;p&gt;So, there you have it! Standard Commits in a nutshell. Give it a spin in your next project, and let the clean commit messages tell the story of your code. Happy coding, friends! 🚀&lt;/p&gt;

</description>
      <category>programming</category>
      <category>git</category>
      <category>tutorial</category>
      <category>beginners</category>
    </item>
    <item>
      <title>How to Deploy Your React or Vite Project on GitHub Pages using gh-pages</title>
      <dc:creator>Tharaka Sandaruwan</dc:creator>
      <pubDate>Mon, 25 Dec 2023 22:04:05 +0000</pubDate>
      <link>https://dev.to/tharakamts/how-to-deploy-your-react-or-vite-project-on-github-pages-using-gh-pages-d7f</link>
      <guid>https://dev.to/tharakamts/how-to-deploy-your-react-or-vite-project-on-github-pages-using-gh-pages-d7f</guid>
      <description>&lt;p&gt;GitHub Pages provides a simple and free way to host and showcase your web projects. If you’ve built your project using React or Vite, deploying it on GitHub Pages is a straightforward process. In this guide, we’ll walk through the steps of deploying your React or Vite project using the gh-pages library.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Prerequisites&lt;/strong&gt;&lt;br&gt;
Before you begin, ensure you have the following:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;GitHub account.&lt;/li&gt;
&lt;li&gt;A React or Vite project hosted on GitHub.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  &lt;strong&gt;Step 1: Install gh-pages on your project&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Go to your project folder and install the gh-pages package as a dev dependency in your project. Open your terminal and run the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm i gh-pages &lt;span class="nt"&gt;--save-dev&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For yarn users:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;yarn add gh-pages &lt;span class="nt"&gt;-D&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;Step 2: Update your package.json&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Open your package.json file and update it as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"homepage"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"http://&amp;lt;git username&amp;gt;.github.io/&amp;lt;repo name&amp;gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;Add&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;this&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;line&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"example"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;...Other&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;scripts&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;...Other&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;scripts&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"predeploy"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npm run build"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;Add&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;this&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;line&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"deploy"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"gh-pages -d &amp;lt;build folder name&amp;gt;"&lt;/span&gt;&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;Add&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;this&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;line&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let’s say your github username is &lt;em&gt;‘gituser’&lt;/em&gt; and your project hosted repository name is &lt;em&gt;'repo'&lt;/em&gt;. In this case, your package.json is something like this.&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%2F8hrjhemuamfilnqp28ox.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%2F8hrjhemuamfilnqp28ox.png" alt="package.json file" width="800" height="615"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This configuration sets up the necessary scripts to build your project before deploying it with gh-pages.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;If you are using vite Update the vite.config.js as follows before the deployment:&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&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%2Fyxbjcp1l96n2y3axa1vy.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%2Fyxbjcp1l96n2y3axa1vy.png" alt="vite.config.js file" width="800" height="437"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Step 3: Deploy Your Project&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Now that gh-pages is set up, deploy your project by running the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run deploy
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For yarn users:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;yarn deploy
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command will deploy your build folder into the gh-pages branch in your github repository. You can verify it by navigating your github project repository action tab. It will appear like this. Once deployment is complete, you will see the green tick.&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%2F7nn4gpaawqbbqpg7l5w7.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%2F7nn4gpaawqbbqpg7l5w7.png" alt="github actions" width="800" height="280"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Step 4: Configure GitHub Pages&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Go to your GitHub repository.&lt;/li&gt;
&lt;li&gt;Click on the “Settings” tab.&lt;/li&gt;
&lt;li&gt;Scroll down to the “GitHub Pages” section.&lt;/li&gt;
&lt;li&gt;In the “Source” dropdown, select the gh-pages branch.&lt;/li&gt;
&lt;li&gt;Click “Save.”&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Your React / Vite project is now deployed on GitHub Pages! You can access it using the link provided in the “GitHub Pages” section of your repository settings.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Tips and Troubleshooting&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Custom Domain:&lt;/strong&gt;&lt;br&gt;
If you have a custom domain, configure it in the “Custom domain” field in the GitHub Pages settings.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;404 Issues:&lt;/strong&gt;&lt;br&gt;
If you encounter 404 issues, ensure that your router is configured properly. For React Router, set the basename property in your BrowserRouter.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Conclusion&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Deploying your React/Vite project on GitHub Pages using gh-pages is a quick and effective way to showcase your work. By following these simple steps, you can easily share your web applications with the world. Happy coding!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>react</category>
      <category>githubactions</category>
      <category>vite</category>
    </item>
  </channel>
</rss>
