This can be daunting in situations where multiple developers are actively working on a codebase, making changes to different branches, or managing multiple branch-specific configurations.

Like with every pull request or change pushed to a branch, you’ll need to review every line of code that’s been changed, added, or removed before deciding what gets merged or not. Configuration files in codebases are not exempt from this, making them prone to errors, as a simple change can affect your entire Continuous Integration setup.

When changes get made to the staging or production branch and a build is triggered, you’ll want to ensure that the correct resources attached to a branch are maintained. In some cases, you may need to define different redirect rules for each respective client, custom build commands, or other settings for each branch.

In this article, I’ll walk through how to manage branch-specific configurations including redirects for multiple branches automatically, using a simple bash script. I’ll also show you how to safely merge context-specific rules for your staging and production branches on Netlify.

What we’ll cover:

• Project Structure and Scenario

• What are Redirects/Rewrites?

• How Netlify Processes Redirects

  • Using the _redirects file syntax

  • Using the netlify.toml configuration file syntax

• The Problem: Managing Multiple netlify.toml Files for Different Branches

• How to Write the Script to Automatically Create Our Configuration File(s)

  • Sample Netlify.toml file

  • Step 1: Create the script folder and add the script file

  • Step 2: Modify package.json to include the script command

• How to Deploy Our Client to Netlify

  • First deployment of your project to Netlify

  • Subsequent Deployments / How to Set Up Branch Deployments

    • Step 1: Set Up Environment Variables in Netlify for each branch context — production, staging, and so on

    • Step 2: Trigger a new deploy

• Inspect Your Deployments

• Conclusion

Project Structure and Scenario

Consider a situation where you have two separate servers deployed for a project: one to serve requests to a staging environment (deployed to Render), and another to the production environment (deployed to Google Cloud Run).

You also have two separate client deployments on Netlify, each with their respective API_BASE_URLs, that are served by their respective servers as illustrated below:

The image below is a sample-project repository, with api and client folders/directories within it. This is an overview of the structure in each of the branches outlined above. Each directory contains its own package.json file, is treated as an independent component, and can be deployed to two separate services.

In your frontend deployment for each of the clients, all your requests made to endpoints that begin with /api/v1/ are routed to the server. Other routes remain within the frontend to direct you to pages within the client. So you’re required to write the correct rules to guide your client on how to process these requests. These are called redirect rules or rewrites.

What are Redirects/Rewrites?

Redirects, or rewrites, are rules you can create to have certain URLs automatically go to a new location anywhere on the internet (source: WPengine). These are also generally known as URL forwarding and you can use them anywhere – in entire websites, sections of a website, or an entire web application.

In web applications, redirects are often utilized to determine how to process requests. Web hosting platforms such as Netlify and Vercel use them as well, giving developers the option to determine how their web applications process requests.

How Netlify Processes Redirects

Netlify has two possible ways to specify redirect rules. You can do it using the _redirects file syntax or using the netlify.toml configuration file syntax. They achieve the same goal, but the netlify.toml syntax gives you more options and capabilities.

Using the _redirects file syntax

If you opt to use the redirect syntax, you should simply create a _redirects file in the public folder of your client app, and specify the redirect rules within it. That’s as easy as it gets. Below is an example of a redirect rule within the file:

The above rule can be interpreted as:

1. Send all my requests that match /api/v1 to the API URL specified, and return a 200 success status code. The asterisks (*) after /api/v1/ as seen in /api/v1/* instruct it to append any other extension of the original URL to the stated API URL. For example, if you have a /api/v1/users route in your frontend, that request will be redirected to https://your-api-base-url.com/api/v1/users. The :splat seen in the API URL is simply a placeholder.

2. Serve all other default routes through the index.html folder. This is required to ensure that you don’t encounter broken pages when you navigate to other pages and attempt to visit the previous page using the “back” button.

Using the netlify.toml configuration file syntax

The netlify.toml configuration file gives you a lot more flexibility when specifying redirect rules, including but not limited to matching the original request route, the required destination, the preferred status code response, header rules, signatures, country restrictions, roles and more.

This is a sample netlify.toml file sourced from Netlify’s documentation:

Quick Note: using the redirects file for redirecting certain requests to our API is perfectly fine. But it can be considered a security risk adding our API URL in plain text in the redirects file if the API_BASE_URL is supposed to be private. This is because any file in the public folder is what it sounds like – public – and anyone can access it.

If the direct locations you desire to have in your app are public URLs, then feel free to utilize the _redirects file syntax. But if you prefer to have a private URL(s), utilizing a netlify.toml configuration file in combination with the environment variables is generally a better idea.

The Problem: Managing Multiple netlify.toml Files for Different Branches

When you use the netlify.toml file to define your build commands and environment-specific settings, and you make changes that are pushed to your repository and open pull requests, you have to manually ignore or edit each netlify.tomlin each branch. This eventually becomes very stressful and susceptible to errors.

In addition to this, we want to avoid having our API URLs hardcoded in either our _redirects or netlify.tomlfile within our project codebase for security reasons. We will use environment variables as provided within our Netlify UI for production and staging contexts.

To avoid the above problems, we will use a small script in our codebase to dynamically generate the correct netlify.toml files for each branch. This approach eliminates conflicts and removes the need for manual intervention when switching between branches or handling pull requests.

How to Write the Script to Automatically Create Our Configuration File(s)

Sample Netlify.toml file

Below is a screenshot of a sample netlify.toml file we are trying to achieve for each build. You can see that all our requests that match api/v1/ in our codebase will be routed to our API.

You could have your API endpoint requests structured differently, for example /api/your-endpoint – just make sure to adjust the script accordingly. In this sample project, we use api/v1/your-endpoint as our structure.

Step 1: Create the script folder and add the script file

In the client directory, create a scripts/ directory and a configure-netlify.sh script file. You are required to do this for each branch in your repo. The content remains the same.

Open the configure-netlify.sh script file and paste the following content within it:

#!/bin/bash

# Ensure API_BASE_URL is set
if [ -z "$API_BASE_URL" ]; then
  echo "Error: API_BASE_URL environment variable is not set."
  exit 1  # Exit the script to stop the deployment
fi

echo "Using API endpoint: $API_BASE_URL"

# Define the desired Netlify configuration
NETLIFY_CONFIG="
[build]
  command = \"npm install && npm run build\"
  base = \"client\"
  publish = \"dist\"

[[redirects]]
  from = \"/api/v1/*\"
  to = \"$API_BASE_URL/:splat\"
  status = 200
  force = true

[[redirects]]
  from = \"/*\"
  to = \"/index.html\"
  status = 200
"

# Create or update the netlify.toml file
if [ ! -f "netlify.toml" ]; then
  echo "Creating netlify.toml file..."
else
  echo "Updating existing netlify.toml file..."
fi

echo "$NETLIFY_CONFIG" > netlify.toml

# Confirm successful configuration
echo "netlify.toml file has been configured successfully!"

The script does the following:

1. It checks the environment variables to ensure that the API_BASE_URL is set. If this isn’t set, it exits the build and causes it to fail. We did this to ensure that you don’t mistakenly create a successful deployment but with invalid URLs in production.

2. It then creates the content of the netlify.toml file as shown in the sample above. If your API endpoints use a different structure from api/v1/your-endpoint, you can adjust the script to fit your desired structure.

3. It checks if there already exists a netlify.toml file. If it doesn’t exist, it creates one and writes the content into it. If it exists, it updates it with the correct content during the build, using the API_BASE_URL set in the environment variables.

Step 2: Modify package.json to include the script command

To integrate this script with your build process, we will add a script command to the package.json file to call this script before running the actual build.

Add the configure-netlify command as follows: "configure-netlify": "bash scripts/configure-netlify.sh" within the scripts in your package.json file.

Update your build command to run the script before running the actual build: "build": "npm run configure-netlify && vite build".

Don’t forget to save these changes and push them to your remote repository.

How to Deploy Our Client To Netlify

When deploying our client to Netlify, we are given three options:

1. importing an existing project (that is, a project that exists on a git repository service such as GitHub and GitLab),

2. importing from a template, or

3. manually deploying a static site using the Netlify drop (drag and drop) interface.

For the configuration in our repository to work as expected during our build process, you’ll need to use the option that requires importing from an existing project such as GitHub. Using the drag-and-drop interface won’t work. If you must use this, then opt for the _redirects file syntax option to define your redirects.

First deployment of your project to Netlify

When deploying your project for the first time, you are given the option of deploying only one branch initially. You can only add and specify other options, such as other branches, in subsequent deployments.

To deploy your project, take the following steps:

1. Sign in to Netlify > netlify.com

2. Click "Add new site" > "Import an existing project" > "Deploy with GitHub"

3. Click "Configure Netlify on GitHub" > Search for your repository > Select it

4. Enter a unique site name for your project

5. Configure deploy settings. Here you are required to select the preferred branch to deploy. For the initial deployment, we will deploy the main branch which we use as the production branch.

   • Branch: main/master

   • Build command: npm run build

   • Publish directory: dist (Select the directory where your static file lives. In this sample project, it’s exported into the dist directory. Some tools export into build)

6. Enter the environment variables for your project. Don’t forget to enter your API_BASE_URL from your server. This is an essential requirement according to the bash script.

7. Click "Deploy site"

Your project should deploy correctly, and you’ll be able to see the netlify.toml configuration generated by the script by inspecting the deployment details at the bottom of the successful deployment page.

You can download this file to your local machine to see the configuration generated. It should match the sample netlify.toml file above. You can also test that it works using your generated site link.

Subsequent Deployments / How to Set Up Branch Deployments

Step 1: Set Up Environment Variables in Netlify for each branch context  — production, staging, and so on

When your project has been deployed successfully, you can set up deployments for your staging branch. To edit the configurations, you’ll need to:

1. Navigate to the list of your sites

2. Select your successfully deployed site

3. Click on “site configuration” on the left menu

4. Select “environment variables” > click the “Add a variable” button.

You will be given the option of adding variables individually or importing an entire .env file. You can choose either option. In the image below, I’ve selected “Import from a .env file”.

Seeing that our production site, deployed from the main branch (with the production environmental variables), has already been deployed, you’ll need to:

1. Uncheck the production branch (to prevent replacing the initially deployed main branch. Be careful not to mix up your environment variables for different branches)

2. Select “branch deploys”

3. Copy and paste the content of your .env file in the input section

4. Don’t forget to add the API_BASE_URL environment variable for your staging environment

Note that in selecting branch deploys, the environment variables imported here will affect all branch deploys, apart from the production branch. You can further customize your contexts by selecting a custom branch, but that’s an entirely different approach which may require you to further customize your netlify.toml configuration file or the bash script.

If you decide to import each environment variable individually, you are given a similar option as seen below. Ensure that you select the correct context for each branch.

DON’T USE THE SAME VALUES FOR ALL CONTEXTS. As seen in the image below, selecting “different value for each deploy context” will allow you to define the values for each one. In this case, we define the values for branch deploys. Your initially used production variable should already exist.

When all the variables have been imported, you can inspect them to confirm that they have been correctly imported by selecting the dropdown on the right beside each variable and inspecting their values.

Step 2: Trigger a new deploy

When all your environment variables have been imported for the different contexts – production and staging in this case – navigate to “deploys” on the left panel of your screen. Then hit the “Trigger deploy” button, clear the cache, and initiate a new deployment.

Inspect Your Deployments

You can confirm that your script works as expected by selecting any of the deployments and selecting the building dropdown in the “Deploy log”. You will see the command run, as well as your output and API URL for that deployment, as defined by your context.

Conclusion

By following the steps in this guide, and using your script and updated commands in each branch in your repo, when you push changes then Netlify will automatically generate or update the netlify.tomlfile in each branch. This ensures that the correct configurations and environment variables for each environment are used at build time.

Your script remains the same across all the branches. This lets you focus on other code changes while your script handles the correct configuration for you safely and easily.

Push changes to any branch to see this in action.

Feel free to connect with me on Twitter (@francisihej) or LinkedIn!

To follow along with this tutorial, there are a few prerequisites:

1. An existing React and TypeScript project with Vite that you want to deploy.
2. Visual Studio Code (VSCode) editor or any other code editor such as Sublime.
3. Optionally, you can just use a command line/terminal instead of your code editor's built-in terminal.
4. An existing Netlify account that you've already logged into.

Let's go ahead with our deployment!

What to expect

You will deploy your project manually on Netlify, rename your site on the platform, and be able to have a live version of your project.

How to Deploy Your React and TypeScript Project

1. Open up your existing project on VSCode

Open up your project in the code editor of your choice.

2. Build the project

Open the terminal in VSCode and use the code below to build your project:

npm run build

This should generate a dist folder in your root directory where your projects' minified version is created and stored.

Figure 2.0 Running the project in the terminal which creates the dist folder in the project structure.

3. Drag and Drop your Dist Folder in Netlify

On Netlify under Team Overview, click on the Add New Site button. It should have three options:

1. Import an existing project
2. Start from a template
3. Deploy manually

Select the third choice to deploy manually.

Figure 3.0 Clicking on the Add new site button shows the three options to choose from. Select "Deploy Manually".

It should lead you to the page as seen in the below image:

Figure 3.1 Drag & drop view when choosing to deploy manually.

Click on the page and navigate into your project's file path.

Upload the dist folder that was previously generated in your project onto Netlify.

Figure 3.2 Navigating into the project's folder & uploading the dist folder onto Netlify.

It will take a few seconds or minutes to get your project deployed.

Once deployment is successful, you will see a page similar to the one below. By default, it gives a randomly generated subdomain name to your site's URL. For example, in my case, it is delightful-pie-bba293.

Figure 3.3 Deployment is successful.

Your site's name is the subdomain of Netlify's domain.

https://<your-site-name>.netlify.app

4. Rename your site

Click on the Site Configuration that is on the lefthand sidebar.

In the Site Information under Site Details, click on the Change Site Name button.

Figure 4.0 Viewing the Site Details under the Site Configuration.

This should give you a pop-up to change your site's name.

Change the name of your site to whatever you like:

Figure 4.1 Changing the name of your site.

Head back to the Site Overview where you can find the URL of your site. Your site's URL is found right underneath your project's name.

Figure 4.2 Site Overview where you can find your site's URL.

Click on the URL to view your site!

Figure 4.3 Viewing my site from the newly created URL.

Conclusion

Now, you have live versions of your projects and you're able to deploy them manually on Netlify.

There are additional steps to take in order to add a custom domain but we're not covering that in this tutorial.

This also makes it easier to reference your projects in the meantime on your résumés, portfolio site, or anywhere else.

Thanks for powering through this article and happy coding! 🩷

📝Additional Resources:

1. This article is a summarized version of this video. If you'd prefer to watch and follow along, then that is the video to watch.
2. There are many other platforms such as Cloudflare, Heroku, or Vercel to deploy your projects on. This video, for instance, shows you how to deploy your projects onto Vercel.

🔍Connect with me!

Follow me on X and LinkedIn if you like my work and want to stay updated for more.

You can use Netlify to host websites, and it helps you update and release new changes. It also provides additional features such as security, user authentication and authorization services, and more.

This guide focuses on showing you how to set up a Netlify serverless function to hide Application Programming Interface (API) keys in a client-side application.

For this lesson, you will create a stock photo search engine web application, deploy it on Netlify, and make an API call to the Pixabay API using Netlify serverless functions.

This is the same process for front-end applications built with ReactJS, NextJS, VueJS, Angular, or other JavaScript frameworks.

Prerequisites

To follow along with this tutorial, you should have the following:

• Netlify account (you can sign up here)

• Basic understanding of RESTful APIs, Lambda functions, and async/await concepts.

The final demo app lives in the main branch on GitHub: https://netlify-func-demo.netlify.app

What is a Netlify function?

Netlify functions are serverless or lambda functions provided by Netlify. You use them to deploy server-side code or backend logic without the need for a dedicated server.

The purpose of this Netlify function is to manage serverless event-driven code and send HTTP requests that return a JSON response.

"Serverless functions, branded as Netlify Functions when running on Netlify, are a way to deploy server-side code as API endpoints" - Netlify Docs

It securely accesses environment variables behind the scenes via the Amazon Web Services (AWS) lambda function.

Secret credentials such as access tokens or API keys, hidden solely using environment variables, are less secure. This is because they can be easily retrieved from the Developer Tools through the API fetch request in the browser.

The API keys, if hijacked, can be misused by malicious actors, which might affect your app build threshold or cost you more if it's a paid API service.

Other serverless functions used for running code without having to manage servers include AWS Lambda functions, Azure functions, and Google cloud functions.

How to Set Up a Client-side Application

How to Clone the Demo App

To get started with this tutorial, you can clone the stock photo search engine app GitHub repository. See the live preview on Netlify at https://netlify-func-demo.netlify.app.

The first step is to clone the repository:

git clone https://github.com/frankiefab100/netlify-serverless-functions-demo.git

Next, change to the netlify-serverless-functions-demo directory.

 cd netlify-serverless-functions-demo

Then you'll need to install dependencies.

npm install
#OR 
yarn add

Now run the development server. Run the following command to start the app on the server:

netlify dev

The app will be ready on https://localhost:8888.

Alternatively, you can skip the above steps if you wish to follow along by building the app from scratch. In the next step, you will build a stock photo search engine JavaScript application.

How to Build the Demo App using JavaScript

The first step is to set up a front-end app. Open your favorite code editor, such as VS Code.

Then, create a dist directory and inside it create an index.html file. Populate it with the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Stock Photos Search Engine</title>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>Search For Stock Photos</h1>
        <div class="search-section">
          <input
            type="text"
            name="search"
            class="search"
            placeholder="Enter a keyword"
          />
          <input
            id="searchBtn"
            class="search-btn"
            type="submit"
            value="Search"
          />
        </div>
      </header>

      <div class="photo-wrapper">
        <img src="" alt="" class="photo" />
      </div>
    </div>

    <script src="./script.js" type="module"></script>
  </body>
</html>

In the same dist directory, add the following styling to style.css:

/* dist/style.css */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  color: #222;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  min-width: 100vw;
  width: 100%;
  height: 100%;
}

h1 {
  padding-bottom: 20px;
}

.search-section {
  display: inline;
  text-align: center;
  min-width: 310px;
}

.search,
.search-btn {
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  padding: 15px;
  height: 50px;
}

.search {
  background-color: #d1f3bf;
  color: #222;
  min-width: 225px;
}

.search-btn {
  background-color: #04ab04;
  color: #f6f6f6;
  cursor: pointer;
  margin-left: 5px;
  min-width: 80px;
  transition: all 0.3s ease-in-out;
}

.search-btn:hover {
  background-color: #2dc22d;
}

.photo-wrapper {
  display: flex;
  gap: 15px;
  margin: 30px;
}

.photo-wrapper img {
  width: 200px;
}

Sign Up for a Free Account on Pixabay

The first step to using the Pixabay API is to sign up for an account with your email.

Pixabay API key section

As shown in the image above, your API key can be found below the parameters section in the Pixabay API Docs website.

Create an environment variable

Environment variables (commonly known as "env") are combinations of key/value pairs that can affect the behavior and processes of an operating system or application.

Using environment variables is recommended to configure third-party services and their credentials during development.

Install dotenv

Once you complete the account creation on Pixabay, open your terminal and install dotenv as a package. This will enable your app to read environment variables saved in the .env file.

npm install dotenv
#OR
yarn add -D dotenv

In the next step, you will save the API key in a .env file.

Create the .env file

In the root directory of your app, create a .env file and store the API keys copied from your Pixabay Profile.

PIXABAY_API_KEY=123456-7890

Where PIXABAY_API_KEY=123456-7890 represents the API key value.

Note: Replace this key/value pair with the appropriate value.

Create a .gitignore file

To avoid committing sensitive files and values such as node_modules and secret keys to a public repository, create a .gitignore file in the same project root directory and add the following to it:

node_modules
.env
.netlify

The .netlify folder which contains compiled serverless functions together with other files listed will be excluded when the project is pushed to GitHub or any other version control system.

Create a get request function

Now, you should add the fetch request logic in the script.js. You will adjust the API logic later using Netlify functions.

/* dist/script.js */
const dotenv = require("dotenv").config();

const searchbar = document.querySelector(".search");
const submitBtn = document.querySelector(".search-btn");
const photoWrapper = document.querySelector(".photo-wrapper");

submitBtn.addEventListener("click", () => {
  getPhoto(searchbar.value);
  searchbar.value = "";
});

window.addEventListener("keydown", (e) => {
  if (e.keyCode === 13) {
    getPhoto(searchbar.value);
    searchbar.value = "";
  }
});

async function getPhoto(keyword) {
  const apiKey = PIXABAY_API_KEY;
  let apiURL = `https://pixabay.com/api/?key=${apiKey}&q=${keyword}&image_type=photo&safesearch=true&per_page=3`;

  try {
    const response = await fetch(apiURL, {
      method: "GET",
      headers: { accept: "application/json" },
    });
    const data = await response.json();

    let imageURL = data.hits;

    imageURL.forEach((result) => {
      let imageElement = document.createElement("img");
      imageElement.setAttribute("src", `${result.webformatURL}`);
      photoWrapper.appendChild(imageElement);
    });
  } catch (error) {
    alert(error);
  }
}

Note: As mentioned earlier, if the codebase of this app is published on GitHub. The API key will still be accessible from the client side on a browser, although the .env file that contains the secret key was excluded.

To illustrate this, select the testing branch of this app repository. The Live site preview will display the following Reference Errors in your browser console:

Uncaught ReferenceError: require is not defined
Uncaught ReferenceError: require is not defined at getPhotos
Uncaught ReferenceError: process is not defined at getPhotos

This is because there is no way to reference the environment variables specified in the .env file, since they weren't committed to the public repository on GitHub.

In the next step, select and clone the [testing](https://github.com/frankiefab100/netlify-serverless-functions-demo/tree/testing) branch on your local machine with the following commands:

git clone https://github.com/frankiefab100/netlify-serverless-functions-demo.git
cd netlify-serveless-functions-demo
npm install
netlify dev

The app should launch on your browser via localhost:8888.

Now, go to the Developer tools, right-click and select Inspect. Alternatively, press the F12 key. Then, navigate to Network tab and tab on the getPhotos.js request URL.

API key displayed in the Network tab in Developer tools

You should see the API key publicly exposed in the Network tab's Headers section and return as a response data in your browser.

This is a security issue since the Network tab in the Developer tools is typically responsible to display informations such as the request URL, response status, and response data.

API key returned as a response data and exposed in the URL of the request

In the next section, you will find a way to secure the API key using Netlify functions.

How to Get Started with Netlify Functions

First, you'll need to go into your terminal and install Netlify CLI and Lambda as Devdependencies. You can do that by running this command:

npm install -g netlify-cli netlify-lambda
#OR 
yarn add -D netlify-cli netlify-lambda --save-dev

Add custom build and development commands in package.json

These commands build and start the app in the server and also launch the app on your web browser. Here's an example of how you might add these script commands in the package.json file:

"scripts": {
   "build": "npm run-script",
   "dev": "netlify dev"
 }

Install Axios

You will use the axios.get method, because it is a node function unlike the fetch method that is intended for browser runtime.

To install Axios, open your terminal and enter the command:

npm install axios
#OR
yarn add -D axios

In this case, you are working with a vanilla JavaScript app, so you should import Axios in the getPhotos.js file as:

const axios = require("axios");

For JavaScript libraries, like React, import it as follows:

import axios from "axios";

Create a serverless function

In the root of the project, create a folder named netlify,and inside it create another folder functions. In this functions directory, create a file named getPhotos.js.

You will create a serverless function in the getPhotos. This will completely hide the API keys while fetching images from the Pixabay API.

//netlify/functions/getPhotos.js 
require("dotenv").config();

const axios = require("axios");

exports.handler = async (event, context) => {
  try {
    const { keyword } = event.queryStringParameters;
    let response = await axios.get(
      `https://pixabay.com/api/?key=${process.env.PIXABAY_API_KEY}&q=${keyword}&image_type=photo&safesearch=true&per_page=3`,
      {
        headers: { Accept: "application/json", "Accept-Encoding": "identity" },
        params: { trophies: true },
      }
    );

    let imageURL = response.data.hits;

    return {
      statusCode: 200,
      body: JSON.stringify({ imageURL }),
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error }),
    };
  }
};

Here, the process.env.PIXABAY_API_KEY references API key environment configuration specified in the .env file for development mode.

The keyword parameter accepts a string accessible in the queryStringParameters property and returns a response data stored in the variable imageURL. This will get passed to the script.js as request response (we'll discuss this later).

If the GET request is successful, it returns a response of statusCode 200 with the corresponding response as a JSON object. For errors, we will get an alert with the error message and status code.

Due to changes in version, Axios might return Buffer as a response in your terminal window, that looks like this:

Buffer response from Axios in Terminal

To prevent this, you should attach the following to the GET request:

 let response = await axios.get(
      `https://pixabay.com/api/?key=${process.env.PIXABAY_API_KEY}&q=${keyword}&image_type=photo&safesearch=true&per_page=3`,
      {
        headers: { Accept: "application/json", "Accept-Encoding": "identity" },
        params: { trophies: true },
      }
    );

Create a Netlify configuration file

In the project root directory, create a netlify.toml file. This file specifies how Netlify builds and deploys your app.

Now, add the following build configurations in netlify.toml:

[build]
  command = "npm run build"
  functions = "netlify/functions"
  publish = "dist"

Note:

• command = "npm run build" triggers the Netlify CLI to build the app from the functions.

• functions = "netlify/functions" indicates that the getPhotos functions exist in the netlify/functions directory.

• publish = "dist" identifies dist as the directory where the file will be served from.

Update the script.js file with the Netlify functions request URL

Next, update the apiURL from this:

let apiURL = `https://pixabay.com/api/?key=${apiKey}&q=${keyword}&image_type=photo&safesearch=true&per_page=3`;

to the functions HTTP request endpoint:

  let apiURL = `/.netlify/functions/getPhotos?keyword=${keyword}`;

This serverless function will get queried to the client-side of your app through the endpoint: /.netlify/functions/getPhotos. Once a fetch request is sent, the getphotos function will be invoked and accessed in the script.js.

The getPhotos Netlify functions' response imageURL will be passed and the data accessed as the value of the keyword parameter in the query string of function. It will get loop through to return three images from the Pixabay API to the client-side.

The script.js file should look like this:

/* dist/script.js */
const searchbar = document.querySelector(".search");
const submitBtn = document.querySelector(".search-btn");
const photoWrapper = document.querySelector(".photo-wrapper");

submitBtn.addEventListener("click", () => {
  getPhoto(searchbar.value);
  searchbar.value = "";
  photoWrapper.innerHTML = "";
});

window.addEventListener("keydown", (e) => {
  if (e.keyCode === 13) {
    getPhoto(searchbar.value);
    searchbar.value = "";
    photoWrapper.innerHTML = "";
  }
});

async function getPhoto(keyword) {
  let apiURL = `/.netlify/functions/getPhotos?keyword=${keyword}`;

  try {
    const response = await fetch(apiURL, {
      method: "GET",
      headers: { accept: "application/json" },
    });
    const data = await response.json();

    for (let i = 0; i < data.imageURL.length; i++) {
      let imageElement = document.createElement("img");
      imageElement.setAttribute("src", `${data.imageURL[i].webformatURL}`);
      photoWrapper.appendChild(imageElement);
    }
  } catch (error) {
    alert(error);
  }
}

Note: From the codebase above, your environment variable is secure since it is accessed from the serverless function.

Run the development server

Now, execute your app by running the command:

netlify dev

This will load the getPhotos function via https://localhost:8888/.netlify/functions/getPhotos.

netlify build terminal output

Then, start the development server and launch the application in your default web browser on localhost:8888.

netlify function ready on https://localhost:8888

At this point, the Netlify function is fully setup, and you can now proceed to make GET HTTP requests.

How to Send Fetch Requests

Now that you already have the web app served, go ahead and send a fetch request. Enter some text in the search input field and hit Enter or click the button to fetch images from the Pixabay API.

flower images fetched from Pixabay API

For more information about the Pixabay API, see the Pixabay documentation.

The preceding command will send a request to the serverless function and then return six responses. Here's what the response looks like in your terminal windows:

Request from ::1: GET /.netlify/functions/getPhotos?keyword=flower
Response with status 200 in 4895 ms.

You can also use Developer tools through the Network tab to validate the request.

serverless function API response data

The fetch request returns our app URL, the getPhotos Netlify function, script.js and the images from Pixabay.

Netlify function fetch response from Network tab's header section in the browser

How to Host the App on the Remote Repository

Now, you should push your project to GitHub version control.

git add .
git commit -m"initial commit"
git push origin -u main

How to Deploy the App and Serverless Function on Netlify

Once you have published the project on GitHub, log in to Netlify and connect your GitHub account by granting authorization.

Import project for deployment on Netlify

As shown in the image above, click the Add A New Project and then search for the app repository from the list. Next, click on Build Your Site. This will take a few minutes to complete.

You just deployed the app from the Netlify UI. Your app is now ready at: https://netlify-func-demo.netlify.app..

The fetch request URL should look like this: https://netlify-func-demo.netlify.app/.netlify/functions/getPhotos.

Optional - How to Configure the Netlify App from the Dashboard

Alternatively, you can configure the Netlify command from the Netlify Dashboard. If these settings are already specified in netlify.toml, it will override any corresponding configuration.

First, select the project directory's Site settings.

Site settings for project directory on Netlify

Set the Build command and Publish directory

Navigate to Site settings > Deploy > Build & deploy and edit the following commands and then save the changes:

• Build command: npm run build

• Publish directory: dist

Build and deploy section on Netlify

Set the Functions directory

By default, Netlify uses netlify/functions as the directory to find the functions to deploy them. In our case, our serverless function getPhotos can be found in the netlify/functions directory.

Now we'll set a custom functions directory so Netlify can find your compiled functions. Go to Site settings > Functions and enter the directory path where the functions are stored in your repository.

Functions directory section on Netlify

How to Set Environment Variables for Production

In the Netlify Dashboard, click on Site settings > Build & deploy > Environment > Environment variables and then configure KEY/VALUE pairs as follows:

PIXABAY_API_KEY=your-api-key-here

Environment variables section on Netlify

Click on Save, and then redeploy your app so the changes can be added.

To redeploy the app on Netlify, navigate to Deploys > Trigger deploy. Next, select Clear cache and redeploy site.

Trigger redeployment tab on Netlify

Note: The environment variable (PIXABAY_API_KEY) name should match the one mentioned in the getPhotos codebase.

For a React application, prepend the API environment variable with the prefix REACT_APP so they can be read from the .env file.

 REACT_APP_PIXABAY_API_KEY=your-api-key-here

How to Initialize the Serverless Function to the Remote App

To connect your project directory to the existing web app deployed on Netlify, login to your Netlify account from the terminal:

netlify login

Next, initialize the app on Netlify by running the command in your terminal:

netlify init

Your app is now configured for continuous deployment via Netlify.

How to Build the Netlify Serverless Function

You need to link your app to site ID on Netlify before running the build command on your terminal. To connect your local project folder to its site ID on Netlify, enter the command in your terminal:

netlify link

This will prompt you to link the folder to a site through any of the following options:

• Search by full or partial site name

• Choose from a list of your recently updated sites

• Enter a site ID

Once you select your preferred option, it will connect the project folder to the hosted site on Netlify. This allows you run Netlify CLI commands and also automatically deploy the project repository once there are any changes in the codebase.

In the next step, you will build a serverless function while it is running on the server. To activate the build command defined in netlify.toml file, run the following command:

netlify build

This runs the npm run-script command under the hood as specified in the package.json. Now, your serverless function in netlify/functions directory is packaged and bundled successfully!

How to Test the Application

To test and confirm that the Netlify function is working fine, run this command on your terminal:

netlify functions:serve

This injects your project environment variables from the .env file and runs the serverless function.

How to Confirm API Keys Security

To inspect your app and confirm that the API keys are hidden from the public, follow the steps below:

Click on your hosted app URL, and navigate to Developer tools by pressing the F12 key or right-clicking and selecting Inspect. Navigate to Network tab, where you should see the fetched data from the Pixabay API.

API key hidden from the public and unauthorized parties after inspection through the Developer tools

Now you've confirmed that you've successfully configured a serverless function and have it deployed on Netlify.

Conclusion

This tutorial introduced serverless functions, asynchronous JavaScript, and Restful API concepts.

Hopefully you now know how to create a serverless/lambda function and secure any sensitive value such as API keys in your frontend JavaScript application.

If you got stuck with anything, you can access the complete source code in this GitHub repository.

Thank you for reading! If you have any questions, feel free to reach out to me via Twitter.

Relevant Links

• Netlify Functions

• Netlify Intro to Serverless Functions

• Netlify Functions Example

In this article, you will learn how to deploy a React application that uses react-router without any problems.

The Problem with Deploying react-router Apps

To make sure your users are happy, you'll typically prioritize user experience when building an application. Good user experience ensures that your website or application is easy to understand, easy to use, and easy to navigate.

If you have published a React app to Netlify that uses React router before now, you will likely notice that while navigating through your routes, you get an error (page not found) when you refresh your browser. This creates a bad user experience.

Through this article, you will learn how to deploy a React app through the Netlify CLI and how to resolve the problem with deploying a react-router app.

What is Netlify?

According to their docs, "Netlify is an all-in-one platform for automating modern web projects."

Netlify helps web developers build and deploy their applications instantly. This handy tool replaces your hosting infrastructure and helps facilitate your continuous integration and deployment pipeline with one workflow. It can really help increase your productivity.

The Netlify CLI (Command Line Interface) helps you easily build, test, and deploy applications straight from your command line.

It lets you:

1. start a project in seconds
2. configure continuous deployment
3. run a local development server that you can share with other developers
4. deploy your projects globally

You can sign up for a Netlify account with your email or your Git account.
If you don't have a Git account, you can create a GitHub, GitLab, or bitbucket account in no time.

So, let’s see how you can deploy your react-router app using the Netlify CLI.

How to Deploy Your App Through the Netlify CLI

To start using Netlify’s CLI, you must have Node.js installed on your computer. You can visit here to install Node.js.

Then you can get started by installing the Netlify CLI using this command:

npm install netlify-cli -g

Now that you have installed Netlify’s CLI, you can deploy your application to Netlify. Before that, you might want to get your build folder (I'll explain why below).

To get your build folder, type the following command:

yarn run build
//or
npm run build

If you have not logged in to your Netlify account before now, you might see a pop-up window asking for permission to access Netlify.

After getting access to the Netlify CLI, you will get a prompt asking what you would like to do. Select the option to create and configure a new site. You can use your arrow keys to navigate between options.

You will get prompts to select a team and a site name for your app. You can either input your preferred name for your app or use the default name which you can change later.

You will get a prompt asking which directory to publish. Input build as your deploy folder and press enter to get your React app deployed. The build folder which was generated at the beginning 0f this tutorial will serve as the deploy path.

If you get a final response that states “If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag”, you are on the right track. You will be provided with the website draft URL to preview your app.

You can deploy to the main site by running the following command:

netlify deploy --prod

Awesome. You now have your website URL.

How to Fix the "Page Not Found" Error

page not found, netlify error

To avoid the page-not-found error whenever you are either trying to access your app or you're on other routes, you have to set up a redirect and rewrite rules for your react-router application.

The redirect rule will help your application avoid a 404 error. All requests will get redirected to the /index.html instead of giving a 404 error.

To configure your redirect rules, you have to create a file that does not have an extension named (_redirects) inside your public folder.

Include the following command in the _redirects file:

/*    /index.html  200

To view the changes in your app, you'll have to deploy it again with the following command:

netlify deploy

Conclusion

This article has explained how to deploy a react-router app using Netlify’s CLI and fix the page-not-found error while accessing your routes.

I hope you have found this article useful.

Keep building, and keep deploying!

Hi there! 👋 You're probably here because you are trying to deal with hosting two separate websites or repositories under one website using Netlify.

And maybe you've checked out the answers on the Netlify community page, but you are still confused.

The same confusion and headache led me to write this tutorial so you don't have to struggle as much as I did.

It's tricky but it works: the solution to this problem is the netlify.toml or _redirects file.

Let's jump in.

I am working on a project with some colleagues, and we split up the tasks so that I'm working on the documentation.

Technologies We'll Use Here

• Docusaurus for shipping beautiful documentation sites in no time.
• Next.js/React.js for our main website

Let's get started and see how we can host the documentation. We dan do this in two ways:

1. Using a subdomain, docs.mainsite.dev
2. Using the main domain mainsite.dev and hosting the docs as a subdirectory on mainsite.dev/docs.

Based on what I have seen being implemented by other projects in their documentation, I wanted to host it as a subfolder via Netlify too.

I figure it'd help our docs have that professional look.

If you will be hosting docusaurus as the subfolder too, you need to do some set up.

Step 1 – Update the Base URL

Change the baseUrl in your docusaurus.config.js file to "/docs/" with the following code:

  title: 'Your Docs Title',
  tagline: 'Your Docs Tagline',
  url: 'my-docs-site.netlify.app',
  baseUrl: "/docs/",
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: '/favicon.ico',

By changing your base URL to /docs/, it makes your website render exactly as https://mainsite.dev/docs/, which is the docs path.

If you were to set the baseUrl to "/" there will be error. This also means we don't have to deal with proxying our docs site.

Step 2 – Update the routeBasePath

You'll also need to make sure that the documentation contents are served from your root domain by changing the routeBasePath to '/'.

Just like you see in the snippet below:

  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          routeBasePath: '/',
        },
      }),
    ],
  ],

This will help you activate the docs only mode on docusaurus. This way, your docs will be served from your root domain but with the path '/docs/' being the base path.

After that, your can run npx docusaurus start on your localhost to see if your docs site will build and render well without issues.

If you have no issues, then you should see something like this:

Your docusaurus site should render like this on path '/docs/' being the base path.

To read more about the config for docusaurus docs only mode, you can read this.

Step 3 – Deploy to Netlify

Now it's time to deploy to your docs site to Netlify. If you don't already know how to do that, you can refer to this guide.

Once you are done deploying, your Netlify website URL should be available already like this: // my-docs-site.netlify.app.

Step 4 – Proxying

Here comes the part where you will be doing the proxying.

You have already hosted your main website on Netlify and your docs site has been deployed to Netlify too.

Now you need to create a netlify.toml file in the root of your project/repository of your main website, and add the following lines to it:

[[redirects]]
from = "/docs/*"
to = "https://my-docs-site.netlify.app/:splat"
status = 200
force = false

The above rule makes sure that, whenever the /docs/ path is queried on your main site, your docs site loads up normally on your main-website.netlify.app/docs/ path.

Alternatively you can do this proxying via your docs site/repository. Just create a netlify.toml file in the root of your docs site/repository, and add the following lines to it:

[[redirects]]
from = "/*"
to = "https://main-website.netlify.app/docs/:splat"
status = 301
force = true

The above rule makes sure that whenever the /* path is queried on your docs site, it will load up normally on your main-website.netlify.app/docs/ path.

You will also notice that your docs site on the Netlify site is broken – but it works perfectly on your main site.

Since it works and we have achieved our goals, then let it be 😁.

Broken docusaurus site for subfolder documentation

NOTE: Never add the rules to your docs site and your main site at the same time, as this will cause a conflict of "TOO MANY REDIRECTS" errors.

So you either add the rules to your docs site or your main site, but not both.

Let's Answer Some Questions

Q: Why would I choose to use the netlify.toml file, and not the _redirects file?

Yeah, I first went for the easy option and tried the redirects file too. But it wasn't that easy because you will have to always copy the __redirects file into your build/ or public/ folder while building your Netlify site.

This requires you to edit your Netlify build settings to something like this:

npm run build && cp _redirects public/

You can also achieve the proxying using the _redirects file. The rules will be in the following format for main-site:

/docs/* https://my-docs-site.netlify.app/:splat 200

and in this format for your docs site:

/* https://main-website.netlify.app/docs/:splat 301!

Q: Why would I choose to use Netlify URLs in all the proxying rules instead of our custom domain URL?

Well, the Netlify community advises that you use the Netlify URLs, since it is a more reliable way to do the proxying.

Conclusion

Congratulations 🎉, glad you made it to the end of this guide.

I believe you've learnt something new today.

It's time to go implement and make your project documentation look professional too by having it hosted in the subfolder of your main site. 👏.

You can also share this article, so that others can see it.

Resources:

• Netlify Rules Playground
• [Support Guide] Can I deploy multiple repositories in a single site?

One of the first steps many young startups take is setting up a static web page, perhaps with an email newsletter, to help them build an audience.

As the weeks go by and the MVP is getting further along, the subject of how to handle payments will eventually emerge.

From one-time payments to SaaS subscriptions, supporting online payments can be daunting and time-consuming. This post will introduce you to an easy way to process online payments with Stripe, without any extra infrastructure other than a static web page.

You don't need a custom backend to store the payment information, or cron jobs to send invoices, and there's no need to track customers in a separate database. This is perfect if you are a single-founder or early-stage startup that wants to validate the idea without creating a custom solution.

Sounds good? Let's dive in! 🤿

High-level overview of the project

For the sake of this article, we'll define an early-stage startup use case, where this kind of serverless online payment setup will bring the most value (low cost and fast to implement).

Let's imagine our startup idea is to self-publish a book. As the book is being finalized, we would like to open the lifetime access to the book as a pre-sale.

We will need a way to process payments for lifetime access to the book. For this, we'll need a payment processor and perhaps a way to run some logic away from the client (for example, leveraging the payment processor's API).

Payment processor

There are plenty of payment processors available, each with different terms, support for payment methods, and public APIs. For our serverless online payment processor, we'll use Stripe. I chose to use Stripe for two reasons:

First, Stripe is an industry-leading payment processor with an excellent API. Their API is extensively documented, and they offer integration SDKs for many languages (JS included). Setting it up is entirely free, and you only pay a small commission per processed transaction.

Second, Stripe offers Stripe Checkout, a free product specifically built to boost conversions and support various payment options. It's dead-simple to integrate and comes with a great UI.

What about the server?

To be clear, Stripe requires some server-side code to generate a session once a user inputs their payment data. The session is available to the developer to perform payment-related operations (without exposing the sensitive payment details).

Before you get really upset with me, let me clarify that we won't need to set up a dedicated server 😅. It may seem a bit contradictory, but Stripe requires that some of the interaction code is in a server-like environment (serverless computing to the rescue!).

Luckily for us, this is 2021, and there are quite a few options to execute on-demand server-side code. Most cloud providers offer this functionality (AWS lambdas, Google Cloud cloud functions, Azure functions…you name it).

Since our startup already has a web page, we'll use Netlify functions. It will allow us to run the server-side code with almost no extra configuration, and it plays nicely with the existing web page statics.

The paradigm of combining static web assets with on-demand serverless functions is part of the JAM Stack (we'll leave that for another post). Keep reading for the detailed instruction on how to set up serverless payments.

High-level schema of the solution

Step-by-step project setup

Great, now that you have a clear picture of the problem space and the tools we'll use to build our solution, let's build it. 🛠

The complete code example is available at https://github.com/aperkaz/serverless-payments.

How to set up Netlify

First, create a Netlify account (if you don't have one already). The free tier is enough for moderate usage, so no need to worry about that.

Netlify provides CI/CD for automated deployments of our webpage and serverless functions by connecting to a Git repo in Github / Gitlab / Bitbucket. So, let's create a repo in one of those providers with your website assets.

Next, install the Netlify CLI. It will ask you some questions and request access to your Netlify and Git repo provider (GitHub in my case).

Installing the CLI with npm install netlify-cli -g

At this point, we can push to the repository’s main / master branch, and Netlify will automatically deploy. You can run netlify open in the console to open Netlify’s admin panel, and visit the deployed URL.

Excellent, with the auto-deploy ready, now let's set up Stripe. 💸

How to set up Stripe

Create an account in Stripe, validate the email, and sign in. Then, generate a set of API keys (Secret key and Publishable key).

You have to be careful with those keys and never commit the Secret key in the code. Since we will need it in our server-side code, we'll keep it as an environment variable.

# Create a new env variable in Netlify
netlify env:set STRIPE_SECRET "sk_****"

# We can access it on our server-side JS code by:
process.env.STRIPE_SECRET

For the sake of this tutorial, we will use the example API keys, but feel free to use your own. If you use your keys, you will need to add products and prices (documentation).

How to add the serverless functions

Hang on tight – we are almost there! We only need the server-side code to create Stripe Checkout sessions and complete our demo.

First, to make our function accessible from https://serverless-payments.netlify.app/api/stripe, we need to add some configurations. Let's start by creating the netlify.toml file, on the root of our repo.

[build]
  command = "# no build command"
  functions = "netlify/functions"
  publish = "."

[[redirects]]
  from = '/api/*'
  to = '/.netlify/functions/:splat'
  status = 200

Then, we can add the session creator function. It’s explained here.

// netlify/function/stripe.js

const stripe = require("stripe")(process.env.STRIPE_SECRET);

exports.handler = async (event, context) => {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ["card"],
    line_items: [
      {
        price_data: {
          currency: "usd",
          product_data: {
            name: "T-shirt",
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: "payment",
    success_url: "https://serverless-payments.netlify.app/success",
    cancel_url: "https://serverless-payments.netlify.app/cancel",
  });
  return {
    statusCode: 200,
    body: JSON.stringify({
      id: session.id,
    }),
  };
};

Now we can call the serverless functions from our JS body with fetch("/api/stripe"). It will scale depending on the load and you only paid for the invocations. Then it will be deployed on every push to main. Sweet! 🍬

For the sake of brevity, I skipped the remaining code in the HTML files that handles the Stripe Checkout callbacks. The code is available here.

The complete example is available at https://serverless-payments.netlify.app . You can test a successful payment flow by using 4242 4242 4242 4242 as a credit card number.

Stripe Checkout in all its glory, accessible from [our page](https://serverless-payments.netlify.app" rel="noreferrer nofollow noopener)

Conclusion

Online payments are critical to many online businesses but are often implemented in a rush or are over-engineered. The solution presented above applies to single-page applications, so you may not need a fully-fledged server for handling payments just yet. 🙂

I hope this article helps shed some light on adding payment processing to your existing web pages easily. Sell your product quickly and make customers happy!

You have finished creating your HTML website and you're feeling proud of your hard work. But there is one thing that is still missing: you have no idea how to publish your website.

In this tutorial, you will learn how to publish an HTML website using two popular platforms – Netlify and GitHub.

Before we start, make sure that you have a GitHub account because you will need to host your repository (your source code) on GitHub. Without it, you won't be able to publish your HTML website following this tutorial.

How to Publish a Website on Netlify

The first method we're going to explore is how to publish your website on Netlify.

Netlify is a platform for hosting websites. It is easy to host sites on Netlify as you don't need to configure it manually – and best of all, it's free. If you haven't signed up for an account, now is a good time to do so.

Here's the step-by-step process of publishing your website on Netlify:

Step 1: Add your new site

Once you've logged in, it will take you to a home dashboard. Click the New site from git button to add your new website to Netlify.

Step 2: Link to your GitHub

When you click the New site from git button, it will take you to the "Create a new site" page. Make sure that you push your repository on GitHub so that Netlify can link to your GitHub account.

Click the GitHub button as shown in the screenshot below:

Step 3: Authorize Netlify

Next, click the Authorize Netlify by Netlify button. This permission is needed so that both Netlify and GitHub can connect.

Step 4: Select your repository

Once you grant permission to Netlify, you can see a list of all your repositories. Select your website to publish. You can find it by either scrolling down the list or using the search bar to narrow down the list.

Step 5: Configure your settings

After selecting your website, you will be prompted to configure the settings for deploying the website. Since your website is simply a static one, there's not much to do here. Just click Deploy site to continue.

Step 6: Publish your website

Your website is now ready to publish! Netlify will do the rest of the work for you, and it will only take a minute or so to complete the process.

Now you are done! Your new website is published, and you can view it by clicking the green link.

Right now, your URL looks random, but you can edit it by clicking the Site settings button and then the Change site name button.

Congratulation on publishing your first new website! Now we'll learn how to publish a website with GitHub.

How to Publish a Website on GitHub

The second method we'll look at uses GitHub to publish your site. GitHub is a platform for storing, tracking, and managing project source code. It is also where you can publish your HTML website – and like Netlify, it is free to host here.

Here's the step-by-step process of publishing your website on GitHub:

Note: You can only publish your website on GitHub if you set the repository's visibility to public. If you want to deploy a website while it is private, upgrade your account to Pro or use Netlify to host there instead.

Step 1: Go to your website's repository

After you've logged in, go to the repository on the left sidebar and select the one you want to publish.

Step 2: Select the settings

In your repository, click the Settings link, and it will take you to the repository's settings page.

Step 3: Go to GitHub Pages

When you're in a repository's settings, scroll down a bit until you see the Pages link on the left sidebar. Click it, and it will lead you to GitHub Pages.

Step 4: Select the branch

In the source section, click the dropdown and select the master branch and save it. Depending on how you name it, it can be master or main.

Step 5: All done

And you are done! Your website will be published, and it will take only a minute or so to complete the process. Refresh the page, and you will see a link to your newly published website.

Conclusion

I hope you've found this tutorial helpful. You have learned how to publish your HTML website with Netlify and GitHub. Now you can go ahead and show the world of your incredible work.

If you're looking to learn more about modern web-development, I invite you to join my Full-Stack JavaScript Course or read more articles about JS, HTML and CSS at my programming blog.

Netlify provides rich features that help you easily deploy Single Page Applications built using frameworks like React, Vue and Angular among others. This takes away the burden of coding and maintaining server-side code.

In some cases, a front-end app needs to communicate with an external third-party API. Some of the third-party APIs require secret API keys to access.

Let's imagine a situation where you want to include weather alerts on your front-end app. As a result, you sign up for open weather map API's paid plan which requires a secret API key to access.

In such situations, you'll need to take care to ensure that you don't expose the secret API key on the front end.

Netlify provides functionality on its web user interface which you can use to hide API keys. But the API key can be accessed from the client side if the environment variable in which it is stored is accessed from the front-end code.

What You'll Learn in This Article

In this article, you are going to hide the secret API key on the Netlify UI and securely access it using Netlify functions in a React app created using create-react-app(CRA). Using Netlify functions makes sure that the API key is not exposed on the client-side.

The process should be similar for other frameworks, though we are using React in this article.

By the end of this article, you will be able to do the following:

• Add a Netlify function to a React app

• Use Netlify functions to securely access secret API keys

• Use the netlify-cli tool to test your Netlify functions

Prerequisites

Outlined below are some of the prerequisites for this article. It is worth pointing out that you can still follow along even if you don't check off every one.

You can Google if there is something you don't understand or post a question on the freeCodeCamp forum. We shall be happy to help.

• Have at least a basic understanding of JavaScript, the React framework, and a version control system like Git.

• Have Node installed on your machine. If you don't have it installed, you can download it for your system from the Node downloads page.

• Have Git installed on your machine. If you don't have it installed, you can do so from the Git downloads page.

• Have a text editor like VS code or Atom installed.

• Have a Netlify account. If you don't have one, you can sign up at no cost using your email address.

• Have a basic knowledge of Netlify's continuous deployment feature. You will use it to deploy your React app to Netlify from GitHub.

• Have a GitHub account because we'll be using Netlify's continuous deployment feature. If you don't have an account, you can sign up using your email address.

How to Use Environment Variables in a React App Created using create-react-app

In this section, you will learn how to use environment variables in a React app created using CRA. If you are already familiar with how to do this, then you can skip to the next section.

React apps created using CRA come configured so you can create custom environment variables in .env file and then access them in your codebase using process.env.

To use this feature, you can follow the steps below. These steps assume you have already created a React app using CRA.

Step 1 - Create a .env file at the root of the project directory

Start by creating a .env file at the root of the project directory. You can then add your environment variables in the .env file so that they look like the below.

REACT_APP_FIRST_SECRET=12345678
REACT_APP_SECOND_SECRET=123456789

In the above .env file, the environment variables are REACT_APP_FIRST_SECRET and REACT_APP_SECOND_SECRET. Their corresponding values are on the right-hand side. You need to take note of a few things when using environment variables with CRA:

• The environment variable should always start with REACT_APP and then be followed by the variable name for it to work. For example, you can name the variable containing your API key REACT_APP_API_KEY.

• There should be no spacing before and after the =.

Step 2 - Access the environment variable in your app using process.env

You can then access those environment variables in your React app using process.env.REACT_APP_FIRST_SECRET and proces.env.REACT_APP_SECOND_SECRET. These variables are added to your codebase at build time, so you should restart your development server if you are running the app on localhost for the changes to take effect.

Accessing the environment variable like that prevents you from pushing your secret API key to a remote Git hosting service like GitHub.

CRA adds the .gitignore file by default. You just need to add .env file to it so that Git will ignore your .env file when you commit your changes.

What you have just learned about environment variables will keep your secrets safe in development.

But what will happen if you do the same thing in production since the environment variables are added to your codebase at build time? The next section will answer that question.

Accessing environment variables from a React app created using creat-react-app exposes your API keys

Yes, indeed it does. Unfortunately, some absolute beginners think otherwise. That included me when I was just starting. But even the create-react-app documentation states that:

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files - create-react-app documentation

To illustrate this, I have built a simple demo app and deployed it to Netlify. This is a simple React app created using CRA. If you are interested, you can fork the project repository and deploy the app to Netlify under your account.

In this app, I am fetching a placeholder todo item from the JSON placeholder API and then displaying it to the user.

The JSON placeholder API does not need an API key to access. But for this illustration, I am using the base URL as the "secret" which I don't want to expose.

Most web-based APIs require passing the API key as a query parameter when authorizing users. While deploying the app, I have set the value of REACT_APP_TODO_BASE_URL to https://jsonplaceholder.typicode.com/todos on Netlify's web interface.

There are two ways you can access the value which I have hidden in the environment variable from the front-end:

1. By inspecting the app's codebase

2. By inspecting the Network tab in the Chrome DevTools

How to inspect the app's codebase

To inspect the app's codebase, follow the steps below:

1. Navigate to the deployed demo app.

2. Open the browser developer tools. You can open them by pressing the key combination CTRL + SHIFT + I on Chrome or right-clicking and then selecting the Inspect option in Chrome. Click the Sources tab. This is what it looks like for me in Chrome if the Sources tab is active. It might look different in other browsers though.

   

3. In the Sources tab, you should see top folder under the Page tab. Then navigate from the top folder to main.e54a1b49.chunk.js by following the path top/netlify-secrets-demo-app.netlify.app/static/js/main.e54a1b49.chunk.js. main.e54a1b49.chunk.js is a one-line minifed file that is not readable.

   

4. Click the{} symbol at the bottom left of the panel to pretty-print the code in a readable format.

5. The secret that we hid in the environment variable is right there in the codebase on line 37 as shown in the image below.

   

How to inspect the Newtwork tab in the Devtools

1. Navigate to the deployed demo app

2. Open the browser developer tool and then open the Network Tab. The network Tab should look like in the image below in chrome. It might look different in other browsers.

   

3. Click the Get another todo button in the browser. You should be able to see another row in the open panel indicating that another request has been made. Mine looks like in the image below.

   

4. Click the last row. Another panel will open showing the request and response headers. Again our "secret" has been exposed.

   

As you can see from the above, your API key may not be visible in the codebase that has been committed to GitHub but it is still accessible on the client-side. Now you know what would happen if your key is for a paid plan.

To keep your secret key secret, you need to access your environment variable using Netlify functions.

In the next section, you will learn how to securely access environment variables using Netlify functions. You will do that by adding Netlify functions to a React app and then deploying it to Netlify.

How to Securely Access Environment Variables with Netlify Functions

In this section, you will fork a simple React app which was created using CRA and then add a Netlify function to it. You will then use your function to access the environment variable instead of accessing it from your front-end code.

This will ensure that you don't expose your secret API key as illustrated in the section above. You will then deploy the app to Netlify using Netlify's continuous deployment feature.

What is a Netlify function?

This is a function that you can use for executing server-side code without having to deploy your own server.

According to the documentation, if you use Netlify functions, you are indirectly using AWS’s serverless Lambda functions which are used for running on-demand, server-side code without having to run a dedicated server.

Below are some of the reasons why you might need to use Netlify functions.

• Fetch live data from an API

• Return dynamic images

• Send automated emails

To start using Netlify functions, create a folder at the root of the project directory and name it netlify.

Inside the Netlify folder, you have to create another folder called functions. In the functions folder, you can create a file that contains a function that executes your code. As a result, the path to the files containing your functions should be netlify/functions.

This is the default location where Netlify will look for your functions. If you want to change the directory where your functions are located inside netlify folder, then you need to add that information to a netlify.toml configuration file at the root of the project directory so that Netlify knows where to look for them.

Using netlify.toml is outside the scope of this article. We shall be using the default configuration.

Below is what a Netlify function looks like. Let's assume that I have created a todo.js file in netlify/functions and added the code below to it.

const axios = require("axios");

exports.handler = async function (event, context) {
  //Securely access environment variables here
};

You will notice that the function has two parameters, event and context. If the function needs a dependency, make sure you add it to your project's package.json file.

In this case, I have added axios as a dependency. This function is executed whenever we hit the netlify/functions/todo endpoint.

There are other ways of triggering Netlify functions, but for this article let's focus on the simplest use case.

Data that have been passed from the front-end can be accessed in the event parameter. In the body of the function, you can do whatever you want including securely accessing your API key and sending data back to the front-end.

That is what you need to know to start using Netlify functions. If you want to dive deeper and explore what else you can do with them, take a look at the documentation.

Now that you understand the basics of Netlify functions, follow the steps below to learn how to implement them in a codebase.

You will fork this demo app and then add Netlify functions to it. It is a simple React project created using CRA.

Step 1 - How to fork the project under your own GitHub account

In this step, you are going to fork the demo app under your own GitHub account. It is necessary to fork the project under your account so that you will be able to deploy it to Netlify.

If you are not interested in forking the project but would like to implement Netlify functions to your project, then skip to step 6.

If you don't know how to fork a GitHub repository, you can follow the steps described in the how to fork a repo section of the GitHub documentation.

Step 2 - How to clone the project to your local machine

In this step, you are going to clone the project to your local machine by running the command below (assuming you forked the project under your accoun). Do not forget to replace GITHUB_USER_NAME with your GitHub username.

git clone git@github.com:GITHUB_USER_NAME/netlify-secrets-demo-app.git

or

git clone https://github.com/GITHUB_USER_NANE/netlify-secrets-demo-app.git

After successfully cloning the project to your machine, you should be able to see the netlify-secrets-demo-app folder containing your project in the directory where the project was cloned.

You can navigate to the project directory and open it in your favorite text editor.

In the next step, you will install dependencies.

Step 3 - How to install dependencies

In this step, you will install dependencies by running the command below on the terminal.

npm install

The above command will install the dependencies you need. The installation process might take a couple of minutes so you need to be patient.

In the next step, you will create a .env file and add environment variables to it.

Step 4 - How to create a .env file

In this step, you are going to create a .env file at the root of the project directory by running the command below on the terminal:

touch .env

You should be able to see the .env file created at the root of the project directory. Copy and paste the contents of the example.env file in it.

Since we'll be using Netlify functions to access environment variables, you don't need to prefix the variable name with REACT_APP as described at the beginning of the article. Change REACT_APP_TODO_BASE_URL environment variable to TODO_BASE_URL and set its value to https://jsonplaceholder.typicode.com/todos.

In the next step, you will add Netlify functions to your app.

Step 5 - How to add Netlify functions to your app

In this step, you will add a Netlify function to the app and use it to securely access your environment variables.

As I mentioned above, by default, Netlify will look for your functions inside the functions directory which must be located inside the netlify folder.

If you are keeping the functions in a different directory inside the netlify folder, then you need to provide additional information inside netlify.toml configuration file at the root of the project directory. This will make sure that Netlify knows where to locate your functions. But in this article, we'll be using the Netlify default configuration.

Create a folder at the root of the project directory and name it netlify. In the netlify folder create another folder and call it functions. In the functions folder, create todo.js file.

Copy and paste the code below in the todo.js file:

const axios = require("axios");

exports.handler = async function (event, context) {
  console.log(event);
  console.log(context);
  try {
    const { id } = event.queryStringParameters;
    const response = await axios.get(`${process.env.TODO_BASE_URL}/${id}`);
    return {
      statusCode: 200,
      body: JSON.stringify({ title: response.data.title }),
    };
  } catch (err) {
    return {
      statusCode: 404,
      body: err.toString(),
    };
  }
};

We'll send data from the front-end as the value of the id parameter in the query string. It is accessible in the queryStringParameters property of the event object.

You can also console.log the event and context parameters to see what their properties are.

We securely access the environment variable and use axios to fetch our todo. If it is successful, we send back a response object with a statusCode of 200 with the data in the body of the response object. If there is an error we return a statusCode of 404 and the error is sent back in the body of the response object.

The function you have added above will be exposed to your front-end code via /.netlify/functions/todo endpoint. It will be executed whenever you hit the /.netlify/functions/todo endpoint. Now let's execute the function from the front-end.

Navigate to the App.js component in the src folder. In the useEffect hook on line 15, instead of accessing process.env. on the front-end, we instead make a GET request to our endpoint exposed by the Netlify function we declared in the previous step.

So change line 15 from:

const url = `${process.env.REACT_APP_TODO_BASE_URL}/${todoId}`;

to:

const url = `/.netlify/functions/todo?id=${todoId}`;

Your App.js component should now look like this:

import { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [todoId, setTodoId] = useState(1);
  const [todo, setTodo] = useState("");
  const [loading, setLoading] = useState(false);

  function getNewTodo() {
    setTodoId((todoId) => (todoId === 20 ? 1 : todoId + 1));
  }

  useEffect(() => {
    async function fetchTodo() {
      const url = `/.netlify/functions/todo?id=${todoId}`;
      try {
        setLoading(true);
        const todo = await fetch(url).then((res) => res.json());
        setTodo(todo.title);
      } catch (err) {
        console.log(err);
      } finally {
        setLoading(false);
      }
    }
    fetchTodo();
  }, [todoId]);

  return (
    <div className="App">
      <p>
        <button onClick={getNewTodo}> Get another todo </button>
      </p>
      <p>{loading ? "Loading..." : todo}</p>
    </div>
  );
}

export default App;

In the code above we are storing todo and todoId in state. Notice that the GET request we are making to the /.netlify/functions/todo endpoint in the useEffect hook. We are passing the todoId as the value of the query parameter id.

After making the fetch request, our todo.js function will be invoked. Inside todo.js as explained above, we'll access the environment variable and fetch the todo which is returned by the function for the front-end code to use. This keeps our environment variable safe since it is not accessible from the front-end. The front-end only consumes what the function returns.

In the next step, you will test whether the function you have just defined works as intended.

Step 6 - How to test your Netlify function

In this step, you will use netlify-cli to test whether the function you defined works as intended.

Run the command below to install netlify-cli globally. The installation will take a bit of time, so be patient:

npm install netlify-cli -g

After netlify-cli is installed globally, run this command to test your function:

netlify dev

Running the above command successfully will start a local development server on port 8888. You will also see the event and context parameters printed on the console when your function is invoked.

You can also test the function by running the command below on another terminal. Make sure the server is running before running the command below otherwise you will get an error.

netlify functions:invoke --querystring "id=1"

This command will invoke the function with the specified query string. You will be prompted to make some selections on the terminal. Just press enter.

Successfully running the above command will fetch our todo which will then be printed on the terminal.

{"title":"delectus aut autem"}

In the next step, you will deploy the project on your local machine to GitHub.

Step 7 - How to commit your changes and push to GitHub

In this step, you will commit the changes on your local machine and push them to GitHub using the commands below.

git commit -m "Add netlify functions"
git push origin master

In the next step, you will use netlify's continuous ceployment feature to deploy the app from GitHub.

Step 8 - How to deploy the app to Netlify from GitHub

In this step, you will use Netlify's continuous deployment feature to deploy from GitHub.

This step requires you to have a Netlify account. If you haven't signed up, you can do so from the signup page at no cost.

Log in to your Netlify account and follow the process for linking a GitHub repository to Netlify for continuous deployment as described in the documentation. Do not forget to add the environment variable TODO_BASE_URL and set its value to https://jsonplaceholder.typicode.com/todos under the advanced settings as you deploy the app to Netlify.

And there you have it! That is how you hide secret API keys using Netlify functions. I hope you enjoyed reading the article.

Conclusion

In this article we learned how to:

• Add a Netlify function to a React app

• Use Netlify functions to securely access secret API keys

• Use the netlify-cli tool to test your Netlify functions

With netlify's serverless functions, you can send emails, fetch data from an API like we just did, and much more. It has equipped front-end developers with the tools to write back-end code without worrying about server maintenance.

You can explore more about what else you can do with Netlify functions in the functions section of the documentation.

Finally, if you have any questions about what we've covered in this article, feel free to ask on the freeCodeCamp forum or DM me on Twitter. You can also ask your question in the Netlify forum.

Thanks for reading!

Every React developer or web developer in general needs to be able to show off what they can do to any potential client or employer.

That's exactly what we're going to be building right now, with the help of a number of industry standard tools, including React, Tailwind CSS, and Netlify.

Let's get started!

What Will the Portfolio Look Like?

This is the final version of the portfolio you will be building.

It will feature information about yourself, what projects you have made, what skills you've used in making those projects, and will include a contact form for clients or employers to reach out to you.

What Tools Will We Be Using?

• We will use React to create the app's user interface. It will allow us to compose each part of our landing page through reusable components and extend our app if we want to add additional features, such as a blog.
• To style our application, we will use Tailwind CSS. To give our app a professional appearance, Tailwind will allow us to easily apply multiple styles through combining classnames on our React elements.
• For pushing our app to the web, we will use the free service Netlify. It will serve our project on a custom domain to users very quickly with the help of a CDN (content delivery network).

How to Get Started

You can download the starting files for our project here.

When you grab the code, all you will have to do is drag your (unzipped) project folder into your code editor and run the command:

npm install

And you're good to go!

What Tools Do I Need to Build my Portfolio?

To go through the entire process of creating our app from start to deployment, you will need to have the following:

1. Node.js installed on your computer. You can download it at nodejs.org.
2. Git installed on your computer. You can download it at git-scm.com.
3. I would recommend using VS Code as your code editor. You can download it at code.visualstudio.com.
4. A free Netlify account at netlify.com.
5. A free GitHub account at github.com.

How to Build the Portfolio Structure

The benefit of using React is that we could expand our app to as many pages as we like, very simply, and add a lot of additional content.

However, since we're just working with one page, we can within our app component figure out the different components that we need very quickly. We will have a Navbar on top with all of the links to jump to different sections of our portfolio.

After that, we will include an about section, a section for our projects, testimonials, and finally our contact form.

This quick planning allows us to figure out what our components should be named and in what order. We can go ahead and add all of them to our App.js file (in src):

// src/App.js

import React from "react";

export default function App() {
  return (
    <main>
      <Navbar />
      <About />
      <Projects />
      <Skills />
      <Testimonials />
      <Contact />
    </main>
  );
}

How to Create our Components

Now that we have all these components listed out we need to go ahead and create them.

Within our source (src) folder, we're going to create a folder called components with all of the files that we need:

my-portfolio
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.js
    ├── data.js
    ├── index.css
    ├── index.js
    └── components
        ├── About.js
        ├── Contact.js
        ├── Navbar.js
        ├── Projects.js
        ├── Skills.js
        └── Testimonials.js

Then we will create the basic structure of each React component and export it from that file with export default:

// src/components/About.js

export default function About() {}

// repeat the same basic structure for all 6 components

And finally make sure to import it back in App.js:

// src/App.js

import React from "react";
import About from "./components/About";
import Contact from "./components/Contact";
import Navbar from "./components/Navbar";
import Projects from "./components/Projects";
import Skills from "./components/Skills";
import Testimonials from "./components/Testimonials";

export default function App() {
  return (
    <main>
      <Navbar />
      <About />
      <Projects />
      <Skills />
      <Testimonials />
      <Contact />
    </main>
  );
}

Note that there should be six components in total.

Intro to Tailwind CSS

Once that's done, we can start working with Tailwind CSS, in order to start to give our app a basic appearance.

The benefit of using Tailwind CSS is that we don't have to write any styles manually in a CSS stylesheet. All we have to do is combine multiple classes to create the appearance that we want.

For example, to give our portfolio a dark background with gray text applied to all of our child components, you can add the following classes to our main element:

// src/App.js

import React from "react";
import About from "./components/About";
import Contact from "./components/Contact";
import Navbar from "./components/Navbar";
import Projects from "./components/Projects";
import Skills from "./components/Skills";
import Testimonials from "./components/Testimonials";

export default function App() {
  return (
    <main className="text-gray-400 bg-gray-900 body-font">
      <Navbar />
      <About />
      <Projects />
      <Skills />
      <Testimonials />
      <Contact />
    </main>
  );
}

How to Build the About Component

Let's start on our first section, the about section. This will consist of a basic introduction to ourselves and what skills we specialize in.

It's also going to include some links to the contact form as well as our past projects. Since these links will be to different parts of the same page, we can use the hashes: "/#projects" and "/#contact".

To make these links work and to be able to jump to each section, we will set the id attribute of the projects section to "projects" and those of the contact section to "contact".

// src/components/About.js

import React from "react";

export default function About() {
  return (
    <section id="about">
      <div className="container mx-auto flex px-10 py-20 md:flex-row flex-col items-center">
        <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
          <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
            Hi, I'm Reed.
            <br className="hidden lg:inline-block" />I love to build amazing
            apps.
          </h1>
          <p className="mb-8 leading-relaxed">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui
            laborum quasi, incidunt dolore iste nostrum cupiditate voluptas?
            Laborum, voluptas natus?
          </p>
          <div className="flex justify-center">
            <a
              href="#contact"
              className="inline-flex text-white bg-green-500 border-0 py-2 px-6 focus:outline-none hover:bg-green-600 rounded text-lg">
              Work With Me
            </a>
            <a
              href="#projects"
              className="ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg">
              See My Past Work
            </a>
          </div>
        </div>
        <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
          <img
            className="object-cover object-center rounded"
            alt="hero"
            src="./coding.svg"
          />
        </div>
      </div>
    </section>
  );
}

For the image on the righthand side of the section, I am using an svg file from the public folder, coding.svg.

This image serves merely as a temporary placeholder. I would highly recommend using an actual image of yourself.

How to Build the Projects Component

Our projects section will consist of a section element with an id of "projects". This will feature a gallery of all the projects that we've built, which will include images.

It'll have the title of the project, along with the technologies we use to make it, and a link to it (if it is deployed).

// src/components/Projects.js

import { CodeIcon } from "@heroicons/react/solid";
import React from "react";
import { projects } from "../data";

export default function Projects() {
  return (
    <section id="projects" className="text-gray-400 bg-gray-900 body-font">
      <div className="container px-5 py-10 mx-auto text-center lg:px-40">
        <div className="flex flex-col w-full mb-20">
          <CodeIcon className="mx-auto inline-block w-10 mb-4" />
          <h1 className="sm:text-4xl text-3xl font-medium title-font mb-4 text-white">
            Apps I've Built
          </h1>
          <p className="lg:w-2/3 mx-auto leading-relaxed text-base">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo
            facilis repellat ab cupiditate alias vero aliquid obcaecati quisquam
            fuga dolore.
          </p>
        </div>
        <div className="flex flex-wrap -m-4">
          {projects.map((project) => (
            <a
              href={project.link}
              key={project.image}
              className="sm:w-1/2 w-100 p-4">
              <div className="flex relative">
                <img
                  alt="gallery"
                  className="absolute inset-0 w-full h-full object-cover object-center"
                  src={project.image}
                />
                <div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
                  <h2 className="tracking-widest text-sm title-font font-medium text-green-400 mb-1">
                    {project.subtitle}
                  </h2>
                  <h1 className="title-font text-lg font-medium text-white mb-3">
                    {project.title}
                  </h1>
                  <p className="leading-relaxed">{project.description}</p>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

Note that we are also going to use the library @heroicons/react in order to be able to write some SVG icons as React components.

We are importing an array of projects from a data.js file in the same folder. There we are exporting an array of objects which each include an individual project's data:

// src/data.js

export const projects = [
  {
    title: "React Reserve",
    subtitle: "MERN Stack",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-1.gif",
    link: "https://reactbootcamp.com",
  },
  {
    title: "React Tracks",
    subtitle: "React and Python",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-2.gif",
    link: "https://reedbarger.com",
  },
  {
    title: "DevChat",
    subtitle: "React and Firebase",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-3.gif",
    link: "https://jsbootcamp.com",
  },
  {
    title: "Epic Todo App",
    subtitle: "React Hooks",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-4.gif",
    link: "https://pythonbootcamp.com",
  },
];

How to Build the Skills Component

Let's fill out the section for all the skills and technologies that we know.

This will consist of a simple list of all of the major tools that we're familiar with and can use in our employers or clients projects.

Once again, we are going to import an array from our data folder. But this array consists of number of strings which represent each of the skills that we know such as JavaScript, React, and Node:

// src/components/Skills.js

import { BadgeCheckIcon, ChipIcon } from "@heroicons/react/solid";
import React from "react";
import { skills } from "../data";

export default function Skills() {
  return (
    <section id="skills">
      <div className="container px-5 py-10 mx-auto">
        <div className="text-center mb-20">
          <ChipIcon className="w-10 inline-block mb-4" />
          <h1 className="sm:text-4xl text-3xl font-medium title-font text-white mb-4">
            Skills &amp; Technologies
          </h1>
          <p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi sit
            ipsa delectus eum quo voluptas aspernatur accusantium distinctio
            possimus est.
          </p>
        </div>
        <div className="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
          {skills.map((skill) => (
            <div key={skill} className="p-2 sm:w-1/2 w-full">
              <div className="bg-gray-800 rounded flex p-4 h-full items-center">
                <BadgeCheckIcon className="text-green-400 w-6 h-6 flex-shrink-0 mr-4" />
                <span className="title-font font-medium text-white">
                  {skill}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

How to Build the Testimonials Component

In the Testimonials component, we are going to list a couple of testimonials maybe from past clients or people who are familiar with our work.

These are going to consist of a couple of cards that feature the testimonial itself as well as who it's from and the company that this person is from.

We are also importing a testimonials array with a number of objects that feature the quote, image, name, and company.

// src/components/Testimonials

import React from "react";
import { TerminalIcon, UsersIcon } from "@heroicons/react/solid";
import { testimonials } from "../data";

export default function Testimonials() {
  return (
    <section id="testimonials">
      <div className="container px-5 py-10 mx-auto text-center">
        <UsersIcon className="w-10 inline-block mb-4" />
        <h1 className="sm:text-4xl text-3xl font-medium title-font text-white mb-12">
          Client Testimonials
        </h1>
        <div className="flex flex-wrap m-4">
          {testimonials.map((testimonial) => (
            <div className="p-4 md:w-1/2 w-full">
              <div className="h-full bg-gray-800 bg-opacity-40 p-8 rounded">
                <TerminalIcon className="block w-8 text-gray-500 mb-4" />
                <p className="leading-relaxed mb-6">{testimonial.quote}</p>
                <div className="inline-flex items-center">
                  <img
                    alt="testimonial"
                    src={testimonial.image}
                    className="w-12 rounded-full flex-shrink-0 object-cover object-center"
                  />
                  <span className="flex-grow flex flex-col pl-4">
                    <span className="title-font font-medium text-white">
                      {testimonial.name}
                    </span>
                    <span className="text-gray-500 text-sm uppercase">
                      {testimonial.company}
                    </span>
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

How to Build the Contact Component

At the end of our landing page, we're going to include our contact form to allow potential employers to reach out to us.

This form will have 3 inputs: a name, email, and message input.

To receive these form submissions, we will use the tool Netlify Forms to very easily take care of saving those messages.

// src/components/Contact.js

import React from "react";

export default function Contact() {
  return (
    <section id="contact" className="relative">
      <div className="container px-5 py-10 mx-auto flex sm:flex-nowrap flex-wrap">
        <div className="lg:w-2/3 md:w-1/2 bg-gray-900 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
          <iframe
            width="100%"
            height="100%"
            title="map"
            className="absolute inset-0"
            frameBorder={0}
            marginHeight={0}
            marginWidth={0}
            style={{ filter: "opacity(0.7)" }}
            src="https://www.google.com/maps/embed/v1/place?q=97+warren+st+new+york+city&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
          />
          <div className="bg-gray-900 relative flex flex-wrap py-6 rounded shadow-md">
            <div className="lg:w-1/2 px-6">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                ADDRESS
              </h2>
              <p className="mt-1">
                97 Warren St. <br />
                New York, NY 10007
              </p>
            </div>
            <div className="lg:w-1/2 px-6 mt-4 lg:mt-0">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                EMAIL
              </h2>
              <a className="text-indigo-400 leading-relaxed">
                reedbarger@email.com
              </a>
              <h2 className="title-font font-semibold text-white tracking-widest text-xs mt-4">
                PHONE
              </h2>
              <p className="leading-relaxed">123-456-7890</p>
            </div>
          </div>
        </div>
        <form
          netlify
          name="contact"
          className="lg:w-1/3 md:w-1/2 flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
          <h2 className="text-white sm:text-4xl text-3xl mb-1 font-medium title-font">
            Hire Me
          </h2>
          <p className="leading-relaxed mb-5">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum
            suscipit officia aspernatur veritatis. Asperiores, aliquid?
          </p>
          <div className="relative mb-4">
            <label htmlFor="name" className="leading-7 text-sm text-gray-400">
              Name
            </label>
            <input
              type="text"
              id="name"
              name="name"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
            />
          </div>
          <div className="relative mb-4">
            <label htmlFor="email" className="leading-7 text-sm text-gray-400">
              Email
            </label>
            <input
              type="email"
              id="email"
              name="email"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
            />
          </div>
          <div className="relative mb-4">
            <label
              htmlFor="message"
              className="leading-7 text-sm text-gray-400">
              Message
            </label>
            <textarea
              id="message"
              name="message"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
            />
          </div>
          <button
            type="submit"
            className="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
            Submit
          </button>
        </form>
      </div>
    </section>
  );
}

How to Embed a Google Maps Location

To the left of the form we will include a Google Maps embedded Google map of where we are located.

We can do so with the help of an online tool: embed-map.com. All you have to do is just enter your location and hit "Generate HTML code".

In the code we are given, don't copy all of the code, just the src attribute from the iframe element. We will replace that value with the default src value we have for our iframe.

To send over any submitted form data to Netlify, Netlify Forms needs to recognize a form as static HTML. Because our React app is controlled by JavaScript and doesn't consist of plain HTML, we need to add a hidden form to our index.html file in the public folder.

<!-- public/index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- head content skipped -->
  </head>
  <body>

  <form name="contact" netlify netlify-honeypot="bot-field" hidden>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <textarea name="message"></textarea>
  </form>

    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

We need to hide this form, because it doesn't need to be seen by the user, just Netlify.

We'll give it the attribute of hidden as well as a name attribute that matches the JSX form in Contact.js. We also need to give it the netlify attribute so that Netlify Forms recognizes it. Finally, we need to include all of the same inputs as our JSX form: for name, email, message.

How to Submit the Contact Form

Once that's done, we'll head back to Contact.js. We're going to use JavaScript in order to submit this form.

First of all, we're going to create some dedicated state for each of the values that are typed in the form for name, email, and message:

const [name, setName] = React.useState("");
const [email, setEmail] = React.useState("");
const [message, setMessage] = React.useState("");

We will store what the user types in to each of the inputs in state with the help of the onChange handler.

To handle submission of the form, we will add the onSubmit prop to it. The function that will be called, handleSubmit, will make a post request to the endpoint "/" with all of our form data.

We will set the headers of the request to indicate that we are sending over form data. For the request body, we will include the form name as well as all of the form data from the name, email, and message state variables.

// src/components/Contact.js

import React from "react";

export default function Contact() {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [message, setMessage] = React.useState("");

  function encode(data) {
    return Object.keys(data)
      .map(
        (key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key])
      )
      .join("&");
  }

  function handleSubmit(e) {
    e.preventDefault();
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "contact", name, email, message }),
    })
      .then(() => alert("Message sent!"))
      .catch((error) => alert(error));
  }

  return (
    <section id="contact" className="relative">
      <div className="container px-5 py-10 mx-auto flex sm:flex-nowrap flex-wrap">
        <div className="lg:w-2/3 md:w-1/2 bg-gray-900 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
          <iframe
            width="100%"
            height="100%"
            title="map"
            className="absolute inset-0"
            frameBorder={0}
            marginHeight={0}
            marginWidth={0}
            style={{ filter: "opacity(0.7)" }}
            src="https://www.google.com/maps/embed/v1/place?q=97+warren+st+new+york+city&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
          />
          <div className="bg-gray-900 relative flex flex-wrap py-6 rounded shadow-md">
            <div className="lg:w-1/2 px-6">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                ADDRESS
              </h2>
              <p className="mt-1">
                97 Warren St. <br />
                New York, NY 10007
              </p>
            </div>
            <div className="lg:w-1/2 px-6 mt-4 lg:mt-0">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                EMAIL
              </h2>
              <a className="text-indigo-400 leading-relaxed">
                reedbarger@email.com
              </a>
              <h2 className="title-font font-semibold text-white tracking-widest text-xs mt-4">
                PHONE
              </h2>
              <p className="leading-relaxed">123-456-7890</p>
            </div>
          </div>
        </div>
        <form
          netlify
          name="contact"
          onSubmit={handleSubmit}
          className="lg:w-1/3 md:w-1/2 flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
          <h2 className="text-white sm:text-4xl text-3xl mb-1 font-medium title-font">
            Hire Me
          </h2>
          <p className="leading-relaxed mb-5">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum
            suscipit officia aspernatur veritatis. Asperiores, aliquid?
          </p>
          <div className="relative mb-4">
            <label htmlFor="name" className="leading-7 text-sm text-gray-400">
              Name
            </label>
            <input
              type="text"
              id="name"
              name="name"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
              onChange={(e) => setName(e.target.value)}
            />
          </div>
          <div className="relative mb-4">
            <label htmlFor="email" className="leading-7 text-sm text-gray-400">
              Email
            </label>
            <input
              type="email"
              id="email"
              name="email"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>
          <div className="relative mb-4">
            <label
              htmlFor="message"
              className="leading-7 text-sm text-gray-400">
              Message
            </label>
            <textarea
              id="message"
              name="message"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
              onChange={(e) => setMessage(e.target.value)}
            />
          </div>
          <button
            type="submit"
            className="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
            Submit
          </button>
        </form>
      </div>
    </section>
  );
}

As you can see above, we are encoding the form data with a special encode function that you see here.

If the message is sent correctly, we will display an alert that says "Message sent". Otherwise if there is an error, we are going to alert the user of that error.

How to Build the Navbar Component

The last step is to build out our Navbar component.

We want this navbar to stick to the top of our app on large devices and not be sticky on mobile devices.

Additionally, we want to include links to each of our relevant sections for our project skills testimonials and our contact form:

// src/components/Navbar.js

import { ArrowRightIcon } from "@heroicons/react/solid";
import React from "react";

export default function Navbar() {
  return (
    <header className="bg-gray-800 md:sticky top-0 z-10">
      <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
        <a className="title-font font-medium text-white mb-4 md:mb-0">
          <a href="#about" className="ml-3 text-xl">
            Reed Barger
          </a>
        </a>
        <nav className="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-700    flex flex-wrap items-center text-base justify-center">
          <a href="#projects" className="mr-5 hover:text-white">
            Past Work
          </a>
          <a href="#skills" className="mr-5 hover:text-white">
            Skills
          </a>
          <a href="#testimonials" className="mr-5 hover:text-white">
            Testimonials
          </a>
        </nav>
        <a
          href="#contact"
          className="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">
          Hire Me
          <ArrowRightIcon className="w-4 h-4 ml-1" />
        </a>
      </div>
    </header>
  );
}

How does this stick to top of the page on a larger device? With the help of the class md:sticky on our header element.

This class means that it will have the style rule position: sticky; applied starting on a medium-sized breakpoint (768px).

How to Deploy Your Portfolio

Now to make our portfolio live, we need to push our application to GitHub.

If you're not familiar with Git and GitHub, I would take a little while just to learn how to push your code to your GitHub account for the first time. It's an essential skill for any developer to know.

Once you're familiar with this process, we can first create a new Github repository. After that, we will run git add ., git commit -m "Deploy", create our git remote, and git push -u origin master.

Once our project is on GitHub, we can head over to Netlify and select the option "Choose Site from Git". Then we will choose GitHub for our continuous deployment, and pick the GitHub repository to which we just pushed our code.

After that, our project will be automatically deployed to the web!

What's Next

Congratulations! You now have a portfolio app live on the web that shows off all of your projects and skills to potential employers.

The next step to take would be to set up a custom domain, preferably with your name (i.e. reedbarger.com). Since Netlify includes a DNS you can easily set up a custom domain with them.

Look into maybe adding a blog to your React app to show off even more of your developer knowledge to potential employers.

Make your personal portfolio an expression of yourself and what you are passionate about as a developer and you'll have success!

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

In this free book, we will build two simple projects and deploy them on Netlify. We will use Vue.js as our front-end framework, and use different technologies to build our projects.

If you follow this tutorial to the end, you will build a simplified version of Twitter and a single page application for a portfolio using the GitHub API.

What you need to know to follow this tutorial

To follow along, you will need at least some basic knowledge of HTML, CSS, and JavaScript.

Knowledge of Vue.js isn't required, as you will learn the basics first and then we'll move into building the projects together.

At the end of each section, you'll find that information in video form via a YouTube link/embed. That way you can watch the videos to cement your knowledge of what you just read.

Table of Contents

• Introduction
• How to Install Vue
• How to Create a Vue Instance
• How to Work with Templates in Vue
• Vue Directives
• Methods
• Conditionals
• Loops
• How to handle user inputs with events Handling
• Two way model binding (v-model)
• Computed Properties and methods
• Project: Simple Twitter Clone
• Component basics
• Project Update: Simple Twitter clone with components
• Axios and RestAPI
• Routing with VueRouter
• Final Project: build a Portfolio with VueJS, VueRouter, Axios, GitHub API
• Deploy Continuous deployment with BitBucket and Netlify

Introduction

VueJS is a JavaScript framework that has become really popular in recent years.

In this guide, we will start by looking at the fundamentals first, with a quick look at two libraries: VueRouter and Axios. We will use them to build a cool portfolio project at the end.

Click to view the video on YouTube.

How to Install Vue

You can use Vue in your projects by installing it using a package manager like NPM or by using its CDN. If you've never used Vuejs before, I suggest that you use the CDN, as it will be easier if you want to code along with me.

Click to view the Repository

Click to view the YouTube-Video or find it at the end of this section to reinforce what you've learned.

The Vue CDN

For the CDN, we only need to include the script tag below inside our HTML file:

<!-- Development version for prototyping and learning -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

Alternatively, you can use a production-ready script that uses a specific stable release, like this:

<!-- Production version -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

In production, Vue suggests using the optimized version to replace vue.js with vue.min.js.

There is also an ES Modules-compatible build:

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'
</script>

How to Install Vue via NPM

If you plan to build large scale applications, I recommend installing via NPM like this:

npm install vue

As I said above, we will use the Vue CDN so that anyone can follow this guide. So our final HTML file will look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VueJS Tutorial</title>

    <!-- vue development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>



    <script src="./main.js"></script>
</body>
</html>

Let's break this code down. First, we've add a basic markup for an HTML file. Then we've included the script tag for the VueJs framework.

In the end, before closing the body tag, we've added our main.js script where we placed all the JavaScript code for our application.

Let's now move to the next step and add our first Vue instance inside the main.js file.

How to Create a Vue Instance

Once you've installed Vue or included it via its CDN, you can create a Vue instance. You can do that using the new Vue() function. This function accepts an object of options.

If you read the documentation, you will see that the vue instance is often stored inside a variable called vm, but you can call it anything you like. I'll call it app during this guide.

So now, inside the main.js file you need to create a variable and store in it the Vue instance like so:

let app = new Vue({
    // all options goes here
})

The object you pass to the Vue instance is called the options object. Inside the options object, you can add all the options described in the Vue API reference pages to build our application.

The options object has properties divided into multiple sections:

• Data
• DOM
• Life Cycle Hooks
• Assets
• Composition
• Misc categories

The first property that you need to build you Vue application is used to connect Vue with a root DOM element. Then you will need some data options to work with.

Let's start by connecting the Vue instance with a root DOM element.

You can click to view the Repository here.

And you can click to view the YouTube-Video or find it at the end of this section so you can review what you've learned.

Options/DOM: How to select the root DOM element

The Options/DOM API gives you an el property that you can use to select an existing DOM element that Vue will use to mount your application instance.

The el property accepts a string that contains a CSS selector for the element or directly a DOM element.

NOTE: Vue discourages using the body or HTML tags and suggests using a different element as a mounting point.

Let's do it. Inside the body of the index.html file, you need to put the following code:

    <div id="app">
    </div>

Now you have a root element that you can use to connect the Vue instance. Back inside the main.js file, let's select this element inside the options object.

You can now use the el property to select the element you created with an id of app.

let app = new Vue({
    // all options go here
    el: "#app",
})

You now have an element to work with. You can move on to the next step and add to the options object the data object.

You can read more about it in the documentation here:[https://vuejs.org/v2/api/#Options-DOM]

Options/Data: How to add the data object (or function when used in a component)

When a new instance is created, it adds all properties found in its data object to the Vue reactivity system. And when a value in the data object changes, the view will reflect these changes. This is at the base of the VueJS reactivity system.

To explain it, let's see a practical example.

Create a data object

Inside the main.js file you can create a data property that has an object as its value, like so:

let app = new Vue({
    // all options go here
    el: "#app",
    data: {}
})

The data object can be defined directly inside the Vue instance like in the code above, or outside the instance like in the code below.

let dataObject = {}
let app = new Vue({
    // all options go here
    el: "#app",
    data: dataObject
})

You can pick the one you like.

Add properties to the Data Object

Since VueJs is a JavaScript framework, it's helpful to remember that what you know about JavaScript is still valuable here.

Vue is just a JavaScript object that has a number of methods and properties that you can use to simplify and speed up your workflow.

Let's add some properties to the data object to see how it works.

// Create a data object
let app = new Vue({
    el:"#app",
    // create a vue instance, add the data property and the dataObject created
    data: {
        alert: "This is an alert message! ",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ];
    }
})

With the code above, you simply add two properties to the data object: an alert property and a projects property.

The alert property just a string while the projects property is an array of objects.

Now that you have some data to work with, let's see how you can access and modify their values.

Manipulate properties in the data object

You can access and manipulate the properties of a data object using the variable that contains the Vue instance app. Then you can reference the properties using dot notation, like app.alert.

In the browser, if you open the console you can see that when you write app you get the Vue instance object. So, like any other object with dot notation, you get its properties and methods.

Let's try this out inside the console:

// Access the alert property in the data object
app.alert // This is an alert message!
// update a data property value
app.alert = "This is a new alert message!" 
app.projects

The code above does three simple things:

• the first line accesses the alert property and prints its content "this is an alert message"
• the second line assigns a new value to the alert property with the equals operator
• finally, the third line returns the value of the projects array.

You can also access the entire data object using the shortcuts $data or _data

Back in the console:

// Access the entrie data object
app.$data // {__ob__: Observer} option 1
app._data // {__ob__: Observer} option 2

You can read more about this in the documentation here: [https://vuejs.org/v2/api/#Options-Data]

Options Data Methods

The Vue instance gives you access to a number of properties and methods. You can access default methods and properties using the $ sign. It is used to differentiate Vue defined methods from those defined by the user.

There are a number of instance methods and properties predefined and split into four different categories:

• Instance Properties
• Instance Methods / Data
• Instance Methods / Events
• Instance Methods/life cycle hooks

For instance, with the following code, you can get the data and options objects or access the watch or the on methods.

app.$data // returns the data object
app.$options // returns the options object
app.$watch() // function that watched for changes on the vue instance
app.$on() // listen for a custom event on the vue instance

I won't dive deeper into this since it's out of the scope of this guide. But if you are interested and want to learn more, here is the documentation.

Lifecycle Hooks

Vue gives you access to a series of functions called lifecycle hooks. They allow you to run code at specific stages of the Vue initialization steps.

Inside all lifecycle hooks you have access to their this variable that points to the Vue instance.

You will see how this works in more detail in future sections. But for now this is a short summary of the available hooks and what they let you do:

• beforeCreate (you can run code before the Vue instance is created)
• created (you can run code after the Vue instance is created )
• beforeMount (you can run code before your element is mounted to the DOM)
• mounted (you can run code when the element is mounted to the DOM)
• beforeUpdate (you can run code before values are updated in the DOM)
• updated (you can run code after values in the DOM have been updated)
• beforeDestroy (you can run code before an instance is destroyed)
• destroyed (you can run code when an instance is destroyed)

During the course, we will often use the mounted hook. If you are curious to learn more about this topic, I suggest you look at the diagram in the documentation first. Find the lifecycle Hooks diagram here.

How to Work with Templates in Vue

VueJS uses mustache syntax {{ }} to render data from the Vue instance inside the HTML element.

Using this syntax you can grab properties and methods defined in the Vue instance. The property is then parsed and rendered to the page.

You can click to view the Repository here.

And you can click to view the YouTube-Video here here, or find it at the end of this section to review what you've just learned.

Text Data binding

This is called text data binding. Let's see an example of how you can bind data between the Vue instance and your template file.

<div id="app">
    <h1>{{ title }}</h1>
</div>

The code above has an h1 tag inside the root element with an id of app we defined in the previous chapter.

Inside the h1 tag you use the double curly brackets syntax to render onto the page the value of a property in the data object called that you called title.

You don't have a title property yet inside your data object, so let's add it.

Inside the main.js file

let app = new Vue({
    el: "#app",
    data: {
        title: "John Doe portfolio",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ]
    }
})

Now, with the code above you can render the content of the property title inside the h1 tag in your template. The final result will be something like this:

<h1>John Doe portfolio</h1>

However, with this method, you can only pass a string. If you want to use HTML tags inside the string these will not be parsed but instead will be shown as simple strings.

For instance if you assign the following string to the title property

    title: "John Doe <span class='badge'>Portfolio</span>"

And then try to render it inside our HTML like so:

<h1 class="title">{{title}}</h1>

The property title will be rendered as a plain string including the HTML tags ie. John Doe <span class='badge'>Portfolio</span>

Of course you can parse HTML too.

How to parse raw HTML

To render a raw HTML element we need to introduce another important Vue concept called directives.

In this case, you will use the v-html directive inside your HTML tag as an attribute and pass to it the property title.

When you're using Vue directives, the text inside the quotes is considered a JavaScript expression. This means that it's computed and its result is rendered.

Let's create a separate property for the title with HTML tags inside so that you can see how both render onto the page.

let app = new Vue({
    el: "#app",
    data: {
        title: "John Doe Portfolio", 
        titleHTLM : "John Doe <span class='badge'>Portfolio</span>",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ]
    }
})

Now inside your HTML file, you will use this {{}} syntax to render the property title. But on the tag where you want to render raw HTML, with the titleHTML property, you use the v-html directive instead.

<div id="app">
    <div class="title">{{ title }}</div>
    <div v-html="titleHTML"></div>
</div>

Both elements will now render correctly including the second property that has HTML tags inside.

NOTE: Rendering HTML can expose XSS vulnerabilities. Never use this approach on user-provided content.

Now that you know how to render data onto the page, let's dig deeper into directives.

If you want to read more, visit the documentation here.

Vue Directives

Inside your HTML files, you can use directives to interact with HTML attributes. A directive applies effects to the DOM when its expression changes.

You can click to view the Repository here

And you can click to view the YouTube-Video here, or you can find it at the end of this section to review what you've learned.

The v-bind directive on HTML attributes

So far, you have used the {{}} syntax to render something between HTML opening and closing tags. But inside an HTML tag you cannot use the {{ }} syntax.

So how do you connect an HTML attribute to the Vue instance? You use the v-bind directive instead which lets you access data object properties as you have done before.

The v-bind directive is one of the directives that take arguments which are specified after the colon. In our case here, what's specified after the colon is the HTML attribute name like id, class, href, src and so on.

If you need to dynamically assign an attribute like href or even a class, you can bind it with the Vue instance using the v-bind directive. It will then be able to get what's in the options object, like properties in the data object.

Let's see v-bind in action and start connecting the id and class attributes so you can assign them values dynamically with Vue.

Inside our index.html file:

<div id="app">
    <div v-bind:class="dynamicClass" v-bind:id="dynamicId">Dinamically assign a class and an id to the div</div>
</div>

Let's break the code above and see what it's doing.

First, you have a div tag inside the root element. Then you use the v-bind directive on the class and the id attributes.

Inside the quotes, you specify two properties that later you'll define inside the data object of your Vue instance.

Remember that when using Vue directives the content between quotes is treated as a JavaScript expression.

Let's define these two properties inside the Vue instance.

let app = new Vue({
    el: "#app",
    data: {
        title: "John Doe Portfolio", 
        titleHTLM : "John Doe <span class='badge'>Portfolio</span>",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ],
        dynamicId : "projects_section",
        dynamicClass : "projects"
    }
})

So you have defined dinamicId: "projects_section" and dynmicClass: "projects" properties and assigned them two values.

Thanks to the data binding on the attributes, your HTML tag will be rendered as follows (and you can now dynamically change your attributes values and see them change reactively):

<div id="projects_section" class="projects">Dynamically assign a class and an id to the div</div>

V-bind with Boolean values

With attributes using a boolean value, the v-bind directive works differently. It will show the attribute only if the property's value is true. In all other cases, it won't render the attribute and its content.

For the next example, you will use a button with the disabled attribute.

Inside your root HTML element:

    <div id="app">
        <button v-bind:disabled="disabled">You can't click this button</button>
    </div>

Inside a Vue instance:

let app = new Vue({
    el: '#app',
    data: {
    //disabled: false, // wont render the attribute
    //disabled: null, // wont render the attribute
    //disabled: undefined, // wont render the attribute
    disabled: true // renders the attribute
}
})

Only if the disabled property is set to true does the attribute become visible and render its property content.

    <button disabled>You can't click this button</button>

This is something to keep in mind when working with such attributes.

Another thing to consider is that bindings can include a single JavaScript expression, with some restrictions:

• only expressions are allowed
• only a single expression
• no statements
• no flow control tools, but the ternary operator works.

If you want to read more, visit the documentation here:[https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions]

So far we have seen only two Vue directives, v-html and v-bind. But there are a number of directives available, and here are some more (to list just a few):

• v-html
• v-bind
• v-if
• v-else-if
• v-else
• v-for
• v-on All directives have a v- prefix, but there is shorthand for v-bind (:) and v-on (@).

They work in the same way. Here's a quick reference for the v-bind and v-on directives:

<!-- Long syntax -->
<a v-bind:href="url">Some link</a>
<!-- Shot syntax -->
<a :href="url">Some link</a>
<!-- Long syntax with dynamic arguments -->
<a v-bind:[attribute_name]="url">Some link</a>
<!-- Shot syntax with dynamic arguments -->
<a :[attribute_name]="url">Some link</a>

Shorthand for v-on

<!-- Long syntax -->
<a v-on:click="runFunction">Some link</a>
<!-- Shot syntax -->
<a @click="runFunction">Some link</a>
<!-- Long syntax with dynamic arguments -->
<a v-on:[attribute_name]="runFunction">Some link</a>
<!-- Shot syntax with dynamic arguments -->
<a @:[attribute_name]="runFunction">Some link</a>

Now let's see what dynamic arguments are and how they work.

Dynamic arguments in Vue

Directives have been able to have dynamic arguments since Vue 2.6.0. You can use a JavaScript expression in the directive argument if you wrap it inside square brackets.

But there are some restrictions:

• expressions should evaluate to a string
• spaces and quotes are invalid

Let's see a practical example

    <a v-bind:[attribute_name]="url">Visit my Website</a>

Inside your data object you can define the directive arguments as if they were properties, where the property value is the name of your HTML attribute like hef in the following example:

let app = new Vue({
    el: '#app',
    data: {
        attribute_name: 'href',
        url: 'https://fabiopacifici.com'
    }
})

The code above renders the attribute name href and its value dynamically when you bind it using the v-bind directive.

The result will be this:

<a href="https://fabiopacifici.com">Visit my Website</a>

Dynamic events in Vue

You can apply the same concept to event directives like v-on. This directive does the job of the JavaScript event listener.

v-on accepts an argument like click, for example v-on:click="doSomething".

To apply the concept of dynamicity, let's create a v-on directive and use the square brackets after it to specify a dynamic event.

Inside the index.html file you will place the following code:

    <div id="app">
        <a v-on:[event_name]="runFunction">Some link</a>
    </div>

Let's break down the code above.

First you have your root element, the div with an id of app. Inside the root element you add an anchor tag <a>Some link</a>.

The anchor tag has a v-on directive in it. After the directive you specify a dynamic argument v-on:[event_name] where event_name will be a property inside your Vue instance that you can change as you need.

The v-on directive works like any event listener, so between quotes you need to specify the name of the function that you want to run when the event is triggered, therefore runFunction.

Now, inside your main.js file:

let app = new Vue({
    el: '#app',
    data: {
    event_name: "click"
    },
    methods: {
        runFunction() {
            console.log("test click function");
        }
    }
})

Let's review what the code above does.

First, you create the Vue instance. Then you add the event_name property inside the data object and you assign to it a value of click. This is the event you will listen for.

Finally, we said that the v-on directive runs a function when the event is triggered, therefore you need to write a method inside your Vue instance. So inside the methods object, create a new function called runFunction that will simply output a message inside the console.

The power of dynamic events is clear when you replace the value of the event_name property with a different event name.

Methods in Vue

So far we've learned how to bind data using the v-bind directive inside your template. In the next section, you will learn more directives – but before diving into that, let's quickly talk about how to store your functions.

You can check out the Repository here

And you can see the video version of this section on YouTube if you want to review what you learn.

Since you are working in a big object, the Vue instance function will take the name of the methods. And as you might guess, the Options object has a property called methods where you can store your functions as you do for your data.

Inside your Vue instance, define a method that you can call anything you like – just remember to use a naming convention that clearly describes your code.

let app = new Vue({
    el: '#app',
    data: {
        firstName: "Fabio",
        lastName: "Pacific" 
    },
    methods: {
        // es6 syntax
        getFullName(){
            return this.firstName + " " + this.lastName;
        }
        // es5 syntax
    /* getFullName: function(){

        } */
    }
});

In the code above, you created a method inside the methods object. You called it getFullName. Inside a method, you have access to the this keyword that refers to the object instance, so you can use it to access from a method the properties stored in the data object.

When you call the method getFullName the method will return a single string that contains both the first and the last name.

Now inside your HTML file, you can simply call the method as you did when you needed to access properties in the data object {{ getFullName() }}

<div>{{ getFullName() }}</div>

Now that you know how to create a method and where to put it in the Vue instance, let's move forward and learn more about directives.

Conditionals in Vue (v-if/v-else-if/v-else/v-show)

Now it's time to learn more about directives. We will start by looking at how conditionals work in VueJS. The first directive of this section is the v-if, which allows you to render blocks of code based on a certain condition.

You can click to view the Repository here.

And you can click to view the video on YouTube here or use it to review at the end of the section.

Like the if-else statements in vanilla JavaScript, the v-if will check if the returned value of a conditional expression evaluates to true. If so it will render the HTML element and everything you place inside it.

Since it's a directive, it works on a single element (HTML tag). If you want to extend its behaviour on multiple elements, then you need to wrap them inside a <template> tag.

The v-if directive works in the same way as the v-bind directive works: it has access to the properties in the data object and accepts an expression between its quotes.

If the returned value of the expression or the value of the data property you use evaluates to true, then the directive renders the HTML element. Otherwise it doesn't.

Of course, you can check for multiple conditions and end up rendering an element if none of these evaluates to true. You do that using v-if together with the v-else-if and v-else directives.

Let's see a simple example and write some code inside your main.js file to show or hide an element.

The first thing to note is that if you have a property that returns a boolean value, it is enough to use it inside the v-if directive to show/hide an element, like so:

<h1 v-if="showTitle">{{movieTitle}}</h1>

And a vue instance with a showTitle property set to true.

let app = new Vue({
    el: "#app",
    data: {
        movieTitle: 'Shining',
        showTitle: true,
    }
})

In such a case, you are saying show the title property only if the value of showTitle is true. If you change it to false, the title won't show.

You can put a simple expression inside the quotes of a v-if directive that once computed evaluates to a boolean.

<h2 v-if="age >= 18">{{movieTitle}}</h2>

Inside your main.js file

let app = new Vue({
    el: "#app",
    data: {
        movieTitle: 'Shining',
        age: 18,
    }
})

In the code above we wrote an expression on the v-if directive that checks if the age property is greater than or equal to 18. If the result is true then the h2 will be shown onto the page.

Now let's move to a more complex example and add another condition using the v-else-if.

v-if/v-else-if

In the following example, you will first create a v-if condition similar to the one above – but this time you'll check if the user is over 18 but under 21 using the && operator.

If true, then you'll show the time with an additional note. If false, and the user is over 21, then we will simply show the title of the movie.

<h2 v-if="age > 21">{{movieTitle}}</h2>
<h2 v-else-if="age > 18 && age < 21"> {{ movieTitle }} | Watch with an adult</h2>

Inside the Vue instance you could have an age property. But to make your simple program dynamic, you can instead use a prompt to ask the user their age.

let userAge = Number(prompt("What's your age?"))
let app = new Vue({
    el: "#app",
    data: {
        movieTitle: 'Shining',
        age: userAge,
    }
})

So the code here first asks the user their age, then stores the result as a number inside the variable userAge.

You'll later use the userAge variable inside the data object to assign a value to the age property so that based on its value you will render one element or the other.

Let's move forward and use the v-else directive to show a different message in case the user is under 18.

v-else directive:

The v-else directive works differently. You don't have to pass it anything. It simply enters into action when none of the previous conditions evaluate to a true value.

So the new HTML element is fairly simple:

    <div id="app">
        <h2 v-if="age > 21">{{movieTitle}}</h2>
        <h2 v-else-if="age > 18 && age < 21"> {{ movieTitle }} | Watch with an adult</h2>
        <p v-else> Sorry You are too young to see this movie</p>
    </div>

Here we have a p tag with a v-else directive attached. As you can see, it looks like an attribute without values (like the disabled or required HTML attributes).

Your JavaScript file has not changed.

let userAge = Number(prompt("What's your age?"))
let app = new Vue({
    el: "#app",
    data: {
        movieTitle: 'Shining',
        age: userAge,
    }
})

That's all you need to know about conditional rendering to be able to move forward with your first project. But if you want to learn more, here is the documentation: [https://vuejs.org/v2/guide/conditional.html]

You need to learn a few more things before you'll be able to build your first project, which is a simplified Twitter clone. The next topic is about Loops.

Loops in Vue

Let's go back to the previous example and learn how to use the v-for directive to output each project of the array onto the page.

You can click to view the Repository here

And you can click to view the YouTube-Video here, or you can find it at the end of this section to review what you've learned.

For our next task, it would be useful if we could use a loop, and the v-for directive is here to help.

Its syntax doesn't have much in common with a classic for loop in JavaScript, but rather with a Python for in loop or with the for in JavaScript loop used to iterate over objects.

With this directive, you specify the elements of the array and the single element between quotes using the syntax project in projects. Here, projects are the property inside the data object that contains an array of objects, and project is the single element of the array.

You can call this as you like, but keep in mind that what follows the in keyword must be an iterable from your data object while what comes before can be anything you like to refer to each element of the iterable.

In your case, project seems the most appropriate choice since you have an array of projects.

Your JavaScript file will look like this:

let app = new Vue({
    el: "#app",
    data: {
        name: "John Doe",
        title: "Portfolio",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ],

    }

});

Now inside the HTML file, let's use the v-for to render the title of each project.

    <div id="app">
        <h1>{{name}} {{title}}</h1>
        <ul>
            <li v-for="project in projects">{{project.title}}</li>
        </ul>
    </div>

In the code above, you used {{name}} {{title}} to render the main title for your portfolio. Then you used the v-for directive and specified inside the quests that you want to assign each element of the iteration to a project variable v-for="project in projects".

Now on each iteration, the project variable holds an object from which you can retrieve its properties using dot notation like so: {{ project.title }}.

One thing to note is that the v-for directive also gives you access to the index of the element at each iteration. You can store it in a variable as you did with the single element you called project.

To do that, you need to wrap them between parentheses and separate the element and its index with a comma, like so v-for="(project, index) in projects".

Also, note that when working with objects Vue can show an alert to inform you that the use of a key is recommended. This means that it expects a key to identify each element when it's rendered.

You can do this using the key attribute and bind it, for instance to an id property on the object or to another different property, like so

<div id="app">
    <h1>{{name}} {{title}}</h1>
    <ul>
        <li v-for="project in projects" :key="project.title">{{project.title}}</li>
    </ul>
</div>

Here you used the v-bind shorthand directive to bind the key attribute to the project.id property if it exists or to another property if not.

let app = new Vue({
    el: "#app",
    data: {
        name: "John Doe",
        title: "Portfolio",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ],

    }

});

v-for can also be used to iterate over objects. In such a case, you have access to the value, the key, and also the index like so v-for="(value, key, index) in object" where 'object' is a property in the data object.

If you want to learn more, visit the documentation here: [https://vuejs.org/v2/guide/list.html]

Let's now move on to another important feature of Vue: how to handle user inputs and events.

How to Handle User Input with Event Handling (v-on) in Vue

To make the application react to a user's input, Vue provides a straightforward directive called v-on. This is one of the directives that accepts arguments, similar to the v-bind directive.

With such a directive, it's easy to listen for events triggered by a user.

The v-on directive lets you run a function that executes a block of code when the user performs an action, like when they click on a button, hover on an element, or press a specific key on the keyboard.

You can check out the Repository here.

And you can view the video on YouTube here or at the end of this section to review what you've learned.

V-on Syntax and Events

There are two types of syntax we can use, the long-form or the short. They're equivalent, so pick the one you prefer. What follows is just a representation of the syntax, and I'll explain it in detail in a minute.

Long syntax: v-on:EventName='doSomething' Shot syntax: @EventName='doSomething'

There are many events you can listen to, such as:

• click
• submit
• mouseover
• mouseenter
• mouseleave
• keyup
• keydown
• keypress

But you can also create custom events (which you will see when you reach the components section).

Let's pick the long-form syntax: v-on:EventName='doSomething. I'll explain it more now.

First, you have the directive v-on. Then you have an argument that is the event name you want to listen for, like click. After that, the doSomething can be any method that you have defined inside the methods object of the Vue instance.

This method is like any other function that you define inside a JavaScript object. It can have parameters or not. If it has them, you can call the method and pass parameters to it as usual like this: doSomething(param, param_2, param3).

You can have something like this <div v-on:click="likeProject">Like</div> and when the user clicks on this element, it will trigger a method and run some code to increase a like counter inside a project.

Let's first create the HTML you need for that:

<div class="projects" v-for="(project,index) in projects">
    <h1>{{project.title.toUpperCase()}}</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <div>Like
        <i class="fas fa-heart fa-lg fa-fw" @click="likeProject(index)">
        </i>
        {{project.likes}}
    </div>
</div>

In the code here, first you'll use the v-for directive to loop over the array of projects. Note that you should use the syntax (project, index) in projects because you will need to pass the index to the like method that you defined earlier.

After that, you output some data onto the page (like the project name in uppercase letters) then the description, and a div tag with an icon for the likes (remember to add font awesome to get the icon).

On the heart icon, add the directive v-on using the short syntax @click="likeProject(index)" between quotes that you used to invoke your likeProject(index) method. Then pass to it the index as a parameter so you can find the current project the user clicked on.

Finally, you'll render the likes onto the page for the current project using the {{project.likes}} syntax.

Now it's time to go in the Vue instance and write your method.

let app = new Vue({
    el:"#app",
    data: {
        projects: [
            {title: "My first project", description: "A simplified Twitter clone", likes: 0},
            {title: "My second project", description: "Projects portfolio with GitHub", likes: 0},
        ]
    },
        methods: {
            likeProject(index){
                const project = this.projects[index]
                project.likes++
                console.log(project.likes)
            }

    }
});

As I said earlier, you needed to define a method to call when the user clicks on a link. So you create the likeProject method, which accepts a parameter that will be the index of the element the user clicked on.

You can then add a likes property inside your projects array and access it for the current project to increment its value every time the user clicks on your link.

How to access the original event

If for any reason you need to access the original DOM event, you could have used the special $event variable inside the method like this on the v-on directive: doSomething(param1, param2, $event). Let's see an example of that now.

You need to add the special variable in the method call on your v-on directive like so:

<i class="fas fa-heart fa-lg fa-fw" @click="likeProject(index, $event)">
        </i>

Then you can access the original event inside your method like so:

likeProject(index, event){
    console.log(event); // get the original event
    const project = this.projects[index]
    project.likes++
    console.log(project.likes)
}

Now that you know how the v-on directive works, let's improve our Likes example and put something more in it. We will use key modifiers in the next example, so let's quickly see what they are and what you can do with them.

Event Modifiers in Vue

With events, Vue provides access to a number of Event modifiers. They are divided into 4 main groups. You can add these modifiers to a directive to change the way your event behaves. They are like postfix and you can chain them using dot notation.

Below there is a quick reference.

Categories:

• event modifiers
• key modifiers
• system modifiers keys
• mouse buttons modifiers

Event Modifiers: .stop .prevent .capture .self .once .passive

Key Modifiers: You can add these modifiers to the @keyup listener to listen for when these keys are pressed or use them as a combination with the @click event to listen for a click+space, for example. @click.enter="doSomething"

.enter .tab .delete (captures both “Delete” and “Backspace” keys) .esc .space .up .down .left .right

System modifiers: With these modifiers, you can trigger mouse or keyboard event listeners when the corresponding key is pressed. .ctrl .alt .shift .meta .exact (allows control of the exact combination of system modifiers needed to trigger an event)

Mouse buttons modifiers: These modifiers allow you to trigger a mouse event listener if the corresponding mouse button is clicked.

.left .right .middle

If you want to learn more, read the docs here.

How to like a project with key modifiers

In the previous example, you used the v-on:click directive to trigger a mouse event listener that aimed to simulate a like on a project.

But the user was able to add as many likes they wanted by clicking on the icon.

In the next example, you will do things a bit differently.

• First, you will prevent the user from adding more than one like to each project,
• Then you will let the user remove a like
• Finally, you will keep the likes on the page even after the user refreshes the page.

Let's get started. This time you will use mouse button modifiers to listen for clicks. The left mouse button click will trigger the add like behaviour and the right mouse button click will trigger the remove behaviour.

Inside your HTML file:

<div id="app">

    <!-- Users can like a project with a left click and dislike it with right click -->

        <div class="projects" v-for="project in projects">
            <h1>{{project.title.toUpperCase()}}</h1>
            <p>Lorem ipsum dolor sit amet.</p>
            <div>Like 
                <i class="fas fa-heart fa-lg fa-fw" 
                    @click.left="addLike(project)" 
                    @click.right="removeLike(project, $event)">
                </i> 
               {{project.likes}}
            </div>
        </div>


</div>

In the code above you have taken what you had before and simply added a left mouse button key modifier to the click event @click.left. Then you invoked the addLike method. This will make your project like counter increase by one as we have seen before.

Then you added another event listener to the same element, but this time you used the .right mouse button key modifier to listen when the user clicks on our icon using the right button @click.right="removeLike()".

In the remove like method, you have also passed the special variable $event so that you can use the original event later in your method to prevent its default behaviour and open the contextual menu.

But we said earlier that you can also chain key modifiers and indeed there is a .prevent key modifier that you can use here instead of the $event variable. You could do the same like this: @click.right.prevent="removeLike(project)"

Let's see how to structure your main.js file:

let app = new Vue({
    el: "#app",
    data: {
        name: "John Doe",
        title: "Portfolio",
        projects: [
            {title: "My first project", description: "A simplified Twitter clone", likes: 0},
            {title: "My second project", description: "Projects portfolio with GitHub", likes: 0},
        ]
    },
    methods: {
        addLike(project){
           console.log(project)  
        },
        removeLike(project, event){
            console.log(project)
            console.log(event)
        }
    }

});

So in the data object, you have a projects property that is an array of objects. Each object has a likes property that you will increment or decrement depending on what mouse button the user clicks.

Inside the methods object, you created the two methods you referenced in your v-on directives addLike() and removeLike(). For now, you are only logging to the console the project parameter value and the event value. You will implement the logic in a minute.

Let's start with the add likes method – it could look like this:

addLike(project){
    const projectTitle = project.title;
    if(!localStorage.getItem(projectTitle)) {
        project.likes++;
        localStorage.setItem(projectTitle, true);
    }              
}

There are a few things going on here. In the first line, you're storing the project title inside the projectTitle variable. Then, you said you wanted data to persist if you refresh the page so you are using the localStorage API to store information inside the client browser.

You increment the likes count by one, but you do that depending on a value inside the local storage.

You can do this by first checking to see if there is a key in the localStorage matching your project title, if(!localStorage.getItem(projectTitle)).

If this evaluates to false, then you will run the code inside the if block and first increment the likes project.likes++.

Second, use the .setItem() method of the local storage API to set a key-value pair with the project title as the key and a boolean value as its value localStorage.setItem(projectTitle, true).

To put an item in the local storage, you'll use localStorage.setItem(). The set item method accepts a key-value pair. Your key will be the title you saved in the variable projectTitle and the value will the boolean value true.

Now let's see if this works.

removeLike(project, event){
    event.preventDefault(); // This can be omitted if we use the prevent key modifier
    const projectTitle = project.title;
    if(project.likes > 0 && localStorage.getItem(projectTitle)) {
        project.likes--;
        localStorage.removeItem(projectTitle);
    }
}

This function does the opposite of the previous. When the user clicks their right mouse button, the method removeLikes() is executed and you do the following:

First things first, you need to prevent its default behaviour. Otherwise when the user right-clicks on the icon, the contextual menu will pop up and we don't want that. So, you'll use the event.preventDefault() method on the original event that is represented by the event parameter on your method.

Alternatively, you can omit this if you use the prevent key modifier in the v-on directive @click.right.prevent="removeLike(project).

The next step is to grab the project title. Since you also passed a parameter to the method to represent the current project object removeLike(project, event), you can store the project title in a variable projectTitle.

Then you need to make a couple of checks. First, you want to decrement the likes only if its value is greater than zero. Then you want to make sure the project title is in the local storage as a key with a value.

So, in your condition, you have done both checks if(project.likes > 0 && localStorage.getItem(projectTitle)). Now, if both conditions evaluate to true, the code inside the if block can run.

First you remove the like by decrementing its value project.likes--. Then you remove the project title from the local storage using the removeItem method and pass to it the key you want to remove (which is the project title localStorage.removeItem(projectTitle)).

To put it all together, you should now have the following code:

let app = new Vue({
    el: "#app",
    data: {
        name: "John Doe",
        title: "Portfolio",
        projects: [
            {title: "My first project", description: "A simplified Twitter clone", likes: 0},
            {title: "My second project", description: "Projects portfolio with GitHub", likes: 0},
        ]
    },
        methods: {
        addLike(project)
        {
            //console.log(project, "like");
            const projectTitle = project.title;
            // check if the current project is not in the local storage
            if(!localStorage.getItem(projectTitle)) {
                // set the item in the storage and increase the likes counter
                project.likes++;
                localStorage.setItem(projectTitle, true);
            }

        },
        removeLike(project){ 
            const projectTitle = project.title;
            console.log(project, "dislike");  
            if(project.likes > 0 && Boolean(localStorage.getItem(projectTitle))) {
                project.likes--;
                localStorage.removeItem(projectTitle);
            }

        }
    },
    mounted(){
        this.projects.forEach(project => {
            if(localStorage.getItem(project.title) !== null) {
                project.likes = 1; 
            }
        });
    }

});

To make the code work, you also need to add a life cycle hook called mounted. This will let you run code when the root element is mounted on the Vue instance. With it, you can check if the localStorage has a key corresponding to your project title and if so, update the value of the likes counter.

And your HTML is still the same:

<div id="app">
    <!-- Users can like a project with a left click and dislike it with right click -->

    <div class="projects" v-for="project in projects">
        <h1>{{project.title.toUpperCase()}}</h1>
        <p>Lorem ipsum dolor sit amet.</p>
        <div>Like 
            <i class="fas fa-heart fa-lg fa-fw" 
                @click.left="addLike(project)" 
                @click.right="removeLike(project, $event)">
            </i> 
            {{project.likes}}
        </div>
    </div>
</div>

Remember that you can get rid of the $event variable passed to the removeLike method by using the event key modifier like so: @click.right.prevent="removeLike(project)"

You have learned a lot so far! And now that you have seen key modifiers in action, we can move forward to the next topic: two-way model binding and the v-model directive. Then we'll start building our Twitter clone.

Two Way Model Binding (v-model) in Vue

All right, so far we have seen how to bind properties from the data object to our HTML tags and inside attributes, how to loop over a sequence of elements and, how to display conditionally elements onto our template with conditionals.

We have covered how to define methods inside the methods object so that we can perform more complex operations on our data and, we have learned how to work with events using the v-on directive.

In the next section, we will look at how Vue opens a two-way communication channel between a form's input and, a property defined inside the data object. Then we will use this knowledge to build our first project together.

You can check out the Repositoy here.

And you can view the video on YouTube here or at the end of the section if you want to review what you've learned.

How does the v-model directive work?

The v-model is another Vue directive. You can use it out of the box, and it's useful to simplify the way an input tag can communicate with a Vue instance's property in the data object.

It works like all the other directives. The main difference is that when it's implemented, your application will listen for changes inside the input with this v-model directive and update the attached property's value immediately inside the data object and vice-versa.

It is effectively a two-way communication channel between your template and the Vue instance. It's the Vue way to interact with user input and simplify your life as a developer.

Let's look at a straightforward example.

How to use the v-model on an input tag

First, you need an input tag inside the element you defined as the root element in the Vue instance, the div with an id of app.

<div id="app">
    <h2>What do you want to tweet about today?</h2>
    <input type="text" v-model="tweet" placehoder="What's happening today?">
</div>

In the HTML you have an input tag, which has the v-model directive attached to it as an HTML attribute. Anything between quotes is computed as a JavaScript expression, so you write the name of a property tweet that you will create inside the Vue data object.

So let's do it.

let app = new Vue({
    el: '#app',
    data: {
        tweet: ""
    }
});

So now you have a Vue instance and, in it, you have a data object with a tweet property that has an empty string as its value.

If you open the console and inspect the Vue element, you can see the two-way data binding in action.

By changing the value of the tweet property, you will immediately update the value inside the input tag and vice-versa.

You have this tweet property in the data object and you already know how to render its content onto the page. So now you can update your markup and add a paragraph under the input tag to see the value dynamically changing while you type.

<div id="app">
    <h2>What do you want to tweet about today?</h2>
    <input type="text" v-model="tweet" placehoder="What's happening today?">
    <p>{{tweet}}<p>
</div>

How cool is that? Now you can see the tweet property changing in real-time as you type.

That's the two-way data binding. If you change the content of the tweet property directly it will be reflected in your template, too.

If you want to learn more, make sure to read the official Documentation too.

How to build a tweet box

Now, let's raise the bar a little and build something together.

• We will create a simple textarea with a submit button,
• We will display the number of characters the user has left while they are typing so that they can submit the form without exceeding the max number of characters allowed.
• Like in a tweet, the maximum number of characters will be 200.

How to define the initial markup

Now you need to define a markup. So inside our index.html file, write the following code:

<div id="app">
    <h2>What do you want to tweet about today?</h2>
    <form v-on:submit.prevent="submitData">
       <!-- Code here -->

    </form>
    <!-- More code here -->
</div>

First you have first created your root element for the Vue instance so that it can monitor the markup and do its magic.

Then you created a form tag with an event listener using the directive v-on, which listens for the submit event and runs a function submitData that you still have to create.

You also added the .prevent modifier so that the page doesn't refresh when you submit the form.

How to define the Vue instance and methods

Let's define our Vue instance and create the submitData method so that you can use it later when you need it.

let app = new Vue({
    el: '#app',
    data: {
        // data object props here
    },

    methods: {
          submitData(){
             // Code here
        }
    },

});

How to add a text area and a submit button

Now back to the HTML: let's add the text area inside your form.

<div id="app">
    <h2>What do you want to tweet about today?</h2>
    <form v-on:submit.prevent="submitData">
       <!-- Code here -->
        <div class="form_group">
            <label for="name">Tweet</label>
            <textarea name="tweet" id="tweet" cols="80" rows="10" v-model="tweet" maxlength="200"></textarea>

        </div>

        <button type="submit">Tweet</button>

    </form>
    <!-- More code here -->
</div>

Inside the form tag, you create a label and a textarea for your tweet box. On the textarea you use the directive v-model to bind the textarea value to a tweet property and vice-versa. So now when one changes the other changes, too.

NOTE: The v-model directive is used on form elements like inputs, text areas, check box, and more.

After the textarea you put a button of type submit so that when a user clicks it the form's data are sent to your application's submitData() method and you can process them.

How to add properties to the Vue instance

Now inside your JavaScript file, you need to create the tweet property in the data object and do something with this information so that you can later show a list of tweets sent.

We also said that we want to limit the characters to 200 and show an error when they're in excess.

So let's add a few more properties here like:

• tweet for the current tweet message that the user inputs in the text area
• tweets for the list of tweets
• max_length for the characters limit

let app = new Vue({
    el: '#app',
    data: {
        tweets: [],
        tweet: "",
        max_length: 200,  
    },

    methods: {
          submitData(){
              /* Handle the tweet */
        }
    },

});

So now with the tweets property as an array and using the two-day binding between the tweet property and the textarea, you can push all tweets inside the tweets array when the user submits the form by triggering the submitData method.

How to implement the character counter

Before implementing the submitData method, you can show a character counter while the user types in the textarea.

Let's implement this feature so the user knows if they can submit the tweet or not.

Back in the HTML file, you can add a div with a couple of span elements and use a v-if directive to check the length of the character. It'll show the counter while the user is within the characters limit, otherwise it'll show an error message.

<div id="app">
    <h2>What do you want to tweet about today?</h2>
    <form v-on:submit.prevent="submitData">
        <div class="form_group">
            <label for="name">Tweet</label>
            <textarea name="tweet" id="tweet" cols="80" rows="10" v-model="tweet"></textarea>        
        </div>

        <button type="submit">Tweet</button>

    </form>
    <!-- Show character limits here -->
    <div>
        <span v-if="tweet.length < max_length"> {{ `Max: ${tweet.length} of ${max_length} characters` }}
        </span>
        <span class="errorMessage" v-else>{{`Max char limit reached! excess chars: ${max_length - tweet.length}`}}</span>
    </div>

</div>

The code above uses two-way data binding between the tweet property and the textarea to find out if the user has reached the character limit that you defined as the max_lenght property.

Since the tweet property is connected to the textarea, you can use the v-if directive combined with the tweet.length and the max_length properties to make the comparison.

Now, every time the user types something in the textarea, the string saved in the tweet property increases by one character. Then you can use the .length property to see how long the whole string is and compare it against your max_length property.

You use the directive v-if="tweet.length <= max_length" to make your comparison. When this comparison returns true, the user will see the span tag with its content, the counter.

Inside the span tag, you used the moustache syntax to show the user the current length of the property tweet and the character limit.

<span v-if="tweet.length < max_length"> {{ `Max: ${tweet.length} of ${max_length} characters` }}</span>

After the v-if directive, a v-else directive handles the error message that you show to the user when there are no characters left to use.

Here the content of the span element shows a message that tells how many characters there are in excess by subtracting the tweet length from the max_lenght property.

<span class="errorMessage" v-else>{{`Max char limit reached! excess chars: ${max_length - tweet.length}`}}</span>

How to submit the form

All that's left is to add the tweet to the list of tweets and show them on the page when the user submits the form.

Let's complete the submitData method so that every time it's executed it pushes a new object to the tweets array.

Inside the methods object the submitData methods now looks like this:

 submitData(){
    if (this.tweet.length <= this.max_length) {
        this.tweets.unshift(this.tweet);
        this.tweet = "";
    } 
}

The method above first checks if the length of the tweet property is less than or equal to the max_length property. If the condition evaluates to true, then you can add the tweet content to the array using the unshift method (which adds it to the beginning of the array).

Finally, you need to clear the value of the tweet property. You can do this by assigning to it an empty string again.

NOTE that since you are inside a method, you need to use the this keyword to grab properties and eventually methods inside the Vue instance.

How to show a list of tweets

Now, you can also show a list of tweets in your template.

To do that you will use a v-for directive and loop over the tweets array to show each tweet.

<ul>
    <li v-for="text in tweets">{{text}}</li>
</ul>

Put it all together

The final code now looks like this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VueJs v-model</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Fontawesome CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
        integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
    <!-- VueJS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <style>

    </style>
</head>

<body>
    <div id="app" class="container">

        <h2>What do you wanna tweet about today</h2>

        <!-- Tweet form -->
        <form v-on:submit.prevent="submitData">

            <div class="form-group">
                <label>Tweet</label>
                <textarea class="form-control" cols="30" rows="5" v-model="tweet"></textarea>
            </div>

            <button type="submit" class="btn btn-primary">Tweet</button>
        </form>

        <!-- Alert the user  -->
        <div class="my-3">
            <span v-if="tweet.length < max_length">
                {{ ` Max: ${tweet.length} of ${max_length} characters` }}
            </span>
            <span class="alert alert-danger" v-else> {{ `Max char limit reached! excess characters: ${max_length -
                tweet.length} ` }}</span>

        </div>

        <!-- Tweets message -->
        <ul>

            <li v-for="tweet in tweets">
                {{tweet}}
            </li>
        </ul>

    </div>

    <script src="./main.js"></script>

</body>

</html>

Our final javascript file

let app = new Vue({
    el: '#app',
    data: {
        tweet: "",
        tweets: [],
        max_length: 200        
    }, 
    methods: {
        submitData(){
            // Handle the tweet submission
            if(this.tweet.length <= this.max_length){
                this.tweets.unshift(this.tweet);
                this.tweet = "";
            }
        }
    }
})

Improvements you can make

If you take this bit of code from your index.html file, there is something you can do to clean up our code...

<!-- Show the max char messages -->
<div>
    <span v-if="tweet.length < max_length"> {{ `Max: ${tweet.length} of ${max_length} characters` }}
    </span>
    <span class="errorMessage" v-else>{{`Max char limit reached! excess chars: ${max_length - tweet.length}`}}</span>

</div>

To clean this template file, we can follow two approaches that are exactly the same, except that one is cached and the other one isn't.

• Computed Properties (cached)
• Methods (not cached)

In the next section, we will learn what computed properties are and how they differ from methods.

Computed Properties and methods

You should use computed properties instead of in-template expressions for complex logic that has the scope of changing the presentation of our data, not the data itself.

If we need to change the data, then you should use methods instead. Computed properties are cached based on their dependencies, meaning that it will re-evaluate only when its dependencies have changed.

With computed properties, the result of the previously run function is returned if the dependencies have not changed.

You can view the repository here and watch the video on YouTube here. The video is also listed at the end of this section so you can review what you've learned.

In the following example, we will use computed properties but we could also use methods. Generally speaking, we use computed properties when we have an expensive operation that we want to execute and cache so that the next time we don't have to run it again unless something has changed.

Let's implement a computed property for the following messages. Our HTML file will now change from this:

<!-- Show the max char messages -->
<div>
    <span v-if="tweet.length < max_length"> {{ `Max: ${tweet.length} of ${max_length} characters` }}
    </span>
    <span class="errorMessage" v-else>{{`Max char limit reached! excess chars: ${max_length - tweet.length}`}}</span>

</div>

to this much cleaner version:

<!-- Show the max char messages -->
<div>
    <span v-if="tweet.length < max_length"> {{ maxCharsText }}
    </span>
    <span class="errorMessage" v-else>{{errorMessage}}</span>

</div>

We have replaced the contents of both spans with two new properties that will be placed as methods inside our computed object.

Now inside our Vue instance, we will create a new object called computed where we will define two methods that will return the messages we had before.

let app = new Vue({
    el: '#app',
    data: {
        tweets: [],
        tweet: "",
        max_length: 200,  
        error: ""
    },
    // Computed Properties
 computed: {
        maxCharsText: function(){
            return `Max: ${this.tweet.length} of ${this.max_length} characters`;
        },
        errorMessage: function(){
            return `Max char limit reached! excess chars: ${this.max_length - this.tweet.length}`
        }
    },
    // Methods
 methods: {
          submitData(){
              if (this.tweet.length <= this.max_length) {
                  this.tweets.unshift(this.tweet);
                  this.tweet = "";
              } 
        }
    },

});

The first method maxCharsText returns exactly the same string we had before inside our HTML file. The only difference is that we are using the keyword this to reference the properties we needed to grab inside the Vue instance this.tweet.length and this.max_length.

The second method works in the exact same way and it also uses the keyword this to pick the properties defined in the Vue instance this.max_length and this.tweet.length.

All together

<div id="app">
    <h2>What do you want to tweet about today?</h2>
    <form v-on:submit.prevent="submitData">
        <div class="form_group">
            <label for="name">Tweet</label>
            <textarea name="tweet" id="tweet" cols="80" rows="10" v-model="tweet"></textarea>

        </div>

        <button type="submit">Next</button>

    </form>

    <div>
        <span v-if="tweet.length < max_length"> {{ maxCharsText }}
        </span>
        <span class="errorMessage" v-else>{{errorMessage}}</span>

    </div>
    <ul>
        <li v-for="text in tweets">{{text}}</li>
    </ul>
</div>

JavaScript file

let app = new Vue({
    el: '#app',
    data: {
        tweets: [],
        tweet: "",
        max_length: 200,  
        error: ""
    },
    // Computed Properties
 computed: {
        maxCharsText: function(){
            return `Max: ${this.tweet.length} of ${this.max_length} characters`;
        },
        errorMessage: function(){
            return `Max char limit reached! excess chars: ${this.max_length - this.tweet.length}`
        }
    },
    // Methods
 methods: {
          submitData(){
              if (this.tweet.length <= this.max_length) {
                  this.tweets.unshift(this.tweet);
                  this.tweet = "";
              } 
        }
    },

});

If we want to use methods instead of computed properties, we can simply move both methods from the computed object inside the methods object and invoke them with parenthesis inside our HTML file like so:

<div>
    <span v-if="tweet.length < max_length"> {{ maxCharsText() }}
    </span>
    <span class="errorMessage" v-else>{{errorMessage() }}</span>

</div>

Just remember that computed properties are cached while methods are not. If you want to learn more make sure to read the official documentation.

How to Create a Simple Twitter Clone

Now, let's put together everything we've learned so far and and build our very first project. It will be a minimalist and simplified twitter-like web application.

We want to create a simple application that has some kind of registration form, a box to add new tweets, and a section where we can show all tweets. We also want to be able to remove tweets.

All data must be persistent so that after the page is refreshed the list of tweets is still visible while the registration form will be hidden.

You can watch the video on YouTube here or at the end of this section if you want to review.

You can also view the repository here.

Define our tasks

Let's break this down into large tasks first. Then we will see what we need to do to complete each one.

• create a registration form
• create a tweets box form
• create a tweets section

To do our project we need to research what tools we need to use to achieve our goals, so lets put them down:

• VueJS (application logic)
• localStorage (make data persistent)
• font awesome (icons)

This application has no database so we are unable to record multiple users and their tweets. It's just a proof of concept, something we build to use our new knowledge.

Create the project structure

Now that we know what to do, let's start by creating our project structure and importing the tools we need to complete the first task, the registration form.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple tweetter clone</title>
    <!-- CDN Fontawesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

    <!-- VueJS development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Style sheet -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
<div id="app">
    <!-- Register an account -->

    <!-- Add a tweet -->

    <!-- Show all tweets -->

</div>
<!-- Link our main.js file -->
<script src="./main.js"></script>
</body>

</html>

Now that our HTML file is ready, let's create the main.js file and create a Vue instance.

let app = new Vue({
    el: '#app',
    data: {

    },
    methods: {

    }

});

Finally, we need to create a style.css file that we will place for now in the root folder of our project.

We will use a CSS file that I have already written, and you can download it from here.

OK, our basic structure is ready to go. Inside our HTML file, we have some comments that reflect our 3 main tasks: create a registration form, create an add tweet box and, show a list of tweets.

Let's start with the first task and simulate a registration form.

How to simulate a registration form - HTML

Inside the root element <div id="app"></div> we need to create a registration form with the following fields: name, email, password, and a submit button. The form is contained in a card so we will wrap everything in a div and assign to it a card class.

The form won't submit data to a server, but will simply simulate a registration and update some property in the data object of the Vue instance.

We will place the following code inside our HTML file:

<!-- Register an account -->
<div class="card">
    <i class="fab fa-twitter fa-lg fa-fw"></i>

    <h2>Create your account</h2>
    <form v-on:submit.prevent="registerAccount">
        <div class="form_group">
            <label for="name">Name</label>
            <input type="text" v-model="name" maxlength="25" required>
        </div>
        <div class="form_group">
            <label for="email">Email</label>
            <input type="email" v-model="email" maxlength="25" required>
        </div>
        <div class="form_group">
            <label for="password">Password</label>
            <input type="password" v-model="password" maxlength="16" required>
        </div>
        <button type="submit">Register</button>
    </form>

</div>

Let's break this down. First, the form tag has a v-on directive with a submit argument so it will listen for a submit event. It also has an event modifier .prevent so when we hit the submit button the page doesn't refresh.

Inside the v-on directive there is a method called registerAccount that we need to create inside the methods of the Vue instance.

Inside the form, we have the three input fields: name, email, and password with labels. We wrapped each field inside a div with a class of form_group. Later we can replicate the style of the Twitter registration fields and show a character counter.

Each input field has a v-model directive that binds the input to its data property.

How to simulate a registration form - Vue

Let's move on to the Vue instance to make the binding between the form and the data object properties.

Here we also need a place where we can store the details that the user submits so we will create another property for that.

Looking at the input fields, we also put a maxlength property on them, which is 25 for the name and email and 16 for the password.

Like we did previously when we learned about the v-model, we can create a property for these limits so that we can use it to show the user how many characters the user has left.

The Vue instance will look like this:

let app = new Vue({
    el: '#app',
    data: {
        userData: {}
        name: "",
        email: "",
        password: "",
        max_length: 25,
        max_pass_length: 16
    },
    methods: {
        registerAccount(){
            // record user details
            // add registration to localStorage
            // clear the registration fields

        }
    }

});

Let's break this down. First inside the data:{} object, we defined an object to store and retrieve the userData. Then we added the properties name, email, and password to make the two-way data binding work. Finally we added the max_length and max_pass_length propeties.

How to show input character counter

OK, now that we have a binding between the input fields and our properties, we can show a character counter to the user while they're typing.

This is fairly simple – all there is to do is to show the length of each input property and compare it with the max length properties we have set in the Vue instance.

<div class="form_group">
    <label for="name">Name
        <span> {{ name.length + '/' + max_length }}</span>
    </label>
    <input type="text" v-model="name" :maxlength="max_length" required>
</div>

So here we created a string using an in-template expression. We've shown the length of the name property and the value of the max_length so that while the user types we show something like this: 13/25.

We've also used a v-bind directive on the maxlength attribute so that its value is bound to the value of the property we defined in the Vue instance. So in case we want to change it we can do so in one place.

We will do the same for the other fields.

<form id="register" v-on:submit.prevent="registerAccount">
    <div class="form_group">
        <label for="name">Name
            <span> {{ name.length + '/' + max_length }}</span>
        </label>
        <input type="text" v-model="name" :maxlength="max_length" required>
    </div>
    <div class="form_group">
        <label for="email">Email
            <span> {{ email.length + '/' + max_length }}</span>
        </label>
        <input type="email" v-model="email" :maxlength="max_length" required>
    </div>
    <div class="form_group">
        <label for="password">Password
            <span> {{ password.length + '/' + max_pass_length }}</span>
        </label>
        <input type="password" v-model="password" :maxlength="max_pass_length" required>
    </div>
    <button type="submit">Register</button>

</form>

How to add the logic to the registerAccount method

Now it's time to work on the form submission logic. We will simply populate the object stored in the property userData when the user submits the form.

Inside the registerAccount method we will add the details the user passes and build our object.

 registerAccount(){
            // record user details
            this.userData.name = this.name,
            this.userData.email = this.email,
            this.userData.password = this.password

            // add registration to localStorage

            // clear the registration fields
            this.name = "";
            this.email = "";
            this.password = "";
        }

Here we have taken the value of the properties name, email, and password and assigned them to properties we created in the userData object.

This seems fine mostly because we have put on our input fields the required attribute – but if we remove it we will be able to submit an empty form, and we don't want that.

So let's add a very basic form of validation to at least check if the user has typed something inside our form, otherwise we show an error.

To do this, we need to add an if block inside the method and also an error property to the data object. Our file now looks like this:

let app = new Vue({
    el: '#app',
    data: {
        userData: {},
        usersID: 0,
        name: "",
        email: "",
        password: "",
        max_length: 25,
        max_pass_length: 16,
        error: "",

    },  
    methods: {
        registerAccount(){
            if (this.name !== "" && this.email !== "" && this.password !== "" ) 
            {
                this.userData.id = ++this.usersID,
                this.userData.name = this.name,
                this.userData.email = this.email,
                this.userData.password = this.password

            } else {
                this.error = "Complete all the form fields"
            }

        /* Add registration data to the local storage */


        /* Clear the registration inputs */
        this.name = "";
        this.email = "";
        this.password = "";
        }

    }

});

Here in the registerAccount we've written a conditional that checks if the length of the name property is not empty, if the email property isn't empty, and if the password isn't empty this.name !== "" && this.email !== "" && this.password !== "".

If all these checks evaluate to a true value, then we run the code inside the block. Otherwise we run the code in the else block that updates the value of the error property that we will now use in our template to show the error message.

We also added a new property usersID: 0, that we used inside the if block to assign an id property to the userData object, just to make our application more realistic. But of course it is useless, as we will not have a database where we store all user details. We'll just store a single user inside their browser's local storage.

<form id="register" v-on:submit.prevent="registerAccount">
    <div class="form_group">
        <label for="name">Name
            <span> {{ name.length + '/' + max_length }}</span>
        </label>
        <input type="text" v-model="name" :maxlength="max_length" required>
    </div>
    <div class="form_group">
        <label for="email">Email
            <span> {{ email.length + '/' + max_length }}</span>
        </label>
        <input type="email" v-model="email" :maxlength="max_length" required>
    </div>
    <div class="form_group">
        <label for="password">Password
            <span> {{ password.length + '/' + max_pass_length }}</span>
        </label>
        <input type="password" v-model="password" :maxlength="max_pass_length" required>
    </div>
    <button type="submit">Register</button>
</form>


<div v-if="error.length > 0"> {{error}}</div>

Now our form is complete and we're also displaying an error message to the user if the required attributes are removed from our markup.

But our data do not persist and when the page is refreshed –everything's all gone. Let's tackle that using the localStorage API.

Inside our Vue instance, we need to set an item in the local storage. But we also need to save the entire userData object so that later we can use its data to display a message to the registered user.

/* Add registration data to the local storage */
localStorage.setItem('simple_tweet_registered', true)
/* Add the whole userData object as JSON string */
localStorage.setItem('simple_tweet_registered_user', JSON.stringify(this.userData))

Here we use the setItem method of the Local Storage API to add an item to the local storage so that later we can use it to check if the user is registered or not.

Then we also need to store the entire userData object as a string. To do that we use the JSON.stringify method that will turn the object into a JSON string that can be saved in the localStorage.

Our JS file is now as follows:

let app = new Vue({
    el: '#app',
    data: {
        userData: {},
        usersID: 0,
        name: "",
        email: "",
        password: "",
        max_length: 25,
        max_pass_length: 16,
        error: "",
    },  
    methods: {
        registerAccount(){
            if (this.name !== ""  && this.email !== "" && this.password !== "" ) {
                this.userData.id = ++this.usersID,
                this.userData.name = this.name,
                this.userData.email = this.email,
                this.userData.password = this.password

            } else {
                this.error = "Complete all the form fields"
            }

        /* Add registration data to the local storage */
        localStorage.setItem('simple_tweet_registered', true)
        /* Add the whole userData object as JSON string */
        localStorage.setItem('simple_tweet_registered_user', JSON.stringify(this.userData))


        /* Clear the registration inputs */
        this.name = "";
        this.email = "";
        this.password = "";
        }

    }

});

Now when the user visits our application page, we need to check inside the browser's local storage to see if there is a key called simple_tweet_registered. If there is, we can assume that the user is registered and we can show the next section, the tweet box. Otherwise, we show the registration form.

We will do that by creating a registered: false property in the data object and use it to display or hide the registration form.

data: {
    userData: {},
    usersID: 0,
    name: "",
    email: "",
    password: "",
    max_length: 25,
    max_pass_length: 16,
    error: "",
    registered: false,      
}

Wrap the form around a div with a directive v-if="!registered" like this:

<div class="register" v-if="!registered">
    // here goes the form
</div>

<div v-else> Tweetbox </div>

Our final HTML file now looks like this:

    <div class="card">
        <i class="fab fa-twitter fa-lg fa-fw"></i>
        <!-- Register an account -->
        <div class="register" v-if="!registered">
            <button form="register" type="submit">Register</button>
            <h2>Create your account</h2>
            <form id="register" v-on:submit.prevent="registerAccount">
                <div class="form_group">
                    <label for="name">Name
                        <span> {{ name.length + '/' + max_length }}</span>
                    </label>
                    <input type="text" v-model="name" :maxlength="max_length" required>
                </div>
                <div class="form_group">
                    <label for="email">Email
                        <span> {{ email.length + '/' + max_length }}</span>
                    </label>
                    <input type="email" v-model="email" :maxlength="max_length" required>
                </div>
                <div class="form_group">
                    <label for="password">Password
                        <span> {{ password.length + '/' + max_pass_length }}</span>
                    </label>
                    <input type="password" v-model="password" :maxlength="max_pass_length" required>
                </div>
            </form>


            <div v-if="error.length > 0"> {{error}}</div>
        </div>
        <!-- Add tweet -->
        <div class="tweetBox" v-else>
            <h2>Welcome username_here write your first Tweet</h2>
        </div>

    </div>

Now to make this work, we will use the lifecycle hook we created which lets us inject our code when the Vue instance has been created. This is because we want to check this before mounting our root element.

So let's add a life cycle hook to the Vue instance. We will check if our key is there, and if so we will update the value of the registered property to true.

We have also stored the full userData object in the local Storage so we can use it to repopulate the userData object when the page is refreshed with the details the user submitted.

created(){
    /* Check if the user is registered and set the registered to true */
    if(localStorage.getItem("simple_tweet_registered") === 'true'){
        this.registered = true;
    }
    // repopulate the userData object
     if(localStorage.getItem('simple_tweet_registered_user')) {
            this.userData = JSON.parse(localStorage.getItem('simple_tweet_registered_user'))
        }

}

To turn a JSON string back into an object, we can use the JSON.parse method.

Now it's all set for the next task – show a tweet form to the user after registration.

Our code so far looks like this:

The main.js file:

let app = new Vue({
    el: '#app',
    data: {
        userData: {},
        usersID: 0,
        name: "",
        email: "",
        password: "",
        max_length: 25,
        max_pass_length: 16,
        error: "",
        registered: false,
    },

    methods: {
          registerAccount(){

              if (this.name.length > 0 && this.name.length <= this.max_length && this.email !== "" && this.password !== "" ) {

                    this.userData.id = ++this.usersID,
                    this.userData.name = this.name,
                    this.userData.email = this.email,
                    this.userData.password = this.password
                    this.registered=true;



              } else {
                  this.error = "Complete all the form fields"
              }

            /* Add registration data to the local storage */
            localStorage.setItem('simple_tweet_registered', true)
            /* Add the whole userData object as JSON string */
            localStorage.setItem('simple_tweet_registered_user', JSON.stringify(this.userData))

            /* Clear the registration inputs */
            this.name = "";
            this.email = "";
            this.password = "";
        }

    },
    created(){
        /* Check if the user is registered and set the registered to true */
        if(localStorage.getItem("simple_tweet_registered") === 'true'){
            this.registered = true;
        }
        // repopulate the userData object
        if(localStorage.getItem('simple_tweet_registered_user')) {
            this.userData = JSON.parse(localStorage.getItem('simple_tweet_registered_user'))
        }

    }

});

And the HTML inside the app element:

<div class="card">
    <i class="fab fa-twitter fa-lg fa-fw"></i>
    <!-- Register an account -->
    <div class="register" v-if="!registered">
        <button form="register" type="submit">Register</button>
        <h2>Create your account</h2>
        <form id="register" v-on:submit.prevent="registerAccount">
            <div class="form_group">
                <label for="name">Name
                    <span> {{ name.length + '/' + max_length }}</span>
                </label>
                <input type="text" v-model="name" :maxlength="max_length" required>
            </div>
            <div class="form_group">
                <label for="email">Email
                    <span> {{ email.length + '/' + max_length }}</span>
                </label>
                <input type="email" v-model="email" :maxlength="max_length" required>
            </div>
            <div class="form_group">
                <label for="password">Password
                    <span> {{ password.length + '/' + max_pass_length }}</span>
                </label>
                <input type="password" v-model="password" :maxlength="max_pass_length" required>
            </div>
        </form>


        <div v-if="error.length > 0"> {{error}}</div>
    </div>
    <!-- Add tweet -->
    <div class="tweetBox" v-else>
        <h2>Welcome {{ userData.name }} write your first Tweet</h2>

    </div>

</div>

Here in the HTML, since we used the v-else on the add tweet section and used the local storage to retrieve the data submitted by the user, we can use an in-template expression to grab the user name so that we can output a welcome message.

In the next section, we will create a tweet box form so that after the registration the user can write a tweet.

How to create a tweet box form - HTML

Now it's time to build our add tweet form. We did something very similar earlier in this article, but now we will need to store and make the data persistent. This lets us show a list of tweets even when the page refreshes.

<div class="tweetBox" v-else>
    <h2>Welcome {{ userData.name }} write your first Tweet</h2>
    <form v-on:submit.prevent="sendTweet">
        <div class="form_group">
            <label for="tweet">
                Send your tweet
                <span> {{ tweetMsg.length + '/' + max_tweet }}</span>
            </label>
            <textarea name="tweet" id="tweet" cols="30" rows="10" v-model="tweetMsg" maxlength="200"></textarea>
        </div>
        <button type="submit">Tweet</button>
    </form>

</div>

This is nothing new to us now. Inside the tweetBox element we add a form with the usual v-on directive and a method sendTweet that we will need to define inside the methods object. This will take the tweet and save it somewhere, maybe in a property in the data object.

Inside the form, there is a textarea that has a v-model directive that binds it to a tweetMsg property that we need to create.

Finally, a submit button.

We also have a span inside the tweet label that shows a character counter to the user as we did before in the registration form.

Here we have a new property max_tweet that is used to show the limit and the tweetMsg.length is used to show the current number of the characters inserted.

You can watch the video on YouTube here if you want to review what you've learned.

Create a tweets box form - Vue

Let's go to the Vue instance and add the properties and the sendTweet methods.

Our data object now has three more properties, the max_tweet set to 200, the tweetMsg that binds to the textarea, and a tweets array that we will use to store all tweets the user sends.

data: {
    userData: {},
    usersID: 0,
    name: "",
    email: "",
    password: "",
    max_length: 25,
    max_pass_length: 16,
    max_tweet: 200, // max tweets lenght
    error: "",
    registered: false,
    tweetMsg: "", // current tweet
    tweets: [] // list of tweets
}

Inside the methods, we have a new method that will be invoked by the v-on directive when the form is submitted:

sendTweet(){
    /* Store the tweet in the tweets property */
    this.tweets.unshift(
        {
            text: this.tweetMsg,
            date: new Date().toLocaleTimeString()
        }

    );
    /* Empty the tweetMsg property */
    this.tweetMsg = "";
    //console.log(this.tweets);

    /* Tranform the object into a string  */
    stringTweets = JSON.stringify(this.tweets)
    //console.log(stringTweets);

    /* Add to the local storage the stringified tweet object */
    localStorage.setItem('simple_tweet_tweets', stringTweets)
},

The code above does four things:

• takes the tweets array and adds in it an object to represent a single tweet with text and date properties. To the text property, we assign the value of the tweetMsg that is bound with the textarea. For the date, we create a new date object with the new Date().toLocaleTimeString() method.
• we empty the value of the tweetMsg
• we transform the tweets property into a string using the method JSON.stringify(this.tweets)
• Then we add it to the local storage.

Our final main.js file now looks like this:

let app = new Vue({
    el: '#app',
    data: {
        userData: {},
        usersID: 0,
        name: "",
        email: "",
        password: "",
        max_length: 25,
        max_pass_length: 16,
        error: "",
        registered: false,
    },

    methods: {
          registerAccount(){

              if (this.name.length > 0 && this.name.length <= this.max_length && this.email !== "" && this.password !== "" ) {

                    this.userData.id = ++this.usersID,
                    this.userData.name = this.name,
                    this.userData.email = this.email,
                    this.userData.password = this.password
                    this.registered=true;



              } else {
                  this.error = "Complete all the form fields"
              }

            /* Add registration data to the local storage */
            localStorage.setItem('simple_tweet_registered', true)
            /* Add the whole userData object as JSON string */
            localStorage.setItem('simple_tweet_registered_user', JSON.stringify(this.userData))

            /* Clear the registration inputs */
            this.name = "";
            this.email = "";
            this.password = "";
        },
        sendTweet(){
            /* Store the tweet in the tweets property */
            this.tweets.unshift(
                {
                    text: this.tweetMsg,
                    date: new Date().toLocaleTimeString()
                }

            );
            /* Empty the tweetMsg property */
            this.tweetMsg = "";
            //console.log(this.tweets);

            /* Tranform the object into a string  */
            stringTweets = JSON.stringify(this.tweets)
            //console.log(stringTweets);

            /* Add to the local storage the stringified tweet object */
            localStorage.setItem('simple_tweet_tweets', stringTweets)
        },


    },
    created(){
        /* Check if the user is registered and set the registered to true */
        if(localStorage.getItem("simple_tweet_registered") === 'true'){
            this.registered = true;
        }
        // repopulate the userData object
        if(localStorage.getItem('simple_tweet_registered_user')) {
            this.userData = JSON.parse(localStorage.getItem('simple_tweet_registered_user'))
        }

    }

});

Now that we've completed this part, we can show a list of tweets and also handle when the page is refreshed, and the local storage has in it our tweets object. We will need to parse it back and add its content to the tweets property to see the list.

Next, we will learn how to show the list of tweets using a v-for directive.

How to show a list of tweets - HTML

Inside our root element, add the following code:

 <!-- Show all tweets -->
    <div class="card_tweets">
        <section class="tweets" v-if="tweets.length > 0">
            <h2>Tweets</h2>
            <div class="tweetMsg" v-for="(tweet, index) in tweets">
                <p>
                    {{tweet.text}}
                </p>

                <div class="tweetDate">
                    <i class="fas fa-calendar-alt fa-sm fa-fw"></i>{{tweet.date}}
                </div>

            </div>

        </section>
        <div v-else>No tweets to show</div>
    </div>

Here we wrap everything in a div with a class card_tweets. Then we use a v-if directive inside a child section to check if there are tweets in the tweets array v-if="tweets.length > 0".

Inside this section, we can loop over the tweets array using a v-for="(tweet, index) in tweets" directive. After that we use in-template expressions to show the tweet text property {{tweet.text}} and the data {{tweet.date}}.

After the section we can use a v-else directive to show a message in case there are no tweets stored inside the tweets array <div v-else>No tweets to show</div>. Done.

Now there's one last thing we need to do, and that is to figure out what to do to remove tweets from the list.

But when the user refreshes the page, everything is gone. So we need to work with the localStorage once again to repopulate our tweets array from it before rendering the root element.

Inside the created lifecycle hook we will now write some code to parse the tweets and save them back in the tweets property:

/* Parse all tweets from the local storage  */
if(localStorage.getItem("simple_tweet_tweets")) {
    console.log("There is a list of tweets");
    this.tweets = JSON.parse(localStorage.getItem('simple_tweet_tweets'))
}else {
    console.log("No tweets here");
}

Here we used the localStorage API to first check if there was a key called simple_tweet_tweets. If so, we grab the tweets property using this.tweets and assign to it the content of the localStorage. But we parse the string back to JSON with JSON.parse so we write this.tweets = JSON.parse(localStorage.getItem('simple_tweet_tweets')).

Now everything works. After we refresh the page, the tweets are still there. Let's move on. In the next step, we will add a method to remove tweets from the list.

You can watch the video on YouTube here or at the end of this section to review what you've learned.

How to remove tweets

Inside the div that contains the tweet message, we can add another div to show a link and a trash icon. This lets the user click it and remove that tweet.

<div class="tweet_remove" @click="removeTweet(index)">
    <span class="remove">Delete this tweet <i class="fas fa-trash fa-xs fa-fw"></i></span>
</div>

Here we simply used a v-on short syntax directive on the div and invoked a method removeTweet(index), passing to the method the element index so that we know what to remove.

Let's build our removeTweet method now:

removeTweet(index){
    let removeIt = confirm("Are you sure you want to remove this tweet?")
    if(removeIt) {
        this.tweets.splice(index, 1);
        /* Remove the item also from the local storage */
        localStorage.simple_tweet_tweets = JSON.stringify(this.tweets)
    }
}

This bit of code is pretty straightforward. Our method accepts an index that represents the position of the tweet object in the array obtained from the v-for directive when the method is invoked.

We then create a variable to ask the user to confirm that they want to delete the tweet. We used the confirm function for that.

If the value of the removeIt variable is true, then we execute the code and use this.tweets.splice(index, 1) to remove the tweet from the array using its index.

Finally we update the localStorage value by assigning to is the new array using the localStorage.simple_tweet_tweets = JSON.stringify(this.tweets).

Final Code

Our code is now complete. You can find the final code below or inside the repository here: [https://bitbucket.org/fbhood/simple-tweet-app/src/master/].

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 2 Hello World</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
        integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
    <!-- Axios CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js"
        integrity="sha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ=="
        crossorigin="anonymous"></script>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
        integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>

<body>
<div id="app">
    <div class="card">
        <i class="fab fa-twitter fa-lg fa-fw"></i>
        <!-- Register an account -->
        <div class="register" v-if="!registered">
            <button form="register" type="submit">Register</button>
            <h2>Create your account</h2>
            <form id="register" v-on:submit.prevent="registerAccount">
                <div class="form_group">
                    <label for="name">Name
                        <span> {{ name.length + '/' + max_length }}</span>
                    </label>
                    <input type="text" v-model="name" :maxlength="max_length" required>
                </div>
                <div class="form_group">
                    <label for="email">Email
                        <span> {{ email.length + '/' + max_length }}</span>
                    </label>
                    <input type="email" v-model="email" :maxlength="max_length" required>
                </div>
                <div class="form_group">
                    <label for="password">Password
                        <span> {{ password.length + '/' + max_pass_length }}</span>
                    </label>
                    <input type="password" v-model="password" :maxlength="max_pass_length" required>
                </div>
            </form>


            <div v-if="error.length > 0"> {{error}}</div>
        </div>
        <!-- Add tweet -->
        <div class="tweetBox" v-else>
            <h2>Welcome {{ userData.name }} write your first Tweet</h2>
            <form v-on:submit.prevent="sendTweet">
                <div class="form_group">
                    <label for="tweet">
                        Send your tweet
                        <span> {{ tweetMsg.length + '/' + max_tweet }}</span>
                    </label>
                    <textarea name="tweet" id="tweet" cols="30" rows="10" v-model="tweetMsg" maxlength="200"></textarea>
                </div>
                <button type="submit">Tweet</button>
            </form>

        </div>

    </div>
    <!-- Show all tweets -->
    <div class="card_tweets">
        <section class="tweets" v-if="tweets.length > 0">
            <h2>Tweets</h2>
            <div class="tweetMsg" v-for="(tweet, index) in tweets">
                <p>
                    {{tweet.text}}
                </p>

                <div class="tweetDate">
                    <i class="fas fa-calendar-alt fa-sm fa-fw"></i>{{tweet.date}}
                </div>
                <div class="tweet_remove" @click="removeTweet(index)">
                    <span class="remove">Delete this tweet <i class="fas fa-trash fa-xs fa-fw"></i></span>
                </div>

            </div>

        </section>
        <div v-else>No tweets to show</div>
    </div>
</div>
<script src="./main.js"></script>
</body>

</html>

JavaScript file

let app = new Vue({
    el: '#app',
    data: {
        userData: {},
        usersID: 0,
        name: "",
        email: "",
        password: "",
        max_length: 25,
        max_pass_length: 16,
        max_tweet: 200,
        error: "",
        registered: false,
        tweetMsg: "",
        tweets: []
    },

    methods: {
          registerAccount(){

              if (this.name.length > 0 && this.name.length <= this.max_length && this.email !== "" && this.password !== "" ) {

                    this.userData.id = ++this.usersID,
                    this.userData.name = this.name,
                    this.userData.email = this.email,
                    this.userData.password = this.password
                    this.registered=true;



              } else {
                  this.error = "Complete all the form fields"
              }

            /* Add registration data to the local storage */
            localStorage.setItem('simple_tweet_registered', true)
            /* Add the whole userData object as JSON string */
            localStorage.setItem('simple_tweet_registered_user', JSON.stringify(this.userData))

            /* Clear the registration inputs */
            this.name = "";
            this.email = "";
            this.password = "";
        }, 
        sendTweet(){
            this.tweets.unshift(
                {
                    text: this.tweetMsg,
                    date: new Date().toLocaleTimeString()
                }

            );
            this.tweetMsg = "";

            //console.log(this.tweets);
            stringTweets = JSON.stringify(this.tweets)
            //console.log(stringTweets);
            localStorage.setItem('simple_tweet_tweets', stringTweets)
        },
        removeTweet(index){
            let removeIt = confirm("Are you sure you want to remove this tweet?")
            if(removeIt) {
                this.tweets.splice(index, 1);
                /* Remove the item also from the local storage */
                localStorage.simple_tweet_tweets = JSON.stringify(this.tweets)
            }
        }
    },
    created(){
        /* Check if the user is registered and set the registered to true */
        if(localStorage.getItem("simple_tweet_registered") === 'true'){
            this.registered = true;
        }

        if(localStorage.getItem('simple_tweet_registered_user')) {
            this.userData = JSON.parse(localStorage.getItem('simple_tweet_registered_user'))
        }
        /* Parse all tweets from the local storage  */
        if(localStorage.getItem("simple_tweet_tweets")) {
            console.log("There is a list of tweets");
            this.tweets = JSON.parse(localStorage.getItem('simple_tweet_tweets'))

        }else {
            console.log("No tweets here");
        }
    }

});

We are ready to move forward with our Vue journey. Now it's time to learn about components.

Vue Component Basics

A component is a reusable block of code that represents a specific element on the page.

Every web page and web or mobile application can be divided into components. Starting from the main sections we can further divide these into smaller bits and make sub-components.

Every component is reusable and is made of dedicated HTML, CSS, and JavaScript code.

We can use components to organize our code and build complex layouts that are easily maintainable.

Looking at a simple web page, it is usually made of a header, the main content area, and a footer. But each of these three pieces can be sub-divided into smaller parts.

For instance, a header can have the main navigation menu, a secondary menu, and a hero image. The same is true for the main and footer areas.

You can watch the video on YouTube here or at the end of this section to review. You can also view the repository here.

To get started with components, we first need to learn how to register them, pass them data, and then we need to learn how to use them. Here are some great overviews of these topics to get you started:

• Register a component (https://vuejs.org/v2/guide/components-registration.html)
• How to use Props (https://vuejs.org/v2/guide/components-props.html)
• How to use Slots (https://vuejs.org/v2/guide/components-slots.html)
• How the Data object works inside a component
• Child Component Events (https://vuejs.org/v2/guide/components-custom-events.html)
• Dynamic Components ( https://vuejs.org/v2/guide/components-dynamic-async.html)

How to register a component in Vue

To register a component, we need to use the component method on the Vue() object. After calling this function we need to define a template property with some markup specific to the component.

Vue.component('component-name', {
    // component properies here
});

Every component needs to have a template property at least – without it a component doesn't make much sense.

So the next step is to define a template property and pass to it a string literal with some HTML tag:

Vue.component('test-component', {
    // component properies here
    template: `<p>I am a component</p>`

});

Now we can use our component multiple times inside our main HTML file by using its name as it was a standard HTML tag.

<div id="app">
  <test-component></test-component>
</div>