DEV Community: Wilmela

Safely Updating Your Deployed Next.js App on a DigitalOcean Droplet.

Wilmela — Thu, 11 Jul 2024 12:15:08 +0000

Introduction:

This article assumes you've already taken the exciting first step of deploying your Next.js application to a DigitalOcean droplet. Congratulations on that achievement! Now, as you continue to refine and enhance your app, you'll need to know how to update it safely and efficiently. This guide is tailored for beginners who are looking for a reliable way to update their live application without causing extended downtime or risking data loss.

Let's begin.

Access Your Droplet

Use SSH via terminal or connect through the DigitalOcean console.

Navigate to Your App Directory

Run: cd /var/www/<app name>

Check Running Processes

Execute: pm2 list to view active apps and their IDs

Stop and Delete the Current Process

Run: pm2 stop <id>followed by pm2 delete <index>

Remove the Existing App Folder

Navigate up one level: cd ..
Delete the app folder: rm -rf <app name>

Clone the Updated Repository

Use: git clone <repo-url>
You'll need to enter your GitHub credentials

Enter the New App Directory

Run: cd <app name>

Update Environment Variables (if applicable)

Edit the production environment file: nano .env.production
Update variables as needed

Install Sharp for Image Processing

Run: npm i sharp if not needed Run npm install or yarn to install all dependencies.

Build Your Updated App

Execute: npm run build or yarn build

Ensure PM2 is Installed Globally

Run: npm i -g pm2

Start Your App with PM2

Use: pm2 start npm --name "<app name>" -- start

Save the PM2 Process List

Execute: pm2 save

Set Up PM2 to Start on System Boot

Run: pm2 startup

Return to the Root Directory

Simply type: cd

Restart Nginx

Run: sudo service nginx restart

Conclusion:

Updating your Next.js application on a DigitalOcean droplet doesn't have to be a nerve-wracking experience. By following these steps, you can safely and efficiently update your live application with minimal downtime. This process ensures that you're working with the latest version of your code while maintaining a stable production environment.
Remember, practice makes perfect. The more you perform these updates, the more comfortable and proficient you'll become with the process. Happy coding, and here's to your continued success in the world of Next.js and DigitalOcean!

Summary:

This guide outlines a 16-step process for updating a Next.js application on a DigitalOcean droplet. The steps include accessing the droplet, stopping the current app, removing old files, cloning the updated repo, rebuilding the app, and restarting the necessary services. By following this method, developers can ensure a smooth and safe update process for their live applications.

Integrating Express.js Server with Next.js-13: Unleash the Power of Combined Frameworks

Wilmela — Tue, 20 Jun 2023 09:25:40 +0000

Introduction:

Next.js-13 and Express.js are two powerful frameworks in the JavaScript ecosystem, each offering distinct advantages. Next.js-13 provides features like server-side rendering (SSR) and static site generation (SSG), along with an excellent developer experience. On the other hand, Express.js is known for its flexibility and robustness in building server-side applications. By combining these frameworks, developers can harness the strengths of both to create versatile web applications. In this blog post, we will explore the steps to connect an Express.js server with Next.js-13 seamlessly.

Benefits of Next.js-13:

Next.js-13 offers a host of advantages that contribute to its popularity among developers:

Server-side rendering (SSR): Next.js-13 enables rendering React components on the server, leading to faster page loading and improved search engine optimization (SEO).
Static site generation (SSG): It generates static HTML pages during the build process, resulting in optimal performance and reduced server load.
Excellent developer experience: Next.js-13 provides a delightful development experience with features like automatic code splitting, hot module reloading, and built-in TypeScript support.

Benefits of Express.js:

Express.js is a widely adopted framework for building server-side applications with Node.js. Some key advantages of using Express.js include:

Flexibility: Express.js takes a minimalistic, unopinionated approach, allowing developers to structure applications as per their specific needs.
Middleware ecosystem: Express.js boasts a vast collection of middleware modules, making it easy to add additional functionality to the server.
Robustness: With its mature and stable ecosystem, Express.js has proven to be reliable in handling various server-side tasks and managing routes efficiently.

Combining Next.js-13 and Express.js:

By integrating an Express.js server with Next.js-13, developers can leverage the best of both worlds. Express.js can handle backend logic, routing, and API endpoints, while Next.js-13 takes care of rendering React components, server-side rendering, and static site generation. This powerful combination empowers developers to build dynamic web applications that benefit from the unique features offered by each framework.

Steps to Create Both Projects:

First, let's create a basic express server.
1.mkdir exp-next && cd exp-next
2.npm init -y
3.npm install express cors
4.mkdir src && cd src && touch index.js

In the package.json file add the line "type":"module", to enable the use of "import" statement and "start": "node src/index.js" script

Next, in your index.js file add the following lines to create a basic express server which returns an array of users.

Finally npm start to run your server. If everything is ok, you will see "App listening on port 5000!" on your console.

Next, we will create out Next.js-13 app. Run the following commands on your command prompt.
1.mkdir next-exp && cd next-exp
2.npx create-next-app@latest
3.What is your project named? . using . will install nextjs in the current folder with the folder name next-exp
4.Accept all default settings.
5.npm install --save express

Next.js Settings

Open the next.config.js file and make the following changes.

Client component

In the app folder, open page.tsx and add the following code.

Run npm start in your express project to start the server and npm run dev in your next.js project.

Notice we did not pass any other option to the fetch function, just the url. Nextjs by default uses fetch(url, { cache: 'force-cache' }) which automatically caches our users.

Note: Next.js recommends the use of SWR or React-Query for data fetching on the client side as against useEffect hook.

Server component

In the app folder, following open page.tsx and replace the previous code with the following lines.

Here we are passing { cache: 'no-cache' } option to the fetch function to disable Next.js default behaviour and always refetch users when we make a request.

That's it! Now you can enjoy all the goodies Next.js-13 has to offer while keeping your existing express.js backend.
You can find the code here.

Thanks for reading.

Using SVG in react native.

Wilmela — Fri, 26 May 2023 18:17:46 +0000

Scalable Vector Graphic (SVG) are quite common and easy to use when building web projects but unfortunately, they are not supported currently in react native by default.

Hey, are you a beginner, are you having issues using SGVs or you intend to use it in your react native project? Alright, permit me to guide you in few steps.

Just in case you want beautiful SGVs visit https://undraw.co/

Let's Go!

Step 1. Create a react native project. I will be using expo. npx create-expo-app MySvgApp. you can call yours whatever you want.
Open your project in your code editor and run expo install react-native-svg. This package will do the magic for us!.
Create a component and call it SVGWrapper, then import {SvgXml} from 'react-native-svg';
Download an SVG image, click to open it, then copy everything between the svg tags and store it as a constant i.e. const svgImg = <svg>.....</svg>. Ensure to wrap the tags in a back-tick. ``

Note: I have removed most of the svg content to keep the image simple.

5.Create another component inside SVGWrapper and call it LoveIt. Again, call it whatever you want, then you can immediately return <SvgXml xml={svgImg} width='200px' height='200px /> as a self-closing component with the xml prop pointing to the svgImg constant also providing the width and height props.

6.Finally, return LoveIT as a self-closing component. Now our SVG image is ready to be used!.
Go ahead and import SVGWrapper into any component you want to use it and that's it.

Thanks for reading.

Responsive And Adaptive UI

Wilmela — Wed, 07 Jul 2021 11:08:27 +0000

This is an absolute beginners post but would be useful if you are still switching devices one after the other to check and make corrections to your codes and also wondering how to display your screen layout based on certain conditions and screen sizes.

Often times we focus on developing using one mobile phone (irrespective of OS) or emulator and forget to check how our UI will respond when we launch them in other devices perhaps smaller ones. However, if you are developing for a particular screen size then you may disregard this post but if your intention is to cover a wild range of screen sizes then this is CRITICAL!
Long story short... How do we achieve this RESPONSIVENESS in react-native?

Just like we use the media queries in css , we can use the DIMENSION API combined with IF CHECKS and TERNARY OPERATORS. But How?!.. Alright chill...

Steps

We need to first be able to monitor our code changes using different screen sizes Live. so let's say you have a 5.7" smartphone and Expo Go installed, you can install a 3.7" android emulator from android studio... IOS developers can set up different screen sizes with XCode .
We must know the height and width of your target devices in pixels (density-independent pixel...react-native default unit).

import the Dimensions Api

import { Dimensions } from 'react-native'

to enable use use the

Dimensions.get('window').height and Dimensions.get('window').width

properties.

Combine these properties with some conditional statements to display your components, fonts, styles, margins, paddings etc to fit your monitors.

That's all at the most basic level. This is quite simple and very helpful.
Don't forget you can change almost anything

Thanks for reading..