Full Stack: Setting up a Full Stack Environment - blockchainpsu/blockchain-essentials-spring2020 GitHub Wiki

Introduction

Full-Stack development requires a lot of different dependencies, differing by whatever stack we're using. Let's check out what we're dealing with for now.

The MERN Stack

MERN stands for MongoDB (a document-based NoSQL database, using a structure similar to JSON), Express (used for routing in the backend), React (creating dynamic, stateful frontend user interfaces), and Node (creating server-side, backend functionality with JavaScript).

As we've previously discussed, we'll be depending on JavaScript for the majority of our codebase.

npm

npm is the package installer installed with Node, which we'll use to install a lot of dependencies. Think of it like the pip of JavaScript.

Setting up the MERN Environment

We'll need to manually install different packages to start out. If you're running Windows or MacOS, I suggest using the links below to install everything; with Linux, you can use your chosen package manager.

Manual Installation

  1. Download Node, which will also come with npm in the installation. To check that everything installed correctly, run node -v or npm -v in your terminal; if it returns an error message, check that your PATH is configured correctly.
  2. Download Git, which we'll use for version control. Check that it installed correctly by running git --version in your terminal; if it returns an error message, check that your PATH is configured correctly.
  3. Download MongoDB, which we'll use to manage our database. We'll configure this in detail later on.

npm dependencies

With npm installed, we'll download key dependencies for our stack.

  1. For beginners, setting up a React development environment is easiest with the create-react-app tool, which will download all the necessary dependencies for React and JSX for you (you'll learn more about this in the next page). To download, run npm install -g create-react-app (the -g flag makes the dependency install on your computer globally, not just limited to your local directory). After that's installed, run `npx create-react-app project_name to create a React development environment.
    1. If you ls that directory, you'll see a package.json and package-lock.json. package.json lists the settings, dependencies, commands, and more associated with the project. package-lock.json will detect any changes to package.json and help update accordingly.
    2. You'll also see the infamous node_modules directory, which stores all your local dependencies. Any dependencies installed with npm install will go here, but not the npm install -g dependencies, which will install globally.
  2. In the project_name directory, run npm install react-router-dom; this will help us with routing to different pages in our project.
  3. There are other dependencies that we need to install, but we'll explain that more in a later page with the backend and database setup.

Note: These steps are useful for creating a new project, but for our tutorial's purposes, we'll be following the below steps.

Setting up the Environment for suggestion-app

We're going to apply these ideas to our workshop's tutorial application.

Goals of our Application

We're going to be creating a full-stack application that helps create a list of suggestions for our workshop.

On one page, we want to create an anonymous suggestion. We'll create a web form that submits a subject tag, and a suggestion body, to our database. They'll be stored as JSON files: a popular format similar to JavaScript Objects (JSON stands for JavaScript Object Notation) and Python dictionaries.

On another page (our home page), we want to list submitted suggestions as a table. Simple.

We'll have a navigation bar at the top to switch from page to page, for ease-of-use.

Installation from Git

Before we begin, ensure that you've followed all the manual installation steps.

  1. Clone our repository by running git clone https://github.com/blockchainpsu/blockchain-essentials-spring2020 in your terminal, in the desired directory.
  2. cd into the created directory, and you'll see that a package.json already exists. If you look at it, you'll see a lot of dependencies listed there.
    1. npm allows easy compatibility with version control; to install the dependencies, all you need to write is npm install.
  3. From there, you're ready to learn about React and follow our tutorial for suggestion-app!