toc

Setting up our Express API

Setting up a API to send requests to.

First, we’re going to set up an Express API in Replit. If you don’t have one already, the first thing you’ll need to do is create a Replit account. Next, you’ll need to create a new Repl.

Creating a Replit

For this tutorial, you’ll need to select Node.js as the language, and can name the Repl anything you want. We chose to name our Repl evervault-twilio.

Create a Replit Account

Creating an Express.js server

Now you’ve created the Repl, you’ll need to import Express, create an application, and start it as a server. You can do this by copying the code below into the index.js file in the Repl:

javascript
// Include Express.js, a library for easily building APIs in Node.js
const express = require('express');
// Create an Express.js application
const app = express();
// Serve static files from the public folder (that we will create later)
app.use(express.static('public'));
// Return middleware that only parses POST JSON requests and only looks at requests where the Content-Type header matches the type option
app.use(express.json());
// Start the Express.js server on port 3030
app.listen(3030, () => {
console.log('Server listening on port 3030');
});

If you click the Run button in Replit, the Console will log the message:

Console
Server listening on port 3030.

Creating a form to collect a name and a phone number

It’s now time to create a public folder and an index.html file within it. In the index.html file, we’re going to create a simple form for collecting a name and a phone number from a user. Here is the HTML code:

html
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
type="text/css"
href="https://assets.evervault.com/css/name-phone-form.css"
/>
</head>
<body>
<h2>Send an SMS</h2>
<!-- This is the form with two fields (name and phone) and a button for submitting the form. -->
<form id="form">
<p><input id="name" type="text" placeholder="Name" /></p>
<p><input id="phone" type="text" placeholder="Phone number" /></p>
<p><button class="submit">Send SMS</button></p>
</form>
<!-- These are the messages which are shown in the UI depending on whether the form was successfully or unsuccessfully sent -->
<div id="pill-container">
<span id="success" class="hidden">SMS successfully sent!</span>
<span id="failure" class="hidden">SMS failed to send.</span>
</div>
</body>
<script>
// When the form is submitted, run this code
// to handle sending the data as JSON to the API
document
.getElementById('form')
.addEventListener('submit', async (event) => {
// Override the default browser settings for handling forms
event.preventDefault();
// Send a POST request to https://{this URL}/submit with the name and phone number encoded in JSON
const res = await fetch('/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: document.getElementById('name').value,
phone: document.getElementById('phone').value,
}),
});
// Take the response from the API and parse it as JSON
const data = await res.json();
// Show feedback message for both successful and failure requests
if (data.success === true) {
document.getElementById('success').classList.remove('hidden');
document.getElementById('failure').classList.add('hidden');
} else {
document.getElementById('success').classList.add('hidden');
document.getElementById('failure').classList.remove('hidden');
}
return false;
});
</script>
</html>

Now if you run the application you should see a simple form inside the preview window.

Phone Form

Processing form requests

The form will not work yet because we still need to give our server the ability to process requests arriving on the /submit route. The code you'll need to add:

javascript
// Define a route and a handler function for that route
app.post('/submit', async (req, res) => {
try {
// Extract name and phone from the JSON the user sends from the form
const { name, phone } = req.body;
console.log('Sending SMS for', { name, phone });
return res.json({ success: true });
} catch (err) {
return res.json({ success: false });
}
});
// Start this app as an Express.js server on port 3030
app.listen(3030, () => {
console.log('Server listening on port 3030');
});

Your index.js file should now look like this:

javascript
// Include Express.js, a library for easily building APIs in Node.js
const express = require('express');
// Create an Express.js application
const app = express();
// Serve static files from the public folder (that we will create later)
app.use(express.static('public'));
// Return middleware that only parses POST JSON requests and only looks at requests where the Content-Type header matches the type option
app.use(express.json());
// Define a route and a handler function for that route
app.post('/submit', async (req, res) => {
try {
// Extract name and phone from the JSON the user sends from the form
const { name, phone } = req.body;
console.log('Sending SMS for', { name, phone });
return res.json({ success: true });
} catch (err) {
return res.json({ success: false });
}
});
// Start this app as an Express.js server on port 3030
app.listen(3030, () => {
console.log('Server listening on port 3030');
});

Now if you run the application and submit data to the form (i.e. submit your name and phone number), you should see the following output in the console:

Console
Sending SMS for { name: 'Claude Shannon', phone: '+1 (415) 091-1945' }

You’ll notice that this log is showing your phone number in plaintext. This means that if your server is compromised, the data breached would be unencrypted and readable data. To avoid this, you can encrypt data before it touches your server — which is where Evervault Relay comes in. Before we integrate Relay, let’s summarize where we are. We have:

  1. Created an Express.js server (index.js),
  2. Created a HTML form for collecting a name and a phone number from a user (index.html), and
  3. Connected your form to your server.

This will be a useful reference for understanding how the architecture of a standard, plaintext app differs from the architecture of an encrypted app built with Evervault.


Was this page useful?