DEV Community: Aya Ishimura

Overcoming Deployment Challenges with a MERN Stack application on Vercel

Aya Ishimura — Sun, 17 Sep 2023 06:38:21 +0000

Introduction:
Deploying a MERN stack application, especially the server-side code, on platforms like Vercel can be a daunting task. Navigating through the myriad of configurations and dealing with unexpected issues can be overwhelming. In this article, I'll share the challenges I faced while deploying my MERN blog site's server-side code on Vercel and how I overcame them.

1. Configuring Vercel for Server-Side Code:
To ensure Vercel recognized my server-side code, I added a vercel.json configuration file at the root of my server code. This file directs Vercel on how to build and route requests for the server:

{
  "version": 2,
  "builds": [{ "src": "index.js", "use": "@vercel/node" }],
  "routes": [{ "src": "/(.*)", "dest": "/index.js" }]
}

With this configuration in place, any request made to my deployed application would be directed to index.js, where my server-side code resides.

2. Migrating from bcrypt to bcryptjs:
During the deployment phase, I encountered an issue with the bcrypt package. It wasn't compiling correctly, which can sometimes be a common issue due to platform-specific binary dependencies.

Solution:
To overcome this problem, I switched to using bcryptjs, which is a pure JavaScript implementation, eliminating the need for platform-specific binaries. The change was straightforward:

// Before:
// const bcrypt = require("bcrypt");

// After:
const bcrypt = require("bcryptjs");

By making this shift, I was able to seamlessly continue hashing passwords and verifying them without the compilation issues I faced with bcrypt.

2. Understanding Cookies and Security:
One of the most common issues developers face during deployment is handling cookies, especially when it comes to security configurations. I observed that while tokens were saved in the local testing environment, they weren't stored when connecting to the deployed server. After some debugging, I realized:

Local vs Production: The difference between HTTP (local) and HTTPS (production) played a role in this behavior.
SameSite Attribute: A warning about the SameSite attribute indicated that cross-site responses were being blocked.

Solution: By ensuring proper configurations for SameSite, I was able to ensure that tokens were saved properly.

res.cookie("token", token, {
      httpOnly: true, 
      secure: true,
      sameSite: "none", // Before:sameSite: "lax",
    });

3. Configuring CORS for Multiple Origins:
CORS (Cross-Origin Resource Sharing) policies can be a major pain point when deploying applications. I had to make sure my server accepted requests from various URLs:

The automatically assigned Vercel URL
My custom domain
The default Vercel project URL
Localhost, for testing purposes

Solution: I updated the allowedOrigins array in my server configuration, allowing requests from all these sources. However, it's essential to remember that for maximum security, it's best to limit the origins to only the necessary ones.

3. Route Order Importance:
In Express.js, the order of middleware and routes is critical. If not structured correctly, some routes or middleware may not function as expected.

Solution: By ensuring that specific routes and middleware were loaded in the correct sequence, I was able to maintain the desired functionality across the server.

Conclusion:
Deployment can often be a challenging phase in a project's lifecycle, but with persistence and a systematic debugging approach, one can resolve most issues. My experience with deploying the MERN stack blog site on Vercel taught me the importance of understanding deployment configurations and fine-tuning them according to the platform's requirements.

I hope my experience can assist others in their deployment journeys. Always remember, every challenge is a new learning opportunity.

Why Isn't the Token Being Saved in the Cookie?

Aya Ishimura — Tue, 22 Aug 2023 04:10:33 +0000

In web development, we occasionally come across issues that are puzzling and time-consuming to solve. One such issue that I recently faced involved JWT tokens not being stored in cookies for specific users. I invested several days trying to resolve this issue and eventually found a solution. In this blog post, I will share the details of the problem and the steps I took to resolve it.

Problem:

In my web application, I utilized JWT (JSON Web Token) for user authentication. After a successful login, the server would send a JWT token to the client, which was supposed to be stored in a cookie. However, for certain users, the token was not being stored in the cookie. The perplexing part was that this issue only occurred for specific users and was not consistent across all users.

Investigation:

I began by examining the server's response headers for the problematic users. To my astonishment, the "Set-Cookie" header was present, and a token was indeed being sent. Nonetheless, the token was not appearing in the browser's cookie storage. After a deeper investigation, I noticed that the problematic users had an unusually long token compared to other users.

The following code was creating tokens that were too long, causing the problem:

Root Cause:

It became clear that the issue stemmed from the token's size. For the problematic users, the JWT token was too large to be stored in a cookie. Browsers impose a limit on the maximum size of a cookie, and the token was exceeding this limit. This occurred because the token payload for these users contained a large amount of data, making the token exceptionally lengthy.

const payload = {
  firstName: userInfo.firstName,
  lastName: userInfo.lastName,
  email,
  id: userInfo._id,
  followers: userInfo.followers,
  userIcon: userInfo.userIcon,
  following: userInfo.following,
  bio: userInfo.bio,
};

const token = await signToken(payload, secret);

Solution:

To address the problem, I modified the token generation logic to include only essential information in the payload. By reducing the amount of data in the token, I was able to ensure that the token's size remained within the limits imposed by browsers. After implementing this change, the tokens were successfully stored in the cookies for all users.

I revised it to the following:

const payload = {
  id: userInfo._id,
  email,
};

const token = await signToken(payload, secret);

This issue underscored the importance of considering the size of data being sent in tokens and cookies. By including only essential information in the token and ensuring that its size stays within the browser's limits, I was able to avert this problem in the future. I hope that sharing my experience will be helpful to others facing similar challenges.

Quick Tips: Styling MUI Components with the sx Prop

Aya Ishimura — Thu, 13 Jul 2023 03:50:06 +0000

Elevate Your MUI Components: Mastering the `sx` Prop for Styling

Material-UI (now known as MUI) has always been a popular choice among React developers for its rich component library and flexibility. One of the game-changers introduced in MUI is the sx prop, which provides a powerful and concise way to style components directly. In today's quick tip, we'll explore how to use the sx prop to change button hover effects and to integrate images seamlessly into Box components.

To change a button color on hover with MUI, you can use the inline css sx prop with ":hover".

Example:

<Button
  variant="contained"
  sx={{bgcolor: "#525252",
       ":hover": {bgcolor: "#5c5c5c",color: "white"},
     }}
>
Click Me
</Button>

To put an image into a box component, you can set 'component="img"'.

<Box
   component="img"
   src={`http://localhost:4000/${cover}`}
   sx={{
        // Match the width of the image to the parent element
        width: "100%", 
        height: "auto", 
        maxWidth: "250px", 
        maxHeight: "200px", 
        borderRadius: "10px",
        objectFit: "cover",
      }}
 ></Box>

Mastering the Basics: Manipulating the DOM with JavaScript

Aya Ishimura — Fri, 10 Feb 2023 14:28:13 +0000

The Document Object Model (DOM) is a programming interface for HTML and XML documents that allows developers to manipulate web pages dynamically with JavaScript. By representing an HTML document as a tree structure, the DOM provides a convenient way to traverse, select, and modify elements on the page. In this article, we will cover the basics of how to manipulate the DOM with JavaScript.

To start, you need to select an element in the DOM. This is done using methods like getElementById, querySelector, or querySelectorAll. Once you have a reference to an element, you can change its properties, such as its style or content, using the properties provided by the DOM API. For example, to change the background color of an element with an ID of element, you would use the following code:

Javascript

> document.getElementById("element").style.backgroundColor = "red";

You can also add, remove, or move elements in the DOM using JavaScript. For example, to add a new p element to the end of a div element, you would use the following code:

Javascript

let div = document.getElementById("container");
let p = document.createElement("p");
p.innerHTML = "Hello World";
div.appendChild(p);

To remove an element, you can use the removeChild method. For example, to remove the newly created p element, you would use the following code:

css

div.removeChild(p);

If you need to move an element from one location to another, you can use the insertBefore method. For example, to move the p element to the beginning of the div element, you would use the following code:

css

div.insertBefore(p, div.firstChild);

In addition to these basic manipulation methods, the DOM provides several events that allow you to respond to user interactions, such as clicks, hovers, and form submissions. You can attach event listeners to elements using the addEventListener method. For example, to run a function when a button is clicked, you would use the following code:

javascript

let button = document.getElementById("button");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

It's worth noting that not all browsers implement the DOM API in exactly the same way, so it's important to test your code in multiple browsers to ensure compatibility. Additionally, the DOM API can be slow and inefficient for large or complex documents, so it's important to optimize your code and use tools like the Chrome DevTools to identify performance bottlenecks.

In conclusion, the DOM provides a powerful and flexible way to manipulate web pages with JavaScript. By selecting elements, changing their properties, adding and removing elements, and responding to user interactions, you can create rich, interactive web applications. Whether you're building a simple website or a complex web application, understanding the DOM is an essential part of web development.

About me

Aya Ishimura — Wed, 31 Aug 2022 02:55:19 +0000

Hello, I'm Aya. Let me share with you my journey to becoming a passionate web developer.

Discovering My Drive

I've always been someone who sought genuine passion in what I do. For a long time, I drifted without a true calling, feeling moments of anxiety about the direction of my life. But when I stumbled upon programming, it felt like I'd finally found my place. It was a moment of realization – "This is it."

My First Brush with Coding

While working as an office assistant in Japan, I was introduced to VBA for automating Excel tasks. The joy of streamlining processes and making tasks more efficient was palpable. What started as personal projects to automate my tasks ended up getting recognized at the highest levels, leading to a promotion and even an award for our department.

Diving Deeper into Web Development

Despite my accomplishments with VBA, I knew there was more to explore. My love for logic-driven tasks, reminiscent of my fondness for mathematics, made programming a natural fit. As technology advanced, I was drawn to web development, envisioning the thrill of crafting my own websites and desiring to attain business-level English proficiency to expand my horizons.

Embracing Change: Moving to Canada

Originally planning to study in Australia, the COVID-19 pandemic shifted my trajectory to Canada, where the co-op system offered the enticing blend of study and real-world internships. Recognizing the importance of experience in the IT sector, I saw this as an invaluable opportunity.

Building My Foundation

Navigating the world of web development as a newcomer isn't without its challenges. While job postings often seek prior experience, I took the initiative. By offering to build a website for my friends' business, I am converting theoretical knowledge into practical skills, laying the groundwork for my career.

My Vision for the Future

My goal is clear: to be a self-sufficient web developer, crafting complete websites from scratch. With just a laptop, internet, and a burst of creativity, I envision myself working from anywhere in the world. It might be a challenging journey, but with my passion and dedication, I am confident in my path.