How to Send Emails in Node.js Using SendGrid

Sending emails is a fundamental feature in many web applications, enabling functionalities such as user onboarding, password resets, notifications, and more. In this post, we’ll explore how to send emails from a Node.js application using SendGrid, a reliable and scalable email delivery service.

When Does a Node.js App Need to Send Emails?

Emails play a crucial role in various aspects of web applications. Here are some common scenarios where your Node.js application might need to send emails:

  • User Registration: Sending welcome emails or account verification links.
  • Password Resets: Allowing users to reset their passwords securely.
  • Order Confirmations: Notifying users about their purchases.
  • Newsletters: Keeping users informed about updates and promotions.
  • System Alerts: Informing administrators about system events or errors.

Implementing email functionality enhances user experience and keeps users engaged with your application.

Why Use SendGrid?

SendGrid is a cloud-based email delivery service that offers a robust API for sending emails. Here are some advantages of using SendGrid:

  • Scalability: Capable of handling large volumes of emails efficiently.
  • Deliverability: High deliverability rates ensure your emails reach the inbox.
  • Analytics: Provides insights into email performance, such as open and click rates.
  • Templates: Supports dynamic templates for personalized emails.
  • Security: Offers features like two-factor authentication and API key permissions. 

With SendGrid, you can focus on building your application while relying on a trusted service for email delivery.

Setting Up SendGrid in a Node.js Application

Let’s walk through the steps to integrate SendGrid into your Node.js application.

1. Create a SendGrid Account and API Key

  • Sign up for a free SendGrid account at sendgrid.com.
  • After verifying your email, navigate to Settings > API Keys.
  • Click on Create API Key, provide a name, select Full Access, and create the key.
  • Copy the generated API key and store it securely.

2. Install SendGrid’s Node.js Library

In your Node.js project directory, install the @sendgrid/mail package:

npm install @sendgrid/mail

3. Configure SendGrid in Your Application

Create a file named sendEmail.js and add the following code:

const sgMail = require('@sendgrid/mail');
// Set your SendGrid API key
sgMail.setApiKey(process.env.SENDGRID_API_KEY);
// Define the email message
const msg = {
  to: 'recipient@example.com', // Replace with your recipient's email
  from: 'sender@example.com',  // Replace with your verified sender email
  subject: 'Hello from SendGrid',
  text: 'This is a plain text version of the email content.',
  html: '<strong>This is the HTML version of the email content.</strong>',
};
// Send the email
sgMail
  .send(msg)
  .then(() => {
    console.log('Email sent successfully.');
  })
  .catch((error) => {
    console.error('Error sending email:', error);
  });

Ensure you have set the SENDGRID_API_KEY environment variable with your API key.

4. Run the Email Script

Execute the script using Node.js:

node sendEmail.js

If configured correctly, you should see a confirmation message, and the email will be delivered to the specified recipient.

Additional Features

SendGrid offers additional functionalities to enhance your email capabilities:

  • Attachments: Include files in your emails by adding an attachments array to the message object.
  • Dynamic Templates: Create and manage email templates within SendGrid for consistent branding and personalization.
  • Batch Sending: Send emails to multiple recipients efficiently.
  • Event Webhooks: Receive real-time notifications about email events like opens, clicks, and bounces.

Explore SendGrid’s official documentation for more details on these features.

Alternatives to SendGrid

There are other options for sending emails in a Node.js application. You do not have to use SendGrid. For example, you can use Mailgun. Mailgun is a transactional email API service designed for developers. It offers a robust API to send, receive, and track emails effortlessly. Another option is to use Nodemailer. Nodemailer is a module for Node.js applications that allows easy email sending via SMTP. It’s ideal for sending emails through services like Gmail, Outlook, or any custom SMTP server.

Let me know in the comments section, or contact me, if you want to see examples of how to use Mailgun or Nodemailer.

Conclusion

Integrating SendGrid into your Node.js application streamlines the process of sending emails, allowing you to focus on building features rather than managing email infrastructure. With its scalability, reliability, and rich feature set, SendGrid is a valuable tool for any developer looking to implement email functionality.

Start sending emails in your Node.js projects today to enhance communication with your users.

Using JSON Web Tokens (JWT) for Stateless Authentication in Node.js

JSON Web Tokens (JWT) provide a simple, scalable way to authenticate users in your APIs without storing session state on the server. A JSON Web Token is a compact string that represents signed JSON data. It consists of three parts, each Base64-URL encoded and separated by dots:

<Header>.<Payload>.<Signature>

  • Header – Specifies the signing algorithm and token type.
  • Payload – Contains claims (e.g. user ID, roles, issued-at/expiration timestamps).
  • Signature – Ensures the token hasn’t been tampered with.

Because the signature is derived from the header + payload and a secret (or private key), you can verify both the integrity and authenticity of the token.

How JWTs Work

  1. Client logs in with credentials (e.g. email/password).
  2. Server validates the credentials and issues a JWT (jwt.sign).
  3. Client stores the token (e.g. in memory, localStorage, or a secure cookie).
  4. Subsequent requests include the token in the Authorization header (Bearer <token>).
  5. Server verifies the token (jwt.verify) on each request—no session lookup required.

Install & Configure

In most of my Node.js applications that use JWT for authentication, I use a popular library called jsonwebtoken. This can be installed with the below command.

npm install jsonwebtoken

Use the --save flag with the above command to add it to your project’s package.json file.

Generating a Token

const jwt = require('jsonwebtoken');
const SECRET = process.env.JWT_SECRET || 'replace-with-strong-secret';
// Create a payload with standard and custom claims
const payload = {
  sub: user.id,       // subject (user identifier)
  name: user.name,    // custom claim
  role: user.role     // custom claim
};
// Sign a token that expires in 1 hour
const token = jwt.sign(payload, SECRET, { expiresIn: '1h' });
console.log('Generated JWT:', token);

The above code shows how to create a token and sign it. You can add whatever data you need to authorize the user in the payload section of the token.

Verifying a Token

const jwt = require('jsonwebtoken');
const SECRET = process.env.JWT_SECRET;
try {
  const decoded = jwt.verify(token, SECRET);
  console.log('Decoded payload:', decoded);
} catch (err) {
  // TokenExpiredError or JsonWebTokenError
  console.error('JWT verification failed:', err.message);
}

In the above code, you can see how to validate a token, and then retrieve/decode the information that you stored in its payload.

Protecting Routes with Express Middleware

// auth.js
const jwt = require('jsonwebtoken');
const SECRET = process.env.JWT_SECRET;
function authenticateToken(req, res, next) {
  const authHeader = req.headers['authorization'];
  const token = authHeader?.split(' ')[1]; // Bearer <token>
  if (!token) return res.sendStatus(401); // Unauthorized
  jwt.verify(token, SECRET, (err, user) => {
    if (err) return res.sendStatus(403);   // Forbidden
    req.user = user;                       // attach payload to req
    next();
  });
}
module.exports = authenticateToken;

The above code shows how to create a generic function that you can use to authenticate a token.

// server.js
const express = require('express');
const jwt = require('jsonwebtoken');
const authenticateToken = require('./auth');
const app = express();
app.use(express.json());
// Public login route
app.post('/login', (req, res) => {
  // TODO: validate user credentials…
  const token = jwt.sign({ sub: user.id }, process.env.JWT_SECRET, { expiresIn: '1h' });
  res.json({ token });
});
// Protected profile route
app.get('/profile', authenticateToken, (req, res) => {
  res.json({ message: `Welcome back, ${req.user.name}!` });
});
app.listen(3000, () => console.log('Server running on http://localhost:3000'));

The above code shows how to add a middleware function to a route. If the function validates the token, the route can be executed. Otherwise, the user gets a 403 error.

Best Practices

Here are some best practices for using JSON Web Tokens (JWT) for authentication in a Node.js application. First of all, use short expiration values. In my example above, my token expires in 1 hour, but you can specify a value in minutes (15 minutes, for example). If you need your users to have longer sessions, a recommended practice is to implement refresh tokens.

Second, and this should go without saying, but never save sensitive information in the payload of the token. Data like passwords or personal information. And, always use HTTPS in your applications (whether you use JWT or not).

And, finally, the SECRET for signing and verifying tokens should be saved in a secure.

Conclusion

With JWTs and the jsonwebtoken package, you can build a stateless, scalable authentication layer for your Node.js applications. This approach reduces server memory overhead and simplifies horizontal scaling—perfect for APIs, SPAs, and mobile backends.

Ready to take it further? Consider adding refresh-token rotation, role-based access control, or integrating with OAuth2 providers.

Happy coding!

How to fix quota restrictions, cannot run builds in this region

If you have an application that you want to deploy to Google Cloud Run, but you’re getting the error “(gcloud.run.deploy) FAILED_PRECONDITION: failed precondition: due to quota restrictions, cannot run builds in this region. Please contact support“, then this blog post is for you.

I have a Node.js application that has been running smoothly for a couple of years now. The application is hosted on Google Cloud Platform using Cloud Run. However, recently, when I was trying to deploy an update to this application by running the below command:

gcloud run deploy ...

I started getting this error:

(gcloud.run.deploy) FAILED_PRECONDITION: failed precondition: due to quota restrictions, cannot run builds in this region. Please contact support

Looking at the quotas on Google Cloud Console did not reveal anything to me. I was not exceeding any quotas, and everything related to billing was in order.

The Solution

After digging through the Google Cloud forums, I came across a post that suggested that the issue was caused by a recent update to the gcloud CLI. If you have any version that is greater than 455.0.0, you will get this error. To find out what version of the CLI you have installed, run this command:

gcloud --version

The number that’s next to “Google Cloud SDK”, is your CLI version.

As of now, the only solution that I could find is to install version 455.0.0 of the CLI (if you have a newer version). This can be done by running this command:

gcloud components update --version 455.0.0

After downgrading to version 455.0.0, you should be able to deploy your applications without this error. Unfortunately, this is the only solution that I have for now. I will update this post if I find a more permanent solution, but in the meantime, this should get you through.

Please let me know if this does not work for you, or if you find a different solution that works better. You can do this by leaving a comment here, or by sending me an email through my contact page. Thank you!

Update 25-Jan-2024: I upgraded the CLI to v460.0.0, and I can confirm that this issue is now fixed.

Updating to Bootstrap 5

Bootstrap is one of the most popular CSS development frameworks used by web developers to create responsive websites. Bootstrap 5, the latest version of this framework, was released in May 2021. If you have previously built a website with Bootstrap 4, you might be wondering if it is worth updating to the latest version. In this blog post, we will discuss the benefits of updating your website from Bootstrap 4 to Bootstrap 5, and some of the steps you need to take to do so.

Why update to Bootstrap 5?

Bootstrap 5 brings some significant changes and improvements over Bootstrap 4. Some of the most notable changes are:

  1. Smaller file size: Bootstrap 5 is designed to be smaller and faster than the previous versions, which means it can help improve the loading speed of your website.
  2. Improved grid system: The new grid system in Bootstrap 5 allows for easier customization and is more flexible than the previous version.
  3. New utility classes: Bootstrap 5 introduces new utility classes that make it easier to style elements and create responsive designs.
  4. New components: Bootstrap 5 introduces several new components, such as the accordion, off-canvas, and toast, which you can use to create modern and interactive user interfaces.

Breaking changes

There are some breaking changes introduced in Bootstrap 5 that you should be aware of. These are just some of the breaking changes introduced in Bootstrap 5. If you are planning to update your website, be sure to review the official Bootstrap 5 documentation for a full list of changes and migration instructions. Additionally, the Bootstrap 5 Upgrade Guide on the Bootstrap website provides detailed information on how to update from previous versions of Bootstrap.

  1. jQuery dependency: Bootstrap 5 no longer requires jQuery, so if you are using jQuery plugins or code, you may need to make some adjustments.
  2. Custom properties: Bootstrap 5 uses custom properties (CSS variables) to define many of its values, which means some of the class names and syntax have changed.
  3. Forms: The structure of forms in Bootstrap 5 has changed, with the introduction of a new .form-control-plaintext class, and the removal of the .form-row class.
  4. Utilities: Some utility classes have been removed or renamed, such as .rounded-0 (renamed to .rounded-), and .img-fluid (renamed to .img-fluid rounded).
  5. Dropdowns: The structure and classes of dropdowns have changed in Bootstrap 5, including the removal of the .dropdown-item-text class.
  6. Card decks: The .card-deck class has been replaced with the new .g- class to provide more flexibility in spacing.

Steps to update from Bootstrap 4 to Bootstrap 5

Updating from Bootstrap 4 to Bootstrap 5 is not a major overhaul, but it does require some changes to your code. Here are some steps you need to take to update your website to Bootstrap 5:

  1. Check compatibility: Before you start updating your website, check if any third-party libraries or plugins you are using are compatible with Bootstrap 5. If not, you may need to find alternatives or wait until the developers of the libraries update them.
  2. Update the CSS and JavaScript files: Download the latest version of Bootstrap 5 and replace the CSS and JavaScript files with the new ones. You can also use a CDN to load the new files.
  3. Update class names: Some class names have changed in Bootstrap 5, so you will need to update them in your HTML and CSS files. For example, the .form-control class is now .form-control-plaintext.
  4. Update custom styles: If you have customized the styles of Bootstrap components, you may need to update them to match the new class names and structure of Bootstrap 5.
  5. Test your website: After updating your website, test it thoroughly to make sure everything is working as expected. Check for any visual issues or broken functionality and fix them as necessary.

Conclusion

Updating from Bootstrap 4 to Bootstrap 5 can bring many benefits to your website, including improved performance, flexibility, and new features. While the update process may require some work, it’s worth it to ensure your website is up to date with the latest technology and standards. By following the steps outlined in this blog post, you can update your website to Bootstrap 5 and take advantage of all the improvements it has to offer. For any questions or comments, please feel free to contact me here.

How to fix the request entity too large error in Express

Express applications that use the body-parser middleware have a default limit to the request body size that the application will handle. This default limit is 100kb. So, if your application receives a request with a body that exceeds this limit, the application will throw a “Error: Request entity too large”. This is a feature that aims to protect your application from potential attacks where the client overloads your application with large requests.

Many resources online will tell you to increase this size to something as large as 25mb or 50mb. Also, you may find websites that tell you to change this limit to request body types that you do not need. My advice is to only change the limit to a size that is reasonable to your case, and only to request body types that you use.

Options

When you create an Express app, you might instantiate the express object with this code:

var app = express();

And, to add the body-parser middleware, you would add this line:

app.use(express.json());

Even if you use the body-parser package, your code may look like this:

const bodyParser = require('body-parser');

app.use(bodyParser.json());

Either way, you are adding the body-parser middleware with the default request body size (100kb);

The Solution

If you know that all your requests will have a json encoded body, then the only change that you need to make is the following:

app.use(express.json({ limit: '200kb' }));

Or;

app.use(bodyParser.json({ limit: '200kb' }));

Notice how I chose a limit of only 200kb, instead of something that’s too large. The size of this limit depends on the type of application and the requests that you expect to handle.

If your requests use url-encoded body, then you will need to use this code:

app.use(express.urlencoded({ limit: '200kb' }));

Or;

app.use(bodyParser.urlencoded({ limit: '200kb' }));

Summary

Express applications that receive a request with a body larger than the set limit (default 100kb), will throw a “Error: Request entity too large”. To change this limit, use something that is reasonable, and not too large. And, finally, change the limit only to the type of requests that you expect.

If you have any questions, please feel free to comment here, or send me a message using the contact page.

How to create a website without coding

For a small business, there are many benefits to having a company website. You get an online presence 24/7, an ability to expand to more markets outside of your geographical boundaries, and an opportunity for growth. But, not everyone has the technical knowledge or resources to create a website. Yes, there are a lot of website builders that can help with that. However, even those tools also require some technical knowledge. With our Invoicing 24/7 app, you can create a website without coding or technical knowledge.

To get started, download the app from the Apple App Store or Google Play Store, and create your account for free. We designed this app to help small businesses with their invoicing needs. You are also able to create estimates and track projects by time. But the latest update of the app also gives you the ability to create a website for your company. To demonstrate how this works and how the end result looks like, I have setup a page for W3 Applications using the app. You can see the end result here.

Creating the website

From the main screen of the app, hit the “My Website” button. This will take you to a page that allows you to manage your website. But, since we don’t have a website to start with, this page will take you to the website setup screen.

To get started, hit the “My Website” button

The first thing you have to think about, is a name for your website. This name will be part of the address of your page, and once you select one, you can not change. So, think of a name that describes your business well. Ideally, this is the name of your company. In our example, the name of my website is w3applications. This name has to be unique also. That’s why the app will verify that no other website has used it before.

Once a name is selected, you have to type a “Heading” for your website. Again, this is ideally the name of your company and will be displayed prominently in the center when the page is first loaded. Just below the heading is the “Sub Heading”. This is usually the tag line of your company. In my case, the sub heading is “Software solutions for small businesses”.

Changes that you make in the app, reflect on the website

Next, you will add the “Features” that you want to promote on the page. This could be your services, products or anything else you want to highlight on your web page. Each feature has to have a Title, Description and an Image. You can manage all of this right within the app, and it will reflect directly on the website.

Add as many features you want to highlight

Another thing that you can do to add more customization, is to change the color of the website. This should match the brand color of your company.

Also, you can add your company’s email address. This will add a link at the bottom of the page so visitors can send you emails.

That’s it!

And that is all that you need to do to create a website without coding, and that looks professional and provides users with information about your services and products. Once you have added everything, you can then fully manage your web page right from within the app. You can visit the website on your phone to see how it looks like for mobile users, you can edit all the fields described above, copy the URL of the website or share it with anyone.

Managing your website is as easy as tapping a few buttons on your phone

If you have any questions or comments, please send me a message here. Thanks!

What is the MEAN Stack?

You may have heard the term MEAN Stack in web development. I will explain where this term comes from, and what are the advantages of creating web applications using the MEAN Stack. MEAN Stack stands for MongoDB, Express.js, Angular and Node.js. Let’s first talk about the different parts that make up a MEAN Stack application, describe why it’s a good idea to create web applications by using it.

MongoDB

MongoDB is a NoSQL database. This is the database of choice for developers building MEAN applications. The data that’s stored in a MongoDB database is in JSON format. This makes it an excellent candidate for the database in this type of applications.

Express.js

Express.js is one of the most popular frameworks, used with Node.js, for creating web applications. It allows developers to easily respond to HTTP user requests.

Angular

Angular was designed by Google to allow developers to create web applications (you can create other types of applications with Angular, but I’ll stick to web applications in this post). Ever since version 2 of Angular (also known as Angular 2), the language that you have to use is TypeScript. This is a Microsoft language that’s designed to improve upon plain JavaScript. So, if you already know JavaScript, then the learning curve for coding in TypeScript is not steep at all.

Node.js

Historically, JavaScript in web applications worked in the browser only. However, Node.js is JavaScript that runs on the server. You can think of it as the server for a MEAN application.

Advantages

As you can see from the above, all of the technologies in a MEAN application use JavaScript as the programming language. This provides a big advantage, in the sense that all the stacks of the application use the same language. It is especially advantageous for small teams, like in startups, where one developer handles all the different parts of the application.

Conclusion

MEAN Stack applications use MongoDB, Express.js, Angular and Node.js for developing web applications. It is a great way for web developers to use the same language across all the parts of the web application. In some cases, developers can replace Angular with Rect. In which case, you would refer to it as the MERN Stack. If you have any questions, feel free to leave a comment here, or use the contact page.

What you need to learn to become a web developer

People often ask me this question, what do I need to learn to become a web developer. There’s no short answer to this question. And, the answer always starts with “it depends…”. In this blog post, I will try to deep dive into the different web technologies that you can learn to become a web developer.

In a previous blog post, I talked about the different types of web developers depending on what part of the web application they work on. To summarize, a web developer can be a front end, back end or full-stack developer. The part of the web application that you want to work on, will ultimately decide the technologies that you need to learn.

However, regardless of what type of web developer you want to be, learning HTML is a must. This is because HTML is the language that the browser interprets in order to display a web page. In most cases, HTML is written by the front end developer. But, it is very important for back end developers to know HTML as well. This is because they often need to send it back to the browser. So, think of HTML as the universal language that all types of web developers need to know.

What you need to learn: Front end

For a front end developer, in addition to HTML, they need to learn these languages/frameworks:

CSS

Cascading Style Sheets is the language used to style web pages. Think of HTML as the language that tells the browser what to display, and CSS tells it how to display it. Using CSS, you can give your pages colour, position the different elements of a web page and more.

JavaScript

JavaScript is a language that runs on the browser, and provides you with some very useful functionality. Let’s say that you have a contact form on your page, and you need to make sure that the user types a valid email address. One way to do this, is to validate the email address on the server once the users clicks the Submit button. However, the better option would be to do the validation on the browser itself. This will save the user the extra time it takes for the server to do the validation and return the result. It gives a better user experience overall.

Angular

Angular is a framework developed by Google, and used to create Single Page Applications (SPA). A SPA application gives the user a very responsive user-experience. Interacting with an application that was developed using Angular, is similar to interacting with a regular desktop application. The user does not experience the lag of the browser sending a request to the server, and waiting for the response. Everything feels more “snappy” and responsive. In a SPA application, the browser does send a request to the server, of course. But it is done in a way that feels more responsive to the user. To develop Angular applications, you have to know HTML, CSS and a language called TypeScript. This is a variant of JavaScript, and aims to improve on some of its shortcomings.

There are more frameworks that allow you to create SPA applications, other than Angular. For example, ReactJS and VueJS. However, I will stick to talking about Angular here because that’s my preferred framework.

What you need to learn: Back end

As a back end developer, there are more options to choose from than a front end developer. One major factor that may dictate what language you have to learn as a back end developer, is the Operating System of the web server where the application will be hosted. This is because not all languages run on all operating systems.

ASP.NET

ASP.NET is a Microsoft technology that can be used to create web applications. You can use different programming languages to create ASP.NET applications, but the most popular one is C# (pronounced C Sharp). ASP.NET runs only on Windows web servers. A more modern version of ASP.NET is ASP.NET Core.

ASP.NET Core

This is the enhanced version of ASP.NET, and is capable of running on Windows as well as Linux web servers. As far as programming languages are concerned, you can write ASP.NET Core applications using C# as well.

Node.js

You can create server side code using Node.js. The code is written in JavaScript and can be run on different types of operating systems. One advantage of using a JavaScript server side technology, is that you can have the same language (JavaScript) running on the server and the client side.

PHP

PHP is one of the oldest and most popular programming languages used for creating web applications. It powers one of the most popular blogging platforms on the Internet, WordPress.

Python

Python has been increasing in popularity in recent years. You can use it to create web applications, using frameworks like Django. One of the advantages of Python is that it usually requires less code to write something in Python than in other programming languages. This is because of the syntax of the language.

Database technologies

As a back end developer, you need to learn a database technology as well. You have to be extremely familiar with the core concepts of databases. Concepts like, tables, fields, primary fields, relations, etc. In addition, you have to know the ins and outs of the language used for querying (retrieving) the data from the database. Some of the most popular databases are:

  • Microsoft SQL Server
  • MySQL
  • PostgreSQL
  • MongoDB

Microsoft SQL Server, MySQL and PostgreSQL are all examples of relational databases. However, MongoDB is one of the most popular type of database technologies called NoSQL. I will not go into all of the differences between SQL and NoSQL databases in this blog post. But, one of the differences, is that in NoSQL databases the data does not have to be structured in a certain way. Meaning, you can start with a database structure, and then change that structure to something else without affecting the existing data.

What you need to learn: Full-stack

As a Full-stack web developer, you have to be able to create the whole application on your own. Which means, you need to learn some technologies from the front end stack, and some from the back end stack.

Courses to learn web development

If you are looking for good resources or courses to learn any of these languages and technologies, then one of the best websites for such courses is Udemy. It has a wide range of courses on these technologies, and more. Also, regardless of your current experience level, there’s a very good change that you’ll find the right course for you.

Conclusion

For any questions on what you need to learn to become a web developer, please feel free to leave a comment here or use our contact page.

Front End vs Back End vs Full-stack web development

We often use different terms when referring to web developers, or web development in general. These terms are: Front end, Back end or Full-stack. So, what does each one mean, and how should we use these terms? To understand the difference between Front End vs Back End vs Full-stack development, let me start by explaining what a typical web application consists of.

The architecture

A typical web application consists of a database, some code that runs on a web server on the Internet, and some code that runs on your browser when you open the web app. You can host the database and the web server on the same machine, or you could host them on separate machines. This depends on a number of factors, one of which is the size of the application. The image below, shows how this architecture may look like.

A diagram of a typical web application architecture
A diagram of a typical web application architecture

Developers

Keeping the architecture of web applications in mind, we can categorize developers based on the part of the web application that they are specialized in. The first category is “Front end” developers. These are developers who work primarily on code that runs on the browser. Sometimes, this is also called front end code. This is the part of the application that the user interacts with directly. Examples of this are, the text, images, buttons and forms on the page. The second category of developers is “Back end” developers. They work on the code that runs on the web server, not on the browser. This is generally code that the user does not interact with directly.

Example

For example, let’s say that a web application has a login form. The actual form where the user has to enter a username and password is developed by a front end developer. The form can have its own validation to make sure that the user has entered all the required fields. This validation code would be running on the browser, so it’s all front end code. Once the user enters all the required information and clicks the login button, that information is then sent to the web server for further processing. On the web server, some code has to run to validate against the database whether the username and password are correct. The server then sends the result of this validation back to the browser. This code is typically developed by a back end developer.

Front end vs Back end web development
Front end vs Back end web development

Full-stack developers

The third category of web developers are called “Full-stack” developers. As the name indicates, these are developers who work on the front end and the back end code. Generally speaking, you can find full-stack developers in smaller companies and teams (like start-ups). Full-stack developers have to have a wide range of knowledge in both client side and server side code.

Conclusion

In conclusion, we talked about the difference between Front End vs Back End vs Full-stack development. Front end developers work on the client side of the app. Back end developers work on the server side of the app. And full-stack developers work on both sides of the app. For any questions, leave a comment here or use our contact form.