DEV Community

Cover image for Condour - A simple way to interact with the backend from the frontend
Rajaneesh R
Rajaneesh R

Posted on • Updated on

Condour - A simple way to interact with the backend from the frontend

Many developers, many programming languages, many ideas, but ONLY one way out.

I know many nodejs developers struggle to give up nice packages they used on the backend, when developing the frontend for the project (This includes me).

Making API request and being vulnerable to attackers and let them access your backend data, can be dangerous, and to make things easy Condour has a easy solution...

Install express, body-parser and cors

This will be the backend to run the code.

// server.js
// Imports
const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
// Extra modules
const fs = require("fs-extra");
const nanoid = require("nanoid");

const server = express();
server.use(bodyParser.json());
server.use(cors({ origin: "*" }));
server.use(express.static("public"));

server.post("/condour", async (req, res) => {
  const body = res.body.code
  res.send(await eval(`try{${body}}catch(error){error}`));
});
server.listen(3500, () => {
  console.log("Server running on http://127.0.0.1:3500");
});
Enter fullscreen mode Exit fullscreen mode

This will be your frontend code.

// index.html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js" crossorigin="anonymous" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" crossorigin="anonymous" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/nigelrex/condour@main/condour.js" crossorigin="anonymous" type="text/javascript"></script>
  </head>
  <body>
    <!-- The rest of your project  -->
    <script>
        condour().request("nanoid.nanoid()"); // returns "yBfuyiHb209wWnAazTT0a" from the backend
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now any use of package must be imported in the backend server file.

This is the most simple way to communicate with your backend.

Condour Options:

condour({
  host: "https://your-server/your-path-to-request", // Defaults to /condour
  disableDevTools: true // This is to disable the devtools to open and let attackers access your backend. Defaults to true
});
Enter fullscreen mode Exit fullscreen mode

The disableDevTools will not allow users to open your backend code, by disabling the dev tools.

Thanks for following up. Enjoy your dev time.

Have questions or want to report a bug or want to suggest??

Discord: https://discord.com/invite/ATrvrZtSqZ
Github: https://github.com/r-rajaneesh/condour

Top comments (0)