DEV Community: Jabali Ndungu

Quickstart with Nodemailer

Jabali Ndungu — Mon, 19 Jul 2021 03:04:16 +0000

In this page you're going to learn how to create a Node.js function to send an email using Nodemailer.
Start by opening your terminal and use the following command to install Nodemailer:

$ npm install nodemailer

Require Nodemailer at the top of your file:

const nodemailer = require("nodemailer");

Now you're going to create a main function to send our Nodemailer emails. Our function needs an email account to send from, if you don't already have an email address to use with Nodemailer, you can create an SMTP service test account from ethereal.mail.

let testAccount = await nodemailer.createTestAccount()

Nodemailer's main transport for sending emails is an SMTP transporter because almost every email delivery provider supports SMTP. SMTP is also the protocol used to send emails between different hosts, so it is universally available.If you already have an email account simply substitute your email account information in the SMTP transporter:

let transporter = nodemailer.createTransport({
    host: "smtp.ethereal.email",
    port: 587,//uses port 465 if secure is true.
    secure: false,
    auth: { user: testAccount.user, pass: testAccount.password },
  });

Now you can use the transporter to send your email. Add your recipients, choose your subject line, and add your email in both html and plain text for best results.

  let email = await transporter.sendMail({
    from: '"Example User" <testAccount.user>', // sender address
    to: "them@example.com, recipient@example.com", // list of recipients
    subject: "Hello World!", // Subject line
    text: "My first Nodemailer email!", // plain text body
    html: "<b>My first Nodemailer email!</b>", // html body
  });

Your main function should now look like this:

const main = () => {
let testAccount = await nodemailer.createTestAccount()

let transporter = nodemailer.createTransport({
    host: "smtp.ethereal.email",
    port: 587,//uses port 465 if secure is true.
    secure: false,
    auth: { user: testAccount.user, pass: testAccount.password },
  });
let email = await transporter.sendMail({
    from: '"Example User" <you@example.com>', // sender address
    to: "them@example.com, recipient@example.com", // list of recipients
    subject: "Hello World!", // Subject line
    text: "My first Nodemailer email!", // plain text body
    html: "<b>My first Nodemailer email!</b>", // html body
  });
  console.log("Email: "+email.messageId+" was sent.") //This prints to the console that the email has been sent.
}

And that's it! You now have a function to send emails using Nodemailer.

Handling CORS with Netlify POST Requests

Jabali Ndungu — Mon, 19 Jul 2021 03:01:56 +0000

Netlify Functions make it possible to deploy server-side code that you can access as API endpoints. While handling GET requests with Netlify functions is straightforward and very well documented, you can run into quite a few issues while handling complex requests, like POST requests.

Cross-Origin Resource Sharing(CORS) is a HTTP-header security mechanism used to restrict which websites . Web browsers will restrict HTTP requests initiated by scripts like XMLHTTPRequest and the Fetch API because of the same-origin policy, so if you have a client facing web page at https://foo.bar, you'll need to enable CORS on the server-side before you can load resources from https://functions.foo.bar.

To start with you'll need a Netlify Function to work with. Here's a simple one that receives a name from a JSON object and returns a Hello message to the client:

exports.handler = async (event) => {
  const { name } = JSON.parse(event.body);
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Hello, " + name }),
  };
};

If you try to call this function through a development tool like Postman, or using curl it will run successfully because they do not enforce a same-origin policy, but web browsers will reject this request with a CORS error. When browsers make complex requests, like POST requests, they first send a pre-flight OPTIONS request to find out what headers the server accepts before sending the POST request.

You need to define what headers your function accepts:

const headers = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "Content-Type",
  "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
};

These headers mean that the server accepts GET, POST, OPTIONS HTTP requests, it also accepts the Content-Type header which describes what type of content is being sent in a POST request and the wildcard "*" means that it accepts requests from any origin. Note that it is safer to choose a specific origin instead of accepting requests from every origin.

Now you're going to check the value of event.httpMethod to see what HTTP request method is being sent from the client. If the method is OPTIONS, you need to return 200 as a status code and the headers object you defined too. This tells the browser that the pre-flight call was successful and it is allowed to request resources from your function.

if (event.httpMethod === "OPTIONS") {
  return {
    statusCode: 200,
    headers,
    body: JSON.stringify({ message: "Successful preflight call." }),
  };
}

Your browser will now send your POST request, and you will check the value of event.httpMethod to confirm that it is a POST request. Now you can return the status code 200, the "Hello" message and your headers object. It's important to return the headers object again when responding to the POST request or you will receive CORS errors even though your function is running successfully.

else if (event.httpMethod === "POST") {
    const { name } = JSON.parse(event.body);
    return {
      statusCode: 200,
      headers,
      body: JSON.stringify({ message: "Hello, " + name }),
    };

You have now successfully handled CORS with a POST request in your Netlify function. The full function looks like this:

exports.handler = async (event) => {
  const headers = {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Headers": "Content-Type",
    "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
  };
  if (event.httpMethod === "OPTIONS") {
    return {
      statusCode: 200,
      headers,
      body: JSON.stringify({ message: "Successful preflight call." }),
    };
  } else if (event.httpMethod === "POST") {
    const { name } = JSON.parse(event.body);
    return {
      statusCode: 200,
      headers,
      body: JSON.stringify({ message: "Hello, " + name }),
    };
  }
};

The useState Hook in React

Jabali Ndungu — Mon, 19 Jul 2021 02:59:53 +0000

React has two types of components, functional and class.

Class components extend from React.Component and have state and lifecycle methods. They look like this:

Class Example extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            text: ""
        };
    }
    componentDidMount(){
        //Do something when the component mounts.
    }
    render(){
        return <div>{this.state.text}</div>
    }
}

While functional components simply accept arguments as component props and return valid JSX:

function Example(props) {
  return <div>{props.text}</div>;
}
//Or alternatively
const Example = (props) => {
  return <div>{props.text}</div>;
};

The above examples are very similar, except the functional component cannot use state variables. This is where the useState Hook comes into play. Hooks were introduced in React 16.8, they are functions that add lifecycle methods and state variables to functional components. This is exciting because that means we can replace class components with more readable functional components and maintain functionality. This guide is focused specifically on the useState Hook, which allows us to access state variables in a functional component. Hooks should start with use, to make them easy to identify.

Get and Set State with useState

The useState Hook allows you to add get state variables and set state variables in functional components. While state in a class is always an object, state with Hooks can be any type. Each piece of state can hold just a single value.

To import the useState Hook, simply type:

import React, { useState } from "react";

The useState Hook always returns an array where the first element is the state variable and the second is a function that updates the value of the variable.

const Example = () => {
  const exampleState = useState("");
  const example = exampleState[0]; //This is the value ''
  const setExample = exampleState[1]; // This is a function
};

It is good practice to use array destructuring with useState to make it simpler and more readable:

const Example = () => {
  const [example, setExample] = useState("");
  //Now you can access the value with example, and update it with setExample.
  return (
    <div>
      <input
        type={"text"}
        value={example}
        onChange={(e) => {
          setExample(e.target.value);
        }}
      />
      <p>{example}</p>
    </div>
  );
};

useState rules

All Hooks have to follow two rules.

Only call Hooks at the Top Level
Only call Hooks from React Functions

The first rule means that you cannot use Hooks inside conditionals, loops or nested functions because React relies on the order useState Hooks are called to get values correctly. The second rule means that you cannot call Hooks in class components or regular JavaScript functions. If you violate either of these rules you'll get an error.

const GoodExample = () => {
  const [good, setGood] = useState("This is a good example.");
};
const BadExample = () => {
  const handleBad = () => {
    const [badExample, setBadExample] = useState(
      "Don't call Hooks inside nested functions."
    );
  };
  if (badExample) {
    const [anotherBadExample, setAnotherBadExample] = useState(
      "Don't call Hooks inside conditionals or loops."
    );
  }
};

A functional component can have many calls to useState. When the component is rendered for the first time and useState is executed, the initial value is read. However, if the value is changed by the set function, subsequent renders of the component use the updated state value.

Conclusion

The useState Hook allows you to use state variables in functional components. This means that you can replace class components with more readable functional components while keeping state variables. The easiest way to write them is like this:

import React, { useState } from "react";
const Example = () => {
  const [example, setExample] = useState("");
};

All Hooks have to follow the same two rules, and there's an ESLint plugin to help enforce them.

Below is an example of useState Hooks using a variety of types:

const Example = () => {
  const [string, setString] = useState("This is a string example.");
  const [numberExample, setNumber] = useState(0);
  const [arrayExample, setArray] = useState([]);
  const [objectExample, setObject] = useState({});
  const [boolExample, setBool] = useState(false);
  const [nullExample, setNull] = useState(null);
};

Image Handling in React Native

Jabali Ndungu — Wed, 01 Jan 2020 16:27:50 +0000

Hey everyone,

I'm working on a react native project that involves users uploading images from their devices. Got it up and running, and successfully uploading to Firebase Cloud Storage and I now want to implement some client side image handling.

I know I'd like to limit the size of the image, and I'll most likely implement it client side.

Have any tips or best practices for image handling in general, or react native implementations?