If you know JavaScript in the browser, full-stack development means learning the server side too – databases, APIs, and running JavaScript on the server. Where to start.
Understanding full-stack development
Full-stack development covers both front-end (what users see and interact with) and back-end (server logic and databases). As a JavaScript developer you already know the client side. The new part is server-side programming and data storage.
Server-side JavaScript with Node.js
Node.js lets JavaScript run on the server, so you can use the same language for both front-end and back-end code.
Getting started with Node.js
Download Node.js from the official website. Once installed, you can run JavaScript files on your server.
Example – simple Node.js server:
const http = require('http');
const server = http.createServer((req, res) => {
res.end('Hello from the server!');
});
server.listen(3000, () => {
console.log('Server listening on port 3000');
});This creates a basic web server on port 3000 that responds with a simple message.
Express.js: simplifying back-end development
Express.js is a framework on top of Node.js. It makes building web applications much less boilerplate-heavy.
Example – Express.js server:
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Hello from Express!');
});
app.listen(3000, () => {
console.log('Express server running on port 3000');
});Databases: storing and retrieving data
Full-stack work involves databases. SQL databases (MySQL, PostgreSQL) and NoSQL databases (MongoDB) are both common choices.
Example – connecting to a MongoDB database:
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/my_database', {
useNewUrlParser: true,
useUnifiedTopology: true
});
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
console.log('Connected to the database');
});Front-end meets back-end
The useful part of full-stack work is connecting the two sides – fetching data from your server and displaying it in the browser.
Example – fetching data with JavaScript:
fetch('http://localhost:3000/data')
.then(response => response.json())
.then(data => {
console.log(data);
});Learning full-stack frameworks
Stacks like MEAN (MongoDB, Express.js, AngularJS, Node.js) and MERN (MongoDB, Express.js, React, Node.js) bundle common technologies together. Useful once you understand the individual pieces.
Version control with Git
Git is essential for managing your codebase, collaborating with others, and tracking changes. You will want it on any full-stack project.
Building a full-stack project
Start small – a blog or a to-do list – and add features as you go. User authentication, a database connection, and CRUD (Create, Read, Update, Delete) operations are good milestones.
Keep learning and experimenting
Full-stack development covers a lot of ground. Learn one piece at a time, follow best practices, and try building things even when you are not sure you are ready.
Moving from browser JavaScript to full-stack means you can build complete applications end to end. It takes time, but you already have a head start on the language.