Learn the PERN Stack by building a web app - Full video course
The PERN stack consists of PostgreSQL, Express, React, and Node.js. These technologies can be combined to build a full-stack web application with CRUD operations.
We've released a full course on the freeCodeCamp.org YouTube channel that teaches how to use the PERN stack. The course was developed by Henry Ly from The Stoic Programmers.
Henry will demonstrate how to use the PERN stack to build a Todo list. By end of the course, you will have a better understanding how the technologies work together and you will be prepared to create more complicated applications.
Here is what this course covers:
- Starting Our Server
- Creating PostgreSQL Database and Table
- Connecting Database and Server
- Building Routes with PostgreSQL Queries
- Discussing Restful APIs
- Setting Up the Client Side (React)
- Building The Input Todo Component
- Building The List Todo Component
- Building the Delete Button
- Building the Edit Todo Component
- Reviewing the PERN stack
1. PostgreSQL (Object-Relational Database)
PostgreSQL is a powerful, open source object-relational database management system (ORDBMS) with an emphasis on extensibility and standards compliance that uses and extends the SQL language combined with many features that safely store and scale the most complicated data workloads. PostgreSQL is ACID-compliant, transactional, that stores the data in the tabular format and uses constraints, triggers, roles, stored procedures and views as the core components.
Why use PostgreSQL?
- Free and open source.
- Available in multiple languages.
- Highly Extensible.
- Protects data integrity.
- Builds fault-tolerant environments.
- Robust access-control system
- Supports international characters.
- Apple uses PostgreSQL!
Writing queries in PostgreSQL
- Creating students table
CREATE TABLE students (id INT, name VARCHAR (100));- Inserting a record into students table
INSERT INTO students VALUES (1, ‘Geeks’);- Reading records from the students table
SELECT * FROM students;
- Updating records in students table
UPDATE students SET name="Geeks" WHERE id = 1;- Deleting records from students table
DELETE FROM students WHERE id = 1;2. Express (Back-End Framework)
It is a web application framework for Node.js. Being a free and open software, it is used for building web applications and specially APIs. Express provides a thin layer of fundamental web application features, without obscuring Node.js features that you already know.
Why use Express?
- Provides a robust set of features for both web and mobile applications
- Makes back-end code easier and simpler to write.
- Supports many middleware.
- Minimal and Flexible web application framework.
- Creating efficient and robust API is quick and easy.
- Allows you to define an error handling middleware.
Using it:
- Create a new folder and cd into it using command line. Then type the following code to initialize a package.json file. Click Enter by accepting the default settings.
npm init
- Then write the following command to install express.
npm i express — save
- Write the following code in the index.js as a sample.
const express = require(“express”);const app = express();app.use((req, res) => {console.log(req.headers);res.setHeader(‘Content-Type’, ‘text/html’);res.end(‘<html><body><h1>Hey there, Welcome to Geeks!! </h1></body></html>’);});app.listen(3000, function(){console.log(“Server is running at port 3000”);});
- Then, write the following code in the command line
node index.js
- Then, open the localhost:3000 in the browser and you will see the following result
3. React (Front-End Framework)
React is basically a JavaScript library for building user interfaces. It is easy, efficient and painless way to create Interactive UIs. It is maintained by Facebook and a community of individual developers and companies. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes and for this reason only, it is used for developing single-page application or mobile applications.
Why use React?
- Virtual DOM in ReactJS makes user experience better and developer’s work faster.
- It guarantees stable code.
- React allows its components to be reused saving time and effort.
- Provides high performance.
- Provide the feature of Virtual DOM.
- SEO friendly!
Using it:
- First of all, install the react app by using following code
npm install create-react-app –global- After that, make a folder and cd into that folder using command line and create a new react app by using the following code:
create-react-app app_name- After that, go into that folder and in src folder, you will see App.js file. Paste the following code in App.js
function App () {return (<div> <h1> Welcome to Geeks! </h1> </div>)}
- Then, use the below code for running your application.
npm start
- Ultimately, you will get the following output:
4. Node.js (JavaScript runtime environment)
Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine for developing server-side and networking applications. Being an asynchronous event-driven JavaScript runtime, it is used to build fast and scalable network applications. Node.js is free and open source server environment that runs on many platforms.
Why Node.js?
- Provides event-driven and asynchronous features which makes it lightweight and efficient.
- No buffering and thus, is very fast.
- Highly Scalable.
- Highly extensible.
- Provides advantage of caching.
- Handles thousands of concurrent connections with a single server.
- Provides vast number of libraries.
Using it:
- Make a folder and cd into that by the using command line and then, initialize the node.js application by running the following code
npm init- Create a file named index.js and run the following code in that:
console.log(“Hello, this is Geeks website”)- Now execute the following command in command line:
node index.js- After that, you will see the following output in your browser:
Hello, this is Geeks website
Creating a web application example:
- First of all install npm and postgresql from their official sites. After installation, we would be able to access our database by using pgAdmin which will get installed with the postgreSql.
- Initialize npm using the following command:
npm init- Install postgreSql by following command:
npm i express pg- Then, in index.js, type the following sample code:
const express = require('express')const app = express()app.get('/', (req, res) => {res.status(200).send('Hello World, Welcome to my blog!');})app.listen(port, () => {console.log(`App running on port 3000.`)})
- In some other file, let’s say model.js, type the following code:
const Info = require('pg').Infoconst info = new Info({user: 'user',host: 'localhost',database: 'database_name',password: 'root',port: 4002,});
- After this, you can import the Data in index.js by:
const data_model = require('./model')- To use with react, type the following into command prompt:
npm create-react-app react-postgres- In app.js, extract the data by following:
function getModel () {fetch('http://localhost:3000').then(response => {return response.text();}).then(data => {setModel(data);});}
How to deploy your PERN Stack Application:
PERN stack Web Application are being deployed to Heroku. Here is the list of all steps to be followed:
- Install Heroku from its official website
- Create project using following command:
heroku create pern-stack-firstapp- Add Heroku database addon using following command:
heroku addons:create heroku-postgresql:hobby-dev -a pern-stack-firstapp- To access Heroku database use following command:
pg:psql -a pern-stack-firstapp- Then git add and git commit all the changes using following command:
git add.git commit –m “First Commit”
- After that run heroku using following command:
git:remote -a pern-stack-firstapp- To push all the changes to heroku, run the following command:
git push heroku master- To open the app in your browser window, run:
heroku openThen you will be able to see your firstapp in your browser window.
For more detailed information you can visit the following sites: