DEV Community: Vishwanath

MERN FOLDERS & FILES STRUCTURE

Vishwanath — Tue, 19 Jul 2022 08:14:00 +0000

This article tells about MERN Stack folders and files structure, How to name folders and files! first, know that. Lots of beginner developers' mistakes were backend and frontend folders were created in different locations which was a big mistake. When you deploy your project problem will come, First we create the folder and the folder name is MERN-STRUCTURE. Inside the folder create two sub-folders Backend and frontend folders.

we use backend and frontend separate folders, and the backend folder was the server connection and database connection and controls the data and rest APIs. The frontend folder was UI components and .env files were environment variables using server and help to secret port number and database name and secret keys. .gitignore file was ignored in the node_modules folder and .env files, why use gitignore files? The gitignore file helps to store particular files and folders in the GitHub repository.

BACKEND FOLDERS STRUCTURE

Backend folder inside the lots of sub-folders like this, Config folder was database configuration. The controller folder was the control data and the rest APIs. Middleware folder was authenticated middleware and error middleware, routes folder was rest APIs and router the location. server file important to all files is a configuration in the server file.

FRONTEND FOLDER STRUCTURE

The frontend folder was UI components and easy to display the data and easy way to understand the client. I have used React for the frontend library and React is reduce your code and reusability. Redux is a tool for state management using reactjs.

THANKS FOR READING THIS ARTICLE ❤️

React UseEffect()

Vishwanath — Wed, 13 Jul 2022 14:13:31 +0000

This article tells about React UseEffect(), This central concept react with lifecycle components to render your code.

UseEffect Syntax


UseEffect(() => {
----------your code -----------
},[])

UseEffect really helps to render your code and your code inside the UseEffect hooks. First run, in UseEffect hooks after running the codes.

How to learn Solidity

Vishwanath — Sat, 09 Jul 2022 13:25:03 +0000

NODEMAILER USING NODE

Vishwanath — Sat, 09 Jul 2022 10:23:36 +0000

This article discusses how to configure nodemailer in your code. Quickly understand the code and implement your code. Let's start

Setup folder structure like this

Packages

express
nodemailer
dotenv
colors

npm i express nodemailer dotenv colors

Create backend folder and inside folder create file is server.js,
Like this backend/server.js

backend/server.js

In this section, we create the express app server, and listen port is 5000.

import express from 'express';
import dotenv from 'dotenv';
import colors from 'colors';
import Router from './router.js';


dotenv.config();

const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }))

app.use('/api/contact', Router);


const PORT = process.env.PORT || 5000;

app.listen(PORT, () => {
    console.log(`server running ${process.env.NODE_ENV} mode on port ${process.env.PORT}`.yellow.underline);
})

backend/router.js

In this section configure the nodemailer and post your email, to email, subject, and message in the route http://localhost:5000/api/contact. Using the Postman really helps test your API. Easily find errors and nodemailer working or not

import express from 'express';
const router  = express.Router();
import nodemailer from 'nodemailer';


router.post('/', (req, res) => {

    const { fromEmail, toEmail, subject, message } = req.body;

    const output = `
        <div style="font-family:'Sen',sans-serif;">
            <h3>Subject</h3>
            <p style="margin-left: 1rem;">${subject}</p>
            <h3>Message</h3>
            <p style="margin-left: 1rem;">${message}</p>
        </div>
    `;

    // create reusable transporter object using the default SMTP transport
    let transporter = nodemailer.createTransport({
        service: 'gmail',
        port: 465,
        secure: true, // use SSL // true for 465, false for other ports
        auth: {
            user: `${fromEmail}`, // generated ethereal user
            pass: '---------'  // generated ethereal password
        },
        tls:{
            rejectUnAuthorized:true
        }

    });

    // setup email data with unicode symbols
    let mailOptions = {
        from: `"Contact" <${fromEmail}>`, // sender address
        to: `${toEmail}`, // list of receivers
        subject: `${subject}`, // Subject line
        text: `${message}`, // plain text body
        html: output // html body
    };

    // send mail with defined transport object
    transporter.sendMail(mailOptions, (error, info) => {
        if (error) {
            return res.status(401).json({
                msg: error
            });
        }
        // console.log('Message sent: %s', info.messageId);   
        // console.log('Preview URL: %s', nodemailer.getTestMessageUrl(info));

        if (info) {
            return res.status(200).json({
                msg:`Message has been sent ${toEmail}`
            });
        }
    });

})



export default router;

I trust this article helps your code and understand the configure the nodemailer.

Thanks for reading this article ❤

Github | Twitter