Setting up Amazon Email Service with Nodemailer

setting-up-amazon-email-service-with-nodemailer

Milan Poudel

Setting up Amazon Email Service with Nodemailer

Setting up a custom domain with a backend service deployed or hosted in services like EC2 provided by AWS has been a common practice. In this article, we will see how can host our NodeJS api in EC2 and configure our DNS routing with the help of Route53 to namecheap domain. In this part, we will focus on creating route53 hosted zone and create a custom DNS in namecheap with values provided by Route53. I assume we have already deployed our NodeJs service in AWS EC2. If not, then please our previous article. Let's get started. Let's proceed to AWS dashboard after login. Then, search for "Route53" under services.

route53-hosted-zone-with-namecheap

Route53 : Hosted Zone with Namecheap

Nginx and AWS Ec2: Proxy Forwarding with Node Express Server

nginx-and-aws-ec2-proxy-forwarding-with-node-express-server

Nginx and AWS Ec2: Proxy Forwarding with Node Express Server

AWS EC2 with Node and Express API <pre class="ql-syntax" spellcheck="false">module.exports = {
 //just added this comment on edit
&nbsp; root: true,
&nbsp; env: { browser: true, es2020: true },
&nbsp; extends: [
&nbsp; &nbsp; 'eslint:recommended',
&nbsp; &nbsp; 'plugin:@typescript-eslint/recommended',
&nbsp; &nbsp; 'plugin:react-hooks/recommended',
&nbsp; "plugin:import/errors",
 // new field added
 ﻿"prettier"
&nbsp; ],
&nbsp; ignorePatterns: ['dist', '.eslintrc.cjs'],
&nbsp; parser: '@typescript-eslint/parser',
 /* new plugins add*/
&nbsp; plugins: ['react-refresh', "import", "unused-imports"],
&nbsp; rules: {
 /*new rule add*/"unused-imports/no-unused-imports": "error",
&nbsp; &nbsp; "no-unused-vars": [
&nbsp; &nbsp; &nbsp; "error",
&nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; "vars": "all",
&nbsp; &nbsp; &nbsp; &nbsp; "args": "after-used",
&nbsp; &nbsp; &nbsp; &nbsp; "ignoreRestSiblings": false,
&nbsp; &nbsp; &nbsp; &nbsp; "argsIgnorePattern": "^_",
&nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; ],
&nbsp; &nbsp; 'react-refresh/only-export-components': [
&nbsp; &nbsp; &nbsp; 'warn',
&nbsp; &nbsp; &nbsp; { allowConstantExport: true },
&nbsp; &nbsp; ],
&nbsp; },
}



</pre>

aws-ec2-with-node-and-express-api

AWS EC2 with Node and Express API

AWS S3: With React, Node and Postgres

aws-s3-with-react,-node-and-postgres

AWS S3: With React, Node and Postgres

Hooks are the powerful functions in React that helps us to leverage the lifecycle features and share states. Since, the functional component has been the recommended way of writing in React, we are using Hooks as much as possible. Certainly, with every power that it gives, we are definitely going to be ambush it at some point. Let's see the most common pitfalls and the mistakes we do as a developer while using React Hooks: <h2>Creating multiple states and using in UseEffect:</h2> Suppose there are multiple states that we are defining using useState. Let's say a first number and a second number. <pre class="ql-syntax" spellcheck="false">const [firstNumber, setFirstNumber] = useState(0);
const [secondNumber, setSecondNumber] = useState(0);
</pre> Let us suppose that a second number is dependent on a first number. Let's say we manipulate the first number. <pre class="ql-syntax" spellcheck="false"> const changeFirstNumber = () =&gt; {
 setFirstNumber(10)
 }
 
// one way of changing second number now
﻿ useEffect(()﻿ =&gt; {if(firstNumber) {
 setSecondNumber(firstNumber * 10)
 } 
 }, [firstNumber])
</pre> <blockquote>Do you think we even need "useEffect" here to manipulate the second number which let's say depends on first number? 🤔 Do we even need a separate state here for "secondNumber"?</blockquote> The answer is no. We don't need a separate state for second Number in case it is only depended on first Number. Since whenever, state changes, the functional component starts to execute itself from the beginning, so we don't need another state to change the second number. <pre class="ql-syntax" spellcheck="false">const [firstNumber, setFirstNumber] = useState(0);
// secondNumber will be reevaluated.
const secondNumber = firstNumber * 10;


</pre>

react-hooks-common-pitfalls-and-blunders

React Hooks: Common Pitfalls and Blunders

Setting up a maintainable ecosystem is one of the first and essential steps in starting out a React Project. With tools like Eslint, Prettier and Typescript, we will be prepared enough to battle the runtime and type safety errors that can occur as the project codebase grows. In this article, we will learn how to create a ReactJS project with Vite template and how to set up tools like <a href="https://eslint.org/" rel="noopener noreferrer" target="_blank" style="color: rgb(13, 13, 13);">Eslint</a>, <a href="https://prettier.io/" rel="noopener noreferrer" target="_blank" style="color: rgb(13, 13, 13);"> Prettier</a> and <a href="https://www.typescriptlang.org/" rel="noopener noreferrer" target="_blank" style="color: rgb(13, 13, 13);">Typescript</a>. <h2>Setting Up the Project:</h2> Firstly, we will create a new folder.. After that, we can navigate to that folder either in terminal or open that folder using VS code editor. The following vite commands below will create the project using the react latest version. Since this is a react setup, so we will be choosing React and "variant" as Typescript to proceed since we will be using Typescript. <pre class="ql-syntax" spellcheck="false">﻿/*If we have already created the folder for our project*/
 cd myprojectfolder
 npm create vite@latest ./ 
</pre> <blockquote>By default, the typescript config file named tsconfig.json will be generated which will look the following code below except new added values by us.</blockquote> <pre class="ql-syntax" spellcheck="false">{
&nbsp; "compilerOptions": {
&nbsp; &nbsp; "target": "ES2020",
&nbsp; &nbsp; "useDefineForClassFields": true,
&nbsp; &nbsp; "lib": ["ES2020", "DOM", "DOM.Iterable"],
&nbsp; &nbsp; "module": "ESNext",
&nbsp; &nbsp; "skipLibCheck": true,
&nbsp; &nbsp; "moduleResolution": "bundler",
&nbsp; &nbsp; "allowImportingTsExtensions": true,
&nbsp; &nbsp; "resolveJsonModule": true,
&nbsp; &nbsp; "isolatedModules": true,
&nbsp; &nbsp; "noEmit": true,
 &nbsp; /* new added line*/
&nbsp; &nbsp; "jsx": "react-jsx",
&nbsp; &nbsp; "strict": true,
&nbsp; &nbsp; "noUnusedLocals": true,
&nbsp; &nbsp; "noUnusedParameters": true,
&nbsp; &nbsp; "noFallthroughCasesInSwitch": true,
&nbsp; &nbsp; "baseUrl": ".",
 &nbsp; /* new added lines*/
&nbsp; &nbsp; "paths": {
&nbsp; &nbsp; &nbsp; "@components/*": ["/src/components/*"],
&nbsp; &nbsp; &nbsp; "@pages/*": ["/src/pages/*"],
&nbsp; &nbsp; &nbsp; "@constants/*": ["/src/constants/*"],
&nbsp; &nbsp; &nbsp; "@services/*": ["/src/services/*"],
&nbsp; &nbsp; &nbsp; "@hooks/*": ["/src/hooks/*"],
 "@/*": ["src/*"],
&nbsp; &nbsp; }
&nbsp; },
&nbsp; "include": ["src"],
&nbsp; "references": [{ "path": "./tsconfig.node.json" }],
&nbsp; "exclude": ["node_modules"]
}
</pre> What we added: <ul><li>a new object value pair named "jsx" which will allow us to write "jsx" in our typescript (.tsx) files.</li></ul> <ul><li>the "paths" key and it's value for the relative import of our files. Instead of using absolute path like "./..../components" , we can use "@/components/mycomponent", which will also be suggested by Typescript.</li></ul> Likewise, we will also have the file named recommended ".eslintrc.cjs" config by default which will look the following configuration below:We will modify this file slightly in order to fit our project needs. <pre class="ql-syntax" spellcheck="false">﻿module.exports = {
&nbsp; root: true,
&nbsp; env: { browser: true, es2020: true },
&nbsp; extends: [
&nbsp; &nbsp; 'eslint:recommended',
&nbsp; &nbsp; 'plugin:@typescript-eslint/recommended',
&nbsp; &nbsp; 'plugin:react-hooks/recommended',
&nbsp; "plugin:import/errors",
 // new field added
 ﻿"prettier"
&nbsp; ],
&nbsp; ignorePatterns: ['dist', '.eslintrc.cjs'],
&nbsp; parser: '@typescript-eslint/parser',
 /* new plugins add*/
&nbsp; plugins: ['react-refresh', "import", "unused-imports"],
&nbsp; rules: {
 /*new rule add*/"unused-imports/no-unused-imports": "error",
&nbsp; &nbsp; "no-unused-vars": [
&nbsp; &nbsp; &nbsp; "error",
&nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; "vars": "all",
&nbsp; &nbsp; &nbsp; &nbsp; "args": "after-used",
&nbsp; &nbsp; &nbsp; &nbsp; "ignoreRestSiblings": false,
&nbsp; &nbsp; &nbsp; &nbsp; "argsIgnorePattern": "^_",
&nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; ],
&nbsp; &nbsp; 'react-refresh/only-export-components': [
&nbsp; &nbsp; &nbsp; 'warn',
&nbsp; &nbsp; &nbsp; { allowConstantExport: true },
&nbsp; &nbsp; ],
&nbsp; },
}

//nw packages to add for above added new plugins to work
&nbsp;npm i eslint-plugin-import eslint-plugin-unused-imports﻿ eslint-config-prettier
</pre> What we added: <ul><li> new plugins named "import" and "unused imports" which will help us to identify the unused imports in our codebase and help to clean them up.</li></ul> <ul><li>We also want to add prettier to work in sync with our eslint config for consistent code format and styles, hence we added new field "prettier"</li></ul> <blockquote>By default, our project initialization may not add ".eslintignore" file in our codebase. Make sure you create one at the root of our project and add following paths so that eslint will ignore these during linting and checking</blockquote> <pre class="ql-syntax" spellcheck="false"> /* .eslintignore */
node_modules
.env
build
</pre> We will be using prettier as well for better code formatting. So, we will install the prettier package and add a file named ".prettierrc.json". We can define the following values as per the need of our project. <pre class="ql-syntax" spellcheck="false">{
 //checks whether trailing comma needs to be added with arrays and objects.
&nbsp; "trailingComma": "none",
 //number of spaces per intendation. Here we haved used 2.
&nbsp; "tabWidth": 2,
 //whether we want to add semi colons at the end of code.
&nbsp; "semi": false,
 //whether to use single quotes ' or double quotes " for string literals.
&nbsp; "singleQuote": true,
}
</pre> <blockquote>By default, our project initialization may not add .".prettierignore" file in our codebase. So make sure you create one and add following paths so that prettier will skip those files and paths (same as .eslintignore)</blockquote> The final steps are setting up the scripts in package.json file to run the eslint and prettier config. We will be using the scripts below for linting and formatting process. Inside scripts folder, we will add following code.. <pre class="ql-syntax" spellcheck="false">&nbsp;"scripts": {
&nbsp; &nbsp;&nbsp;"dev": "vite",
&nbsp; &nbsp; "build": "tsc &amp;&amp; vite build",
 &nbsp;"preview": "vite preview"
&nbsp; &nbsp; "lint": "next lint",
 // will check for linting errors
&nbsp; &nbsp; "lint:check": "eslint src/**/*.ts",
 // will check for errors as well as fix the errors as much as it can
&nbsp; &nbsp; "lint:fix": "eslint src/**/*.ts --fix",
 // will check for out codebase formatting
&nbsp; &nbsp; "prettier:check": "prettier --check 'src/**/*.{ts,json}'",
 // will try to fix our code style and formatting problems
&nbsp; &nbsp; "prettier:fix": "prettier --write 'src/**/*.{ts,json}'",
&nbsp; }
</pre> With all these setups we are good to go. We will use the following commands as per our needs to check for the linting as well as format errors. <pre class="ql-syntax" spellcheck="false">npm run lint:check
npm run lint:fix
npm run prettier:check
npm run prettier:fix
</pre><h3> </h3><h3>In conclusion:</h3> There is no any perfect language. Javascript suffers from lots of pitfalls but setting up some toolchain like Typescript, Eslint and Prettier will definitely help us to minimize the errors we will encounter during development. Hence it is recommended to use Typescript along with all the given tools.

starting-react-project-with-vite,-typescript,-eslint-and-prettier

Starting React Project with Vite, Typescript, Eslint and Prettier

Setting up a maintainable environment and ecosystem is one of the first and essential steps in starting out a React Project. With tools like Eslint, Prettier and Typescript, we will be prepared enough battle the runtime and type safety errors that can arise as the project codebase grows. In this article, we will learn how to create a ReactJS project with Vite and how to set up tools like Eslint, Prettier and Typescript. <h2>Setting Up the Project:</h2> Firstly, we will create a new folder.. After that, we can navigate to that folder either in terminal or open that folder using VS code editor. The following vite commands below will create the project using the reactjs latest version if you want to create the project in the same folder. We can use the below commands without "./" at the end so new folder will be generated by Vite. With this command, we are given some questions. Since this is a react setup, so we will be choosing React. Also, we will be choosing "variant" as Typescript to proceed since we will be using Typescript. <pre class="ql-syntax" spellcheck="false">/*If we have already created the folder for our project*/
 cd myprojectfolder
 npm create vite@latest ./ 
</pre> By default, the typescript config file named tsconfig.json will be generated which will look the following code below except new added values. We will modify this default tsconfig.json file. <pre class="ql-syntax" spellcheck="false">{
&nbsp; "compilerOptions": {
&nbsp; &nbsp; "target": "ES2020",
&nbsp; &nbsp; "useDefineForClassFields": true,
&nbsp; &nbsp; "lib": ["ES2020", "DOM", "DOM.Iterable"],
&nbsp; &nbsp; "module": "ESNext",
&nbsp; &nbsp; "skipLibCheck": true,
&nbsp; &nbsp; "moduleResolution": "bundler",
&nbsp; &nbsp; "allowImportingTsExtensions": true,
&nbsp; &nbsp; "resolveJsonModule": true,
&nbsp; &nbsp; "isolatedModules": true,
&nbsp; &nbsp; "noEmit": true,
 &nbsp; /* new added line*/
&nbsp; &nbsp; "jsx": "react-jsx",
&nbsp; &nbsp; "strict": true,
&nbsp; &nbsp; "noUnusedLocals": true,
&nbsp; &nbsp; "noUnusedParameters": true,
&nbsp; &nbsp; "noFallthroughCasesInSwitch": true,
&nbsp; &nbsp; "baseUrl": ".",
 &nbsp; /* new added lines*/
&nbsp; &nbsp; "paths": {
&nbsp; &nbsp; &nbsp; "@components/*": ["/src/components/*"],
&nbsp; &nbsp; &nbsp; "@pages/*": ["/src/pages/*"],
&nbsp; &nbsp; &nbsp; "@constants/*": ["/src/constants/*"],
&nbsp; &nbsp; &nbsp; "@services/*": ["/src/services/*"],
&nbsp; &nbsp; &nbsp; "@hooks/*": ["/src/hooks/*"],
 "@/*": ["src/*"],
&nbsp; &nbsp; }
&nbsp; },
&nbsp; "include": ["src"],
&nbsp; "references": [{ "path": "./tsconfig.node.json" }],
&nbsp; "exclude": ["node_modules"]
}
</pre> What we added: <ul><li>a new object value pair named "jsx" which will allow us to write "jsx" in our typescript (.tsx) files.</li></ul> <ul><li>the "paths" key and it's value for the relative import of our files. Instead of using absolute path like "./..../components" , we can use "@/components/mycomponent". Also typescript will automatically suggest relative import for us when we try to import any components.</li></ul> Likewise, we will also have the file named recommended ".eslintrc.cjs" config by default which will look the following configuration below:We will modify this file slightly in order to fit our project needs. <pre class="ql-syntax" spellcheck="false">module.exports = {
&nbsp; root: true,
&nbsp; env: { browser: true, es2020: true },
&nbsp; extends: [
&nbsp; &nbsp; 'eslint:recommended',
&nbsp; &nbsp; 'plugin:@typescript-eslint/recommended',
&nbsp; &nbsp; 'plugin:react-hooks/recommended',
&nbsp; "plugin:import/errors",
 // new field added
 ﻿"prettier"
&nbsp; ],
&nbsp; ignorePatterns: ['dist', '.eslintrc.cjs'],
&nbsp; parser: '@typescript-eslint/parser',
 /* new plugins add*/
&nbsp; plugins: ['react-refresh', "import", "unused-imports"],
&nbsp; rules: {
 /*new rule add*/"unused-imports/no-unused-imports": "error",
&nbsp; &nbsp; "no-unused-vars": [
&nbsp; &nbsp; &nbsp; "error",
&nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; "vars": "all",
&nbsp; &nbsp; &nbsp; &nbsp; "args": "after-used",
&nbsp; &nbsp; &nbsp; &nbsp; "ignoreRestSiblings": false,
&nbsp; &nbsp; &nbsp; &nbsp; "argsIgnorePattern": "^_",
&nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; ],
&nbsp; &nbsp; 'react-refresh/only-export-components': [
&nbsp; &nbsp; &nbsp; 'warn',
&nbsp; &nbsp; &nbsp; { allowConstantExport: true },
&nbsp; &nbsp; ],
&nbsp; },
}

//nw packages to add for above added new plugins to work
&nbsp;npm i eslint-plugin-import eslint-plugin-unused-imports﻿ eslint-config-prettier
</pre> What we added: <ul><li> new plugins named "import" and "unused imports" which will help us to identify the unused imports in our codebase and help to clean them up.</li></ul> <ul><li>We also want to add prettier to work in sync with our eslint config for consistent code format and styles, hence we added new field "prettier"</li></ul> <blockquote>By default, our project initialization may not add ".eslintignore" file in our codebase. Make sure you create one at the root of our project and add following paths so that eslint will ignore these during linting and checking</blockquote> <pre class="ql-syntax" spellcheck="false"> /* .eslintignore */
node_modules
.env
build
</pre> We will be using prettier as well for better code formatting. So, we will install the prettier package and add a file named ".prettierrc.json". We can define the following values as per the need of our project. <pre class="ql-syntax" spellcheck="false">{
 //checks whether trailing comma needs to be added with arrays and objects.
&nbsp; "trailingComma": "none",
 //number of spaces per intendation. Here we haved used 2.
&nbsp; "tabWidth": 2,
 //whether we want to add semi colons at the end of code.
&nbsp; "semi": false,
 //whether to use single quotes ' or double quotes " for string literals.
&nbsp; "singleQuote": true,
}
</pre> <blockquote>By default, our project initialization may not add .".prettierignore" file in our codebase. So make sure you create one and add following paths so that prettier will skip those files and paths (same as .eslintignore)</blockquote> The final steps are setting up the scripts in package.json file to run the eslint and prettier config. We will be using the scripts below for linting and formatting process. Inside scripts folder, we will add following code.. <pre class="ql-syntax" spellcheck="false">&nbsp;"scripts": {
&nbsp; &nbsp;&nbsp;"dev": "vite",
&nbsp; &nbsp; "build": "tsc &amp;&amp; vite build",
 &nbsp;"preview": "vite preview"
&nbsp; &nbsp; "lint": "next lint",
 // will check for linting errors
&nbsp; &nbsp; "lint:check": "eslint src/**/*.ts",
 // will check for errors as well as fix the errors as much as it can
&nbsp; &nbsp; "lint:fix": "eslint src/**/*.ts --fix",
 // will check for out codebase formatting
&nbsp; &nbsp; "prettier:check": "prettier --check 'src/**/*.{ts,json}'",
 // will try to fix our code style and formatting problems
&nbsp; &nbsp; "prettier:fix": "prettier --write 'src/**/*.{ts,json}'",
&nbsp; }
</pre> With all these setups we are good to go. We will use the following commands as per our needs to check for the linting as well as format errors. <pre class="ql-syntax" spellcheck="false">npm run lint:check
npm run lint:fix
npm run prettier:check
npm run prettier:fix
</pre>

starting-react-project-with-tyepscript,-eslint-and-prettier

Starting React Project with Tyepscript, Eslint and Prettier

There comes a time when we are developing a static application, we need at least a way a user can contact us, be it any informational website or a portfolio. Imagine you are creating a website and there is no any backend to it. Additionally, you don't want to pay for any service. Client side frameworks or libraries like ReactJS definitely can't help with file access and writing, but NextJS provides us an API which we will use to create a new file and write content with it. This method is definitely only meant for small applications and static websites. Assuming that we are already familiar with NextJS and at least know the basics, we will proceed to create a new nextjs project. To create a new project, we use the following commands below either in terminal or in the supported editor. <pre class="ql-syntax" spellcheck="false">npx create-next-app@latest
</pre> Hopefully, our new project is created. We will have pages folder inside our new project and definitely an "api" folder inside it. We can leverage this folder to allow us use the methods of file access and writing. Let's first create a new page named "contact.tsx" or any name as you like. And add some jsx and styling to it. <pre class="ql-syntax" spellcheck="false">//pages/contact.tsx
import React from 'react'
﻿
const Contact = () =&gt; {
&nbsp; const handleSubmit = (e: React.FormEvent&lt;HTMLFormElement&gt;) =&gt; {
&nbsp; &nbsp; e.preventDefault()
&nbsp; &nbsp; console.log('Form Submitted')
&nbsp; }
&nbsp; return (
&nbsp; &nbsp; &lt;div className="container"&gt;
&nbsp; &nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;form className="contact-form" onSubmit={handleSubmit}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Phone Directory&lt;/h1&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" placeholder="Name" required className="contact-form-field" /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="email" placeholder="Email" required className="contact-form-field" /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="phone" placeholder="Phone" required className="contact-form-field" /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="submit" className="contact-form-button"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Submit
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/form&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; )
}


export default Contact
</pre> Here's the styling of our contact form. <pre class="ql-syntax" spellcheck="false">// styles/contact.css
.container {
&nbsp; height: 100vh;
&nbsp; display: flex;
&nbsp; justify-content: center;
&nbsp; align-items: center;
&nbsp; background: blue;
}

.contact-form {
&nbsp; margin: 0 auto;
&nbsp; width: 50%;
&nbsp; padding: 30px;
&nbsp; background: #fff;
&nbsp; border-radius: 5px;
&nbsp; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
&nbsp; width: 470px;
&nbsp; text-align: center;
}

.contact-form h1 {
&nbsp; margin-bottom: 20px;
&nbsp; color: #333;
&nbsp; font-size: 24px;
&nbsp; font-weight: 700;
}

.contact-form-field {
&nbsp; margin-bottom: 20px;
&nbsp; border: 1px solid #ccc;
&nbsp; border-radius: 5px;
&nbsp; width: 100%;
&nbsp; padding: 10px;
}


.contact-form-button {
&nbsp; background: #333;
&nbsp; color: #fff;
&nbsp; border: none;
&nbsp; border-radius: 5px;
&nbsp; padding: 10px 20px;
&nbsp; cursor: pointer;
}
</pre> Our contact form will look like this after styling <img src="https://d3esk90d93y9n7.cloudfront.net/contactform.webp-1714284673998"> With this all styling and UI setup, we are all ready to create a functionality. So, we will create a new function inside an "api" folder. It will help us create a new file and append contents to it using POST method. <pre class="ql-syntax" spellcheck="false">//pages/api/contact.ts
import { appendFile } from 'fs'
import { NextApiRequest, NextApiResponse } from 'next'
import path from 'path'

const writeAFile = async (req: NextApiRequest, res: NextApiResponse) =&gt; {
&nbsp; const { data } = req.body
&nbsp; try {
&nbsp; &nbsp; if (req.method === 'POST') {
&nbsp; &nbsp; &nbsp; const filePath = path.join(process.cwd(), 'public', 'contacts.txt')
&nbsp; &nbsp; &nbsp; // Change the file name as needed//line break with each post request
&nbsp; &nbsp; &nbsp; const fileContent = `${data}\n`
&nbsp; &nbsp; &nbsp; await appendFile(filePath, fileContent, (error) =&gt; {
&nbsp; &nbsp; &nbsp; &nbsp; if (error) throw new Error('Error writing to file')
&nbsp; &nbsp; &nbsp; })
&nbsp; &nbsp; &nbsp; res.status(200).json({ message: 'New content added successfully.' })
&nbsp; &nbsp; }
&nbsp; } catch (error) {
&nbsp; &nbsp; res.status(500).json({ error: 'Error creating a new contact' })
&nbsp; }
}
export default writeAFile
</pre> Few points to be noted: <ul><li>Here we are trying to join a path and create a file with it. Here, "process.cwd()" will give us the current path of the project and we will be creating a new file named "contacts.txt" inside our public directory.</li></ul> <ul><li>Here "appendfile" is an asynchronous function that we get from "fs" module which is related with file system functionality.</li></ul> Let's replace our "handleSubmit" function from above which we attached on form onsubmit event. We also need to set values of our input field. So we will manage their values using setState. <pre class="ql-syntax" spellcheck="false">import { useState } from 'react'
﻿
const Contact = () =&gt; {
&nbsp; const [name, setName] = useState('')
&nbsp; const [email, setEmail] = useState('')
&nbsp; const [phone, setPhone] = useState('')

 //replaced with new submit handler to call our contact api we created
﻿
&nbsp; const handleSubmit = async (e: React.FormEvent&lt;HTMLFormElement&gt;) =&gt; {
&nbsp; &nbsp; e.preventDefault()
&nbsp; &nbsp; const formattedData = `Name: ${name}\nEmail: ${email}\nPhone: ${phone}\n\n`
&nbsp; &nbsp; try {
&nbsp; &nbsp; &nbsp; const res = await fetch('/api/contact', {
&nbsp; &nbsp; &nbsp; &nbsp; method: 'POST',
&nbsp; &nbsp; &nbsp; &nbsp; body: JSON.stringify({ data: formattedData }),
&nbsp; &nbsp; &nbsp; &nbsp; headers: {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'Content-Type': 'application/json'
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; })
&nbsp; &nbsp; &nbsp; if (res) {
&nbsp; &nbsp; &nbsp; &nbsp; alert('Contact saved successfully')
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; } catch (e) {
&nbsp; &nbsp; &nbsp; alert('Something went wrong while saving contact, please try again.')
&nbsp; &nbsp; }
&nbsp; }
&nbsp; return (
&nbsp; &nbsp; &lt;div className="container"&gt;
&nbsp; &nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;form className="contact-form" onSubmit={handleSubmit}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Phone Directory&lt;/h1&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" placeholder="Name" required className="contact-form-field" onChange={(e) =&gt; setName(e.target.value)} /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="email" placeholder="Email" required className="contact-form-field" onChange={(e) =&gt; setEmail(e.target.value)} /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="phone" placeholder="Phone" required className="contact-form-field" onChange={(e) =&gt; setPhone(e.target.value)} /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="submit" className="contact-form-button"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Submit
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/form&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; )
}

export default Contact
</pre> After this, when we will submit a form, we will see a folder created in our public folder named "contacts.txt" which will have all the contact information that we havesubmitted. <h3>Conclusion:</h3> Writing to a file is a handy way to save some content saved in a project. With the use of NextJS that helps us write a backend or api service, we can leverage it's power to access file utilities. Hence, NextJS has a come a long way to establish itself as a full stack framework for small to mid level projects.

Starting React Project with Vite, Typescript, Eslint and Prettier

Starting React Project with Tyepscript, Eslint and Prettier

Starting React Project with Vite, Typescript, Eslint and Prettier

Phone Directory: Writing to a file using NextJS

React with React Hook Form and Yup: Validations made perfect

Setting up Amazon Email Service with Nodemailer

Route53 : Hosted Zone with Namecheap

Nginx and AWS Ec2: Proxy Forwarding with Node Express Server

AWS EC2 with Node and Express API

AWS S3: With React, Node and Postgres

React Hooks: Common Pitfalls and Blunders