How to combine JavaScript with No Code! Editor X NodeJS

Welcome to the exciting world of combining JavaScript with No Code, using Editor X and Node.js! Are you curious about how to pass data, save state, and make API calls in these two powerful platforms? You're in the right place! We'll show you how we used Editor X and Node.js to create and integrate powerful features in our live learning community at Live Learning Editor X.

Live Learning Editor X hosts monthly No Code Design Challenges with exciting prizes, while offering guidance and mentorship in building design businesses and furthering your career. So, let's jump right in and learn how to make the most of combining JavaScript with No Code on Editor X and Node.js.

Getting Started with Editor X and Node.js

In a previous video, we created an instance of Node.js, complete with a few API calls that we can run — one to show whether the server is online, and another to perform some calculations. However, we haven't yet fully integrated them into the Editor X platform. So, today, we'll dive into how to use Editor X's Velo coding platform for more advanced functionality, such as storing states and performing location queries.

Creating a Click Handler with Editor X

The first thing we'll do is grab a button in Editor X and create an `onClick` handler. We have already done this in a previous video, and we can reuse the code in our `masterPage.js` file. Here, we'll create a click handler that performs an action, taking users to another page:

```javascript

import { WixLocation } from 'wix-location';

$w.onReady(function () {

$w('#button').onClick((event) => {

WixLocation.to('/hourly');

});

});

```

The `import { WixLocation } from 'wix-location';` line imports the Wix Location library, allowing us to create clickable events that take users to different pages. The `WixLocation.to('/hourly');` line specifies the page URL the user is directed to when the button is clicked.

Integrating Node.js API Calls with Editor X

In order to fully integrate Node.js API calls into Editor X, we need to do the following:

1. Create an HTTP function to use as an API with Node.js.

2. Invoke the API from within Editor X using Velo.

Let's start by creating an HTTP function in our Node.js app. For this, create a new file named `api.js` and add the following code:

```javascript

const express = require('express');

const router = express.Router();

router.get('/isOnline', (req, res) => {

res.status(200).send({ status: 'online' });

});

router.post('/calculate', (req, res) => {

const { num1, num2 } = req.body;

const result = num1 + num2;

res.status(200).send({ result });

});

module.exports = router;

```

Next, we need to include this API router in our main Node.js app file (`app.js`), so it can be invoked:

```javascript

const apiRouter = require('./api');

app.use('/api', apiRouter);

```

Now, we're ready to invoke the API from Editor X using Velo.

Invoking the API with Velo

In Editor X, we'll use the `fetch` function provided by Velo to make HTTP requests to our Node.js API. First, let's import `fetch`:

```javascript

import { fetch } from 'wix-fetch';

```

Now, we're ready to make requests to our Node.js API. The following code demonstrates how to query the `/isOnline` endpoint and display the result in a text element:

```javascript

$w.onReady(async function () {

const response = await fetch('https://my-nodejs-app.com/api/isOnline');

const data = await response.json();

$w('#statusText').text = data.status;

});

```

Similarly, you can call the `/calculate` endpoint and display the result:

```javascript

$w.onReady(async function () {

const requestBody = { num1: 10, num2: 20 };

const response = await fetch('https://my-nodejs-app.com/api/calculate', {

method: 'post',

body: JSON.stringify(requestBody),

headers: {

'Content-Type': 'application/json'

}

});

const data = await response.json();

$w('#resultText').text = data.result;

});

```

With just a few simple steps, we've successfully combined JavaScript and No Code, passing data between Editor X and Node.js, as well as creating an onClick handler, making API calls, and storing states!

Wrapping Up

Combining JavaScript with No Code by using Editor X and Node.js can unlock a world of powerful features and capabilities. In this blog post, we've only scratched the surface of what you can accomplish with these platforms. If you loved this content, be sure to join our Live Learning Editor X community for more learning, mentoring, and fun with No Code Design Challenges!

So, go forth and create amazing things, and remember: with JavaScript, No Code, Editor X, and Node.js, the sky's the limit. Happy coding!