Let’s build a FullStack App with JavaScript! ~ Episode 1

Intro, Setup, and Dependencies

Welcome to the first article of a many part series where you and I will build a Full Stack Web Application using JavaScript!

For the purpose of this exercise, we will be building a dog adoption site where kennels (admins) can upload pups for adoption. Site visitors can view available doggos and submit requests to adopt them. Site visitors will not need to log in, but rather provide personal information to get in contact with a kennel. This will send a notification to our admins home page.

Our project will be using these technologies to complete our objective: React, Redux, Node.js, Express, SQLite3, Knex, and more!

Before we dive into our code here’s an outline of what to expect over the next few articles:

Article 1: Set up GitHub, download dependencies & initialize our files.

Article 2: Start our server

Article 3: Model our site’s data

Article 4: Build and seed our database

Article 5-Part 1: Plan our API

Article 5-Part 2: Build our API

Article 6: Create our React App and connect to our backend

Article 7: Build out our Frontend

*Possible Bonus Article*: Add Authentication and host our project.

For this project, we’ll be starting with the backend and then shifting over to the frontend. This will allow us to get organize our data in our backend structure so that we can build our UI according to what we’re receiving.

Because of this choice, we’ll first be installing and building our backend dependencies and file structure and then later moving onto our frontend. From this point forward this article is all backend.

So without further ado, let’s dive on in!

Github Repository

If you’re diving into a project like this I’m going to assume you can build a repo on GitHub or your version control host of choice. If not, here’s a quick guide:

1. Log into or create a GitHub account
2. On your dashboard, create a new repository by hitting either the green “new” button or the + sign on the top right of your screen.

Look for the plus sign on the top right of your screen or the green button on your left sidebar

3. Name your repo and initialize with a readme or a license if you’d like (I usually add a README and an MIT License).

4. Lastly, clone your repo by copying the clone link, opening your terminal, navigating to the directory of your choice and running a git clone (paste your repo url) command. For more clarifiication on the git clone command see here.

Your GitHub should be ready for business!

Adding Files and Dependencies

At this point, our file structure should be empty. Unless you decided to add a README or License in which case those will be present.

In order to get up and running, we’re going to need to add a few files and dependencies. I’m assuming you know what a file is but a dependency might be a new subject for you. Dependencies are packages we can add to our projects that are tailored to help with a specific objective. Some can be general and give us access to a few technologies while others have a really specific purpose.

To get started, I’m going to be addingyarn to our project. This will serve as our dependency manager and allow us to upload other dependencies nice and quick. There’s another popular dependency manager namednpm and if you prefer that, go for it! Here are links to both their sites in case you want to know more: yarn | npm.

To download, let’s just hop in our terminal and run yarn. Running yarn will upload a node_modules folder to our directory. This comes packed with several preinstalled dependencies, but we’ll later add more to this with dependencies of our own.

Before we get coding we’re going to need to add some files. First, go ahead and add an index.js file. You can do that in your TextEditor or in your terminal with the command touch index.js in your directory.

Now we’re going to want to look to add some dependencies, but before we do that let’s initialize our package.json file. There are two commands we can use to do this: npm init -y oryarn init. I usually prefer using npm init -y, I know I’m already flip-flopping here but npm init provides a more robust package.json file.

Go ahead and open your terminal and run the command npm init -y.

Woo, look at that, we’re cooking with gas now! As of right now the files in your directory should include:

//Files we just added 
node_modules (folder)
index.js (empty)
package.json(whole bunch of code)
yarn.lock (don't worry about this fella)
//Files added w/ GitHub
READEME.md
LICENSE

Formatting our package.json

In our package.json file, we need to format one thing before we start adding more dependencies. If you look at the full file we’re presented with one big object. Within that big object, you should find a "scripts" object with a value for “test”. For this project, we won’t need that "test" line so go ahead and delete it, but make sure you keep the "scripts" object.

What we will need is a "start" script. Our start script will run in our terminal and start our server for us. We could use something like "node index.js" which will start our server, but if we make changes to our code we’ll need to stop and restart our server. This can become a bit of a nuisance on a big project.

To combat this we are going to add a dependency called nodemon. Nodemon essentially eliminates that problem by restarting our server every time we save… it’s pretty sweet!

I’m going to upload all our required dependencies in a minute, but for the time being go ahead and add this line of code inside our scripts object:

"start": "nodemon index.js"

Similar to the "node index.js" command we’re just telling nodemon to start our server for us. Once updated your completed “scripts” object should look like this:

"scripts": {
   "start": "nodemon index.js"
},

Adding Dependencies

Keep your package.json file open and look for your "dependencies" object. Right now there should be nothing there, but that will change soon!

Open up your terminal and cd into your directory. Here we’ll add our dependencies in a row. For our backend, we’ll neednodemon, express, knex and sqlite3.

To add these we’ll just use the command yarn add followed by the list of dependencies. Go ahead and use this snippet in your terminal:

yarn add nodemon express knex sqlite3

As these are loaded in observe how your “dependencies” object changes. When everything is finished your object should look like this:

"dependencies": {
  "express": "^4.16.4",
  "knex": "^0.16.3",
  "nodemon": "^1.18.10",
  "sqlite3": "^4.0.6"
},

Noice! Now, we’re nearly finished with article one of the series, but there’s one more job for us to do…

Add our knexfile.js

This is probably something we can do later down the line, but I like to included initially so that we’re not searching for it when we need it.

Knex is our ORM, which will allow us to communicate to our database when we build out our API. Essentially, we use SQL to communicate with databases when we want to perform CRUD operations. Knex and other ORMs, streamline some of the SQL syntax and makes it more digestible for us developers. There are tons of ORMs available but Knex is the one I’m currently comfortable with so that’s why we’re using it.

In order to use Knex we need to add a config file. The config file will define the type of database we’re using and how Knex can find it. In order to create the file we need two things.

1. the Knex CLI
2. the command knex init

In order to access knex init we need to install the Knex CLI globally or locally. I have it installed globally using the command yarn global add knex. However, if you don’t think you’ll use it after this project feel free to rely on the command npx knex (whatever command we run). This will allow you to access the Knex CLI without downloading it to your entire machine.

When that is settled, please run the command knex init or npx knex init in your terminal. Viola, a knexfile.js should appear!

For our objectives, we’ll just need to tweak this file slightly. If you open the file you should find something like this:

module.exports = {
  development: {
    client: 'sqlite3',
    connection: {
      filename: './dev.sqlite3'
    }
  },
  staging: {
    client: 'postgresql',
    connection: {
      database: 'my_db',
      user:     'username',
      password: 'password'
    },
    pool: {
      min: 2,
      max: 10
    },
    migrations: {
      tableName: 'knex_migrations'
    }
  },
  production: {
    client: 'postgresql',
    connection: {
      database: 'my_db',
      user:     'username',
      password: 'password'
    },
    pool: {
      min: 2,
      max: 10
    },
    migrations: {
      tableName: 'knex_migrations'
    }
  }
};

For now, we’ll just need the development object so feel free to delete or comment out the staging and productions objects.

Our file should end up looking like this:

module.exports = {
  development: {
    client: 'sqlite3',
    connection: {
      filename: './dev.sqlite3'
    }
  }
};

Before we’re ready to move on to wiring up our server, we need to add one snippet to our development object.

Go ahead and add useNullAsDefault: true underneath the connection object. Your final knexfile.js should look like:

module.exports = {
  development: {
    client: 'sqlite3',
    connection: {
      filename: './dev.sqlite3'
    },
    useNullAsDefault: true
  }
};

According to the Knex documentation adding that nugget will:

If one prefers that undefined keys are replaced with NULL instead of DEFAULT one may give useNullAsDefault configuration parameter in knex config.

This will be helpful in our database because it will allow functions to break in response tonull data being added. This might sound a bit confusing now, but sometimes if a value is null it will break the operation we’re trying to run which will prompt a user to do something. If we are returning a blank value instead, this error is never alerted and although there’s no information our database could be breaking or our users are missing a critical piece of data.

Wrap Up

There you have it, our backend is all organized and ready to be built! Before you know it, we’ll be looking like this pancake fella!

Tune in soon for Article 2 and if you have any questions or run into an error please feel free to reach out!

This is a multipart series about building a Puppy Adoption Site with JavaScript. If you haven’t read all the articles please find them here: Episode 1| Episode 2 | Episode 3 | Episode 4 | Episode 5-Part 1 | Episode 5-Part 2 | Episode 6