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.
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
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.
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.
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:
The Netlify Serverless Functions require the following files:
netlify.toml- Netlify configuration filepackage.json- Node.js package filenetlify/functions/- directory for the Netlify Serverless Functions
The Netlify Serverless Functions require the following dependencies:
netlify-cli- Netlify CLInetlify-lambda- Netlify Lambdadotenv- loads environment variables from a.envfileaxios- 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
- 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.