PERN Stack and its Deployment
Do you also have a dream of having a fault-tolerant database?
Do you want to learn the database that supports geographic objects and has low maintenance administration for both embedded and enterprise use?
Well, then, PostgreSQL is here to give you all sorts of features ; when combined with other web technologies like React, Express and Node, it may also be used to create a web application with a strong database!
Dive into this article to know more about these technologies
PERN Stack: This stack consists of PostgreSQL, Express, React and Node.js. Combining these technologies, one can build a full-stack web application with CRUD operations. Everyone must have heard about MERN Stack which is basically a JavaScript Stack for deployment of full-stack web development and contains 4 technologies, namely: MongoDB, Express, React and Node.js. But PostgreSQL seems to be gaining more popularity because it offers wide support for NoSQL feature, transactional and standard compliant. It is written in C language.
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:
First one for learning more about PERN Stack and how to develop the application
Second one for deploying your application to heroku
