JSValidator - JavaScript Code Validator

The JSValidator is a service that uses the JSHint API to check your JavaScript code for errors and potential problems. The service is a code quality tool that useful for everyone who wants to validate their JavaScript code regularly. It also can be used to check the code of Code Institute students' projects before they submit them for review.

Technologies Used

The project is built using the following technologies:

• HTML5
• CSS3
• JavaScript
• CI JSHint API
• Bootstrap 5.0.2
• Font Awesome
• jQuery
• Netlify Serverless Functions
• Node.js

Deployment

Live link of the JSValidator: https://js-validator.netlify.app/

The JSValidator is a static web service that deployed on Netlify from GitHub and using Netlify Serverless Functions to hide the JSHint API key from the public

The Simple implementation of the JSValidator with exposed API key and withouth using the back-end functions and jQuery can be found on the branch no-netlify. This branch is not deployed.

How to receive and use the CodeInstitute JSHint API?

The JSValidator uses the JSHint API which allows developer to run JSHint on your code without having to install anything.

The CodeInstitute JSHint API is free but it does require an API key, so you’ll need to complete the sign-up process.

The key is only available to current students of Code Institute, and the API will check that before giving you the key. All API keys are valid for a period of 1 year.

To receive a key go to https://ci-jshint.herokuapp.com/ and type your email address that you used when you signed up for the Code Institute course. You will be issued with a key if you are a current student of Code Institute.

Usage Instructions can be found on the same page under the registration form.

Netlify Serverless Functions

Hide the JSHint API Key using Netlify Serverless Functions The API key is sensitive information and should not be exposed to the public. To hide the API key from the public, I used Netlify Serverless Functions to call the JSHint API. The Netlify functions are a way to run server-side code without having to manage or maintain a server. External APIs can be integrated with a serverless function to grab data, that can then be used in the response.

In this case the function make a request to the JSHint API using axios on a server side without exposing our API key and returns the response in form of a JSON object with status code and body. Then the client side fetches the response using fetch() and displays the result to the user.

To use the Netlify Serverless Functions, you need to create a Netlify account and link it to your GitHub repository. You can find more information about the Netlify Serverless Functions by following the links:

• Intro to Serverless Functions
• How to Hide API Keys in Frontend Apps using Netlify Functions

Netlify Requirements

Files:

The Netlify Serverless Functions require the following files:

• netlify.toml - Netlify configuration file
• package.json - Node.js package file
• netlify/functions/ - directory for the Netlify Serverless Functions

Dependencies:

The Netlify Serverless Functions require the following dependencies:

• netlify-cli - Netlify CLI
• netlify-lambda - Netlify Lambda
• dotenv - loads environment variables from a .env file
• axios - Promise based HTTP client for the browser and node.js

Run the development Node.js server to test the Netlify Serverless Functions locally:

netlify dev

Credits

• A simple implementation of this service was developed based on the walkthrough project of the Code Institute Full Stack Software Development course.
• Netlify Serverless Functions were implemented using the How to Hide API Keys in Frontend Apps using Netlify Functions tutorial.