
-   [Setting up our application](#setting-up-our-application)
    -   [Setting up the NodeJS Server](#setting-up-the-nodejs-server)
    -   [Setting up React](#setting-up-react)
    -   [Setting up PostgreSQL](#setting-up-postgresql)
    -   [Docker Compose Configuration](#docker-compose-configuration)

Deploying Full-Stack PERN (PostgreSQL, Express, React, Node) applications can be
difficult. You have to have a decoupled front-end which means you have to deploy
the front-end and back-end separately. Docker can make deploying so much easier.
We can have a single docker container, to deploy your full-stack application.
So, lets build ourselves a simple application! What we will build is a Personal
Journal. Diary if you will.

## Setting up our application

To start we will create a new directory. I will call it `personal-journal` .
After you create that directory we will `cd` into the newly created directory.
Then make three more directories `client` , `server`, and `postgres`. We will
actually start with setting up the node server.

```bash
mkdir personal-journal
cd personal-journal
mkdir client server postgres
cd server
```

### Setting up the NodeJS Server

Now that we have navigated to the directory we shall initialize npm in our sever
folder.

```bash
npm init
```

Following the prompts we now have node in our project. Now, lets install some of
our dependencies.

```bash
npm install express cors pg knex
```

Now that we have our dependencies lets setup up our node server, lets set up our
`server.js` file.

```bash
touch server.js
```

I personally use VSCode as my editor of choice, but you can do this with atom or
your editor of choice. Just `cd` our of the server into the application
directory by doing the following.

```bash
cd ..
code .
```

Now VSCode should open and you can start to create your server. Lets start by
opening our server.js file. Lets make sure everything is working by putting this
in your `server.js`

```js
// import dependencies
const express = require('express');
const cors = require('cors');

// Start Express
const app = express();

// Req Obj as JSON
app.use(express.json());
// CORS Header to avoid errors
app.use(cors());

app.get('/', (req, res) => {
	res.send('Server is working!');
});

app.listen(5000, () => {
	console.log('Server Is Running!');
});
```

Now if you run the command `node server.js ` and go to `http://localhost:5000/`
You should see "Server is working!" in the browser.

![node-is-working](node-is-working.png)

Now lets create some dummy data. This is how I want to the post object to be.
However, you can create whatever.

```js
// Dummy Data
const dummyJournalPost = {
	title: 'Coding is great',
	content: 'There are so many ways to use Javascript, I have had a blast.',
	date: '08-29-2021',
};
```

Now lets create a route that will read the dummy data.

```js
app.get('/posts', (req, res) => {
	const post = dummyJournalPost;
	res.json(post);
});
```

You should have gotten the dummy post returned in your browser.

Now that we have our dummy data returned, lets setup our docker file. First,
create a `.dockerignore` file. Put our `node_modules` in it. So we can ignore
those files. Then lets create our `Dockerfile`

```docker
FROM node:latest

WORKDIR /app/server

COPY ./ ./

RUN npm install

CMD ["/bin/bash"]
```

Now we can actually move on to adding our client. So, lets `cd` back to our root
folder by running the following command.

```bash
cd ..
```

### Setting up React

Now let's create our react app by using `create-react-app`

```bash
npx create-react-app client
```

It will create the react app in our client directory. So lets `cd` there and
remove git from the client.

```bash
cd client
rm -rf .git
```

The reason we remove git from the client is because we want the entire
application as a whole to be tracked in our main `personal-journal` directory.
Now that we have our react frontend installed, let fire it up to make sure it is
working.

```bash
npm start
```

Then you should navigate to `http:localhost:3000/` and you will see the react
homepage.

![cra-homepage](cra-homepage.png)

Now inside of our react app, in the app.js file lets use the React useEffect
hook to get our dummy data displayed on the home page.

```jsx
function App() {
	const [postData, setPostData] = React.useState('');

	React.useEffect(() => {
		const getData = async () => {
			const response = await fetch('http://localhost:5000/posts');
			const post = await response.json();
			setPostData(post);
		};
		getData();
	}, []);

	return (
		<div className='App'>
			<h2>{postData.title}</h2>
			<p>{postData.content}</p>
		</div>
	);
}

export default App;
```

Then you should have the content displayed in the browser. Now that we have our
frontend connected to our backend, let's work on setting up our client for
dockerization. We need a `Dockerfile` and a `.dockerignore` file. With these we
shall set up our .dockerignore by copying our .gitignore file a pasting it into
our .dockerignore file. Now lets create our Dockerfile.

```docker
FROM node:latest

WORKDIR /app/client

COPY ./ ./

RUN npm install

CMD ["/bin/bash"]
```

Now that we have our Dockerfile, we are ready for Docker.

### Setting up PostgreSQL

Postgres is great to setup, all we need to do is `cd` back to our project root
directory then navigate to the `Postgres` folder. Once there lets create a few
files.

```bash
mkdir seed tables
touch Dockerfile deploy_schemas.sql seed/seed.sql tables/posts.sql
```

Now inside of our editor let navigate to our Posgres folder and lets create our
table first. Lets look at our dummy data from earlier. It had the properties
`title`,`content`, and `date`. So our SQL should have that. So in our
`posts.sql` file. Lets build our table.

```sql
BEGIN TRANSACTION;

CREATE TABLE posts (
  id serial PRIMARY KEY,
  title VARCHAR(100) NOT NULL,
  content text NOT NULL,
  post_date timestamp NOT NULL
);

COMMIT;
```

Now in our seeds let's seed some random data into our database. Let's go to our
seed.sql file and add our queries to add some data.

```sql
BEGIN TRANSACTION;

INSERT INTO posts (title,content,post_date) VALUES('JS is really cool', 'While working with JS I have had so much fun.','2021-08-23');
INSERT INTO posts (title,content,post_date) VALUES('TS is better', 'While working with TS I have had so many less errors.','2021-08-25');

COMMIT;
```

Now that we have seed our tables, lets go to our `deploy_schemas` file and put
some set it up so we can deploy our schemas.

```sql
\i '/docker-entrypoint-initdb.d/tables/posts.sql'
\i '/docker-entrypoint-initdb.d/seed/seed.sql'
```

Now that is set up let's create our `Dockerfile` for Postgres.

```docker
FROM postgres:latest

ADD /tables/ /docker-entrypoint-initdb.d/tables/
ADD /seed/ /docker-entrypoint-initdb.d/seed/
ADD deploy_schemas.sql /docker-entrypoint-initdb.d/
```

### Docker Compose Configuration

Now that our `Dockerfile` for our `client`,`server`, and `postgres` are all set
up let's `cd` to the root of our project and create a new file called
`docker-compose.yml`. Now let's build our docker compose in the root of our
project.

```yml
version: '3.3'
services:
    # FrontEnd React
    web:
        container_name: client
        build: ./client
        working_dir: /app/client
        command: npm start
        ports:
            - 3500:3000
        volumes:
            - ./client:/app/client
        networks:
            - pernapp
    # Node Backend
    backend:
        container_name: backend
        build: ./server
        working_dir: /app/server
        command: npm start
        ports:
            - 5000:5000
        environment:
            POSTGRES_URI: postgres://user:pass@postgres:5432/personal-journal
        volumes:
            - ./server:/app/server
            - /app/server/node_modules/
        networks:
            - pernapp
        depends_on:
            - postgres

    # Postgres DB
    postgres:
        environment:
            POSTGRES_USER: user
            POSTGRES_PASSWORD: pass
            POSTGRES_DB: personal-journal
            POSTGRES_HOST: postgres
        build: ./postgres
        volumes:
            - ./postgres/pgdata:/var/lib/postgresql/data
        ports:
            - '5431:5432'
        networks:
            - pernapp
networks:
    pernapp:
        driver: bridge
```

Now lets build our containers by running the `docker-compose` command.

```bash
docker-compose build
```

The first time build will take a little time, then after it is build all we have
to do is run the command `docker-compose up` and we will see our app on
`localhost:3500`

We have a problem, we are not able to display our posts. This is a simple fix.
Let's go to our `app.js` in our client and fix it. When fetching data from our
db it comes in an array. So our `postData` will need to be mapped to display the
data.

```jsx
import React from 'react';
import PostCard from './components/post-card';
function App() {
	const [postData, setPostData] = React.useState('');

	React.useEffect(() => {
		const getData = async () => {
			const response = await fetch('http://backend:5000/posts');
			const post = await response.json();

			setPostData(post);
		};
		getData();
	}, []);

	return (
		<div className='App'>
			{postData !== ''
				? postData.map((post) => {
						return (
							<div>
								<h2>{post.title}</h2>
								<p>{post.content}</p>
							</div>
						);
				  })
				: null}
		</div>
	);
}

export default App;
```

Now we should be able to retrieve our data and have it displayed on our React
app. Now we have a full stack PERN app. It is just a shell of what it will
become, but it is a good place to start. Later, I will work on finishing the
app, and will share the journey with you guys. So until then, have a great day!


PERN Stack Docker Part 1 Setting Up


When working on a NodeJS project working with an **_SQL_** database can be a
little tricky. There are several options to be able to build SQL queries. You
have ORM's such as [sequelize](http://sequelize.org/). Me, personally, I prefer
to use [knexjs](https://knexjs.org/). KnexJS is great for building queries. It
does it in a human readable and understandable way.

```js
const users = await db.select('*').from('login');
for (let i = 0; i < users.length; i++) {
	if (users[i].email == email && users[i].hash == password) {
		const user = await db
			.select('*')
			.from('users')
			.where('email', '=', email);
		return res.json(user);
	}
}
```

## Installing PostreSQL

First things first, lets set up a local environment. Make sure you install
PostreSQL, to your local machine. Follow the guide from
[postrgresql](https://www.postgresql.org/download/) and for the direction on your OS.
Once you have installed Postgres, run the _psql_ command in your terminal.

```bash
psql
psql (13.3)
Type "help" for help.
=#
```

### Create Database

Now that we have Postgres installled we should create a database.

```bash
CREATE DATABASE knexjsdb;
```

You have to have the semicolon at then end or else it will not run the query. If
successful you should have _CREATE DATABASE_ return after calling the query.

### Create TABLE

Now we should create our tables, for this we will exit the psql in the terminal
by typing

```bash
\q
```

Then you should go to a SQL Editor and Database Manager. I am going to be using
[Beekeeper Studio](https://www.beekeeperstudio.io/). However, you can use
[PopSQL](https://popsql.com/) or [DBeaver](https://dbeaver.io/) or whatever
editor you prefer.

Go to the query section and create a table.

```sql
CREATE TABLE users (
  id serial not null primary key,
  name varchar(30),
  email varchar(50) not null
  );
```

Then you should be able to go to the table within the GUI, and see where your
new table is.

![Beekeeper Studio](beekeeperstudio-img.jpg)

### Seed Data into Our Table

Now we will seed some dummy data, so we can verify it works.

```sql
INSERT into users (name, email) values ('Justin', 'justin@justin.com');
INSERT into users (name, email) values ('John', 'john@justin.com');
INSERT into users (name, email) values ('Joey', 'joey@justin.com');
```

## Setup our server.js file

Now that we have a table in our Postgres database, lets set up our _server.js_
file. To start lets create a new directory and add the file to it.

```bash
mkdir knexjsTutorial
cd knexjsTutorial
touch server.js
```

Then initial the directory using _npm init_ following the prompts to set up your
file.

```bash
npm init
```

Followed by installing express to your server.

```bash
npm install express cors nodemon pg
```

I use VSCode as my editor of choice, so I will use the code command here. If you
use sublime, atom, or most other editors use the command for that editor to open
the window for it.

```bash
code .
```

In your package.json file, go to the scripts section and change the start script
to nodemon.

```json
"scripts": {
    "start": "nodemon server.js"
  }
```

Now I will build the server.js file with express.

```js
// import dependencies
const express = require('express');
const cors = require('cors');

// Start Express
const app = express();

// Req Obj as JSON
app.use(express.json());
// CORS Header to avoid errors
app.use(cors());

app.get('/', (req, res) => {
	res.send('Server is working!');
});

app.listen(process.env.PORT || 4500, () => {
	console.log('Server Is Running!');
});
```

Now you should be able to run the start command and see it working.

```bash
npm start
```

![server-working](server-working.jpg)

## Installing knex.js

Now that our server is running, let's add knex to our server. Open your terminal
and navigate to your project folder. Once there run the following commands.

```bash
npm install knex
```

Once you have install the package for KnexJS import knex into our main server.js
file.

```js
const knex = require('knex');
```

Lets connect to our database.

```js
const db = knex({
    client: 'pg',
    connection: {
        host: '127.0.0.1',
        user: '',
        password: '',
        database: 'knexjsdb',
    }
```

After we are connected, lets build a query to select our seeded data from
earlier.

```js
app.get('/', async (req, res) => {
	const users = await db.select('*').from('users');
	res.json(users);
});
```

To build a query just use the db const created from the constant earlier. Then
using normal SQL select all from the table. You should recieve the json data
from the database.

![json-data](json-data.jpg)

Now we are able to read the data from our database. Now I will add the post
route. So we can insert new rows to the table.

## Adding data to Postgres using KnexJS

Now that we are able to fetch data from our postgres database, we should now
work on adding data to our database.

Lets create our post route.

```js
app.post('/', (req, res) => {
	// Destructure our req.body
	const { email, name } = req.body;
	// Create new user object
	const newUser = {
		name: name,
		email: email,
	};
	//Output newUser
	res.json(newUser);
});
```

Now to add the data to our database we need to use knex. We will add it like
this.

```js
app.post('/', async (req, res) => {
	// Destructure our req.body
	const { name, email } = req.body;
	// Create a new user object
	const newUser = {
		name: name,
		email: email,
	};
	// Await the db insert new object into users
	let user = await db.insert(newUser, '*').into('users');
	res.status(201).json({ message: 'successfully added user', user: user[0] });
});
```

When running this query, I it will return the newUser Object. Then when you go
to the get route it you will see the new user added to the db.

## Deploying to Heroku

Now we shall deploy our project to [heroku.](https://www.heroku.com) I will be
using the Heroku CLI. [Heroku](https://devcenter.heroku.com/articles/git) has a
guide on deploying via the CLI. All you have to do is run the following command.

```bash
heroku create
```

Now that we have created our heroku-app lets create our Procfile.

```dockerfile
web:node server.js
```

Now that we have our procfile, lets push our project to heroku. All you have to
do is run the following command.

```bash
git push heroku main
```

Then we should add postgres to our heroku app.

```bash
heroku addons:create heroku-postgresql:hobby-dev
```

Now lets connect to our postgres via the command line.

```bash
heroku pg:psql
```

Now we can create the table like we did in the beginning. Just copy and paste
the following query into the psql command line.

```sql
CREATE TABLE users (
  id serial not null primary key,
  name varchar(30),
  email varchar(50) not null
  );
```

Now that we have our table, we can seed the data from before in postgres as we
did before.

```sql
INSERT into users (name, email) values ('Justin', 'justin@justin.com');
INSERT into users (name, email) values ('John', 'john@justin.com');
INSERT into users (name, email) values ('Joey', 'joey@justin.com');
```

Now lets exit out of psql

```bash
\q
```

### Connect HerokuPostgres to knexjs

Now we have to make a change to our connection.

```js
const db = knex({
	client: 'pg',
	connection: {
		connectionString: process.env.DATABASE_URL,
		ssl: {
			rejectUnauthorized: false,
		},
	},
});
```

Heroku manages the dotenv for us, so we will use that so we can connect to our
database. Now instead of testing in the browser, lets test using
[Postman](https://www.postman.com). So we are going to add our heroku link into
the bar and run a get reqest. We should get our seeded data from earlier
returned.

![seeded-data-image](seeded-data.jpg)

Now I will change the GET request and change it to a POST request. Now add a
json object with the name and email properties.

```json
{
	"name": "Joey",
	"email": "joey5@gmail.com"
}
```

Now we shall run this request and you should have the user we just added
returned back to us.

![post-request](post-request.jpg)

Then lets change it back to a GET request and we should now see we have the new
user returned as well.

![final-request](final-request.jpg)

Now we have a node server, connected to postgres, using knex, all hosted on
heroku. I will share a link to the
[repo](https://github.com/jelmore1674/knexjsTutorial). I hope this gives people
the chance to use postgres with their node applications. To reach out to me
visit my [portfolio](https://justinelmore.dev). Just remember guys. Take care
and enjoy coding!


Welcome to Justin Elmore's Blog

Featured Posts

PERN Stack Docker Part 1 Setting Up

Using KnexJS With HerokuPostgres