Frontend to backend connections
Stephen Onyi Uchidiuno
Posted on August 3, 2024
As a web app developer, one thing I find interesting is linking the frontend wing of my or an application to the backend wing of my application. As a developer who has always loved working with JavaScript; JavaScript has greatly evolved over the years. Linking the frontend of an application to the backend of an application can be done by setting up channel between the client-side of your code (which is usually in HTML, CSS, and JavaScript) and the server-side your code (which can be written in a number of languages ranging from either Node.js, Python, Ruby, Java and the likes just to name a few). Below I will list the easy steps I took when I started out as a web developer who works on both the backend side of an application and the frontend side of an application.
- I usually prefer setting up my Backend First, and by this I get a backend server that provides APIs for my frontend to communicate with. A basic example for me when am developing an app using MERN stack is using Node.js with Express:
My basic Server Setup is (Node.js + Express):
Install Node.js and npm (Node Package Manager).
Create a new project and install Express:
How do I do this? I first create a folder in my project folder.
mkdir myProjectApp
cd myProjectApp
npm init -y
npm install express
Then I Create a simple server or a JavaScript file (e.g., server.js):
javascript
Copy code
const express = require('express');
const app = express();
const port = 3000;
// Middleware to parse JSON
app.use(express.json());
// Example endpoint
app.get('/api/data', (req, res) => {
res.json({ message: 'Hello from the backend!' });
});
app.listen(port, () => {
console.log(Server running at http://localhost:${port});
});
Run the server:
node server.js
- Then I set up my frontend. The Frontend will typically be an HTML file with JavaScript codes for making the preferred API calls.
I Create an index.html file:
html code below
<!DOCTYPE html>
Frontend-Backend Interaction
Frontend to Backend Communication
Fetch Data from Backend
<script src="script.js"></script>
Create a script.js file for your JavaScript:
javascript
type the code below
document.getElementById('fetchButton').addEventListener('click', () => {
fetch('http://localhost:3000/api/data')
.then(response => response.json())
.then(data => {
document.getElementById('response').innerText = data.message;
})
.catch(error => {
console.error('Error fetching data:', error);
});
});
Running the Application
Ensure your backend server is running, then open index.html in a browser. Click the button to fetch data from the backend, and you should see the response displayed on the page.Advanced: Using Frameworks and Libraries
For more complex applications, you might use frameworks and libraries on both ends:
Frontend: React, Vue.js, Angular, etc.
Backend: Express (Node.js), Django (Python), Rails (Ruby), etc.
Example with React (Frontend):
Create a React application using Create React App:
type the code below
npx create-react-app my-react-app
cd my-react-app
Replace the content of App.js:
javascript
type the code below
import React, { useState } from 'react';
function App() {
const [message, setMessage] = useState('');
const fetchData = () => {
fetch('http://localhost:3000/api/data')
.then(response => response.json())
.then(data => {
setMessage(data.message);
})
.catch(error => {
console.error('Error fetching data:', error);
});
};
return (
Frontend to Backend Communication
Fetch Data from Backend
{message}
);
}
export default App;
Run the React application:
Type the code below
npm start
Now, your React app should be able to fetch data from the backend server when you click the button.
Summary
Connection between the frontend and backend using JavaScript can be done simply by using the steps above. The backend server exposes APIs, and the frontend makes HTTP requests to these APIs to fetch or send data. This approach can be adapted to various frameworks and environments based on the specific requirements of your project.
Posted on August 3, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
