DEV Community: Tallan Groberg

Deploy on AWS using React, Flask, and SQLite.

Tallan Groberg — Sun, 30 Jul 2023 20:22:35 +0000

Deploying to AWS can be difficult to learn. I hope to make this easy.

Credits: Professor Andrew Awdeorio

What you will get out of this

You will have a very simple web app live on the internet. Click here and here to see the end result.

Possible limitations

To ensure you don't waste your time. SQLite might not be the best option if the application that you hope to make with this is very data intensive.

While this article is set up for image upload functionality to be possible. This is not covered in this tutorial. You can store references to images very easily with the functionality I use in this tutorial. Checking out my tutorial on image uploads with firebase is a great option until I release a tutorial about that for this stack.

Important:

This tutorial does not go over best practices for securing your AWS account upon account creation. If you plan on building applications that hold sensitive user data hosted through AWS and not just this tutorial, I recommend learning about how to secure your AWS account before you start building them.

Table Of Contents.

Part 1: creating the database
Part 2: creating a flask app
part 3: Creating the react app
part 4: Setting up an AWS account
part 5: Deploying to AWS

Introduction

In this tutorial we are going to walk through how to make a deployment to AWS with a simple SQLite server. How to make a flask app capable of interacting with that server to store and retrieve data. And how to make a react app hosted through flask.

The application itself will be simple but you will able host powerful web applications after completing this tutorial.

Why this is useful

Completing this tutorial is a great way introduction to hosting on aws. Even if this isn't your typical stack this will show the concepts to make your next deploy easier.

It's a perfect introduction to scripting. I use commandline scripting in almost every type of project that I do becuase it helps me save so much time in my workflows.

This can also be used to integrate python apps into something that can be shared on the web. This is important for anyone who has a great python app but doesn't have a means of share that with the world.

What you will need.

A text editor. I will be using VS code.
a command line interface. I will be using macOS with unix and zsh. I believe that the type of command line wont matter as long as you understand the corrisponding command for your operating system or look them up as needed.

python3 installed on your host machine 3.10 or greater.

A github account we will be using a repo to move all of our code base to an ubuntu instance on AWS since this is currently on the free tier.

prerequisite skills.

Basic understanding of python.
basic knowledge of flask.
Basic understanding of react.
good understanding of unix command line.
- we will use shell scripting in order to test things. if you understand bash this should be straightforward. We will also use many linux commands and I believe I have done a great job of making this as beginner friendly as possible.
basic understanding of git.
basic understanding of emacs is a plus but not necessary.

Disclaimer

While I have done many hours of due diligence on this article. Mistakes may still be in here. If you notice anything that isn't right, I am very open to constructive criticism and feedback. I'm also very willing to help anyone who is having trouble to complete this tutorial. I want to see you succeed in deploying a web-app if you are willing to give me your time to learn this and I take not wasting your time very seriously.

Part 1: Making the database.

We are going to start by making a simple project directory.

Go to the directory where you want this project in the terminal and paste this code snippet.



mkdir webapp && cd webapp

next we have to install SQLite via homebrew if on macOS.



brew install sqlite3

you can make sure you have the right version by running this line in the terminal.



sqlite3 --version

output:
-- Loading resources from /Users/tallan/.sqliterc
3.32.3 2020-06-18 14:16:19 02c34......

Next we are making a very simple database with one table so that we can test if the database works properly.

To do this, we want to make a folder to keep 2 files. A small amount of dummy data and a schema.

from the terminal inside the project directory, we make a new folder /sql



mkdir sql && cd sql

From the terminal, now inside the /sql directory, we make 2 files to host each of these.



touch data.sql && touch schema.sql

now we make a folder for stock images.

I wont provide the images but I took screen shots from an AI photo generator and added them to the following folder and named them after the [fake people(https://this-person-does-not-exist.com/en) that I'm about to add to the database.



mkdir uploads

when you run this command you should have all the same filenames.



tree uploads

output:



uploads
├── alicewilliams.png
├── bobjohnson.jpeg
├── charliebrown.jpg
├── janesmith.jpg
└── johndoe.png

Let's add the simple table to the schema.sql file.

Even though we don't have any foreign keys, this will be good to remember in case we decide to do anything else with the database after the tutorial.



PRAGMA foreign_keys=ON;

CREATE TABLE developer (
    fullname TEXT CHECK(length(fullname) <= 40),
    email TEXT CHECK(length(email) <= 40),
    picture TEXT CHECK(length(picture) <= 64),
    password TEXT CHECK(length(password) <= 256),
    created DATETIME DEFAULT CURRENT_TIMESTAMP
);

Add some simple entries to the data.sql file



INSERT INTO developer(fullname, email, picture, password)
VALUES('John Doe', 'john_doe@gmail.com', 'johndoe.png', 'password');

INSERT INTO developer(fullname, email, picture, password)
VALUES('Jane Smith', 'jane_smith@yahoo.com', 'janesmith.jpg', 'password');

INSERT INTO developer(fullname, email, picture, password)
VALUES('Bob Johnson', 'bob_johnson@outlook.com', 'bobjohnson.jpeg', 'password');

INSERT INTO developer(fullname, email, picture, password)
VALUES('Alice Williams', 'alice_williams@hotmail.com', 'alicewilliams.png', 'password');

INSERT INTO developer(fullname, email, picture, password)
VALUES('Charlie Brown', 'charlie_brown@gmail.com', 'charliebrown.jpg', 'password');

We move on to the bash scripting portion so that we can make setting up, taking down and reseting the database easy.

make sure you move your terminal to the project directory.
from inside the sql folder



tree .

*output:



├── data.sql
├── schema.sql
└── uploads
    ├── alicewilliams.png
    ├── bobjohnson.jpeg
    ├── charliebrown.jpg
    ├── janesmith.jpg
    └── johndoe.png

Move back to the projects root directory.



cd ..

Make a new folder for your bash script and the bash script file while staying in this project directory.



mkdir bin && touch bin/db

I'm going to add these in parts with an explanation of code and will post the whole file at the end.

at the very top of the db file paste this line.



#!/bin/bash

this lets the computer know that this is a bash script, so when you run the file, it will be like running many terminal commands as once.

below that line we will add commands to echo the outputs so that it's easy to spot errors in these commands.



set -Eeuo pipefail
set -x

let's add a friendly usage message for when we don't add an argument.



usage() {
  echo "Usage: $0 (create|destroy|reset|dump)"
}

if [ $# -ne 1 ]; then
  usage
  exit 1
fi

The first block is a function making it so that if we run ./bin/db in the terminal, then there is text that is output to the terminal.

The second block is saying if the number of terminal arguments used to call this script are not equal to 1 then call the usage function and exit 1. notice that the call to the script from the terminal (./bin/db) is not considered an argument.

We have to run this line to enable permissions for db to access the command line.



chmod +x bin/db

Now you can run this script with this command.



./bin/db

if you don't run chmod +x bin/db before you call this script, you will get this error.

output:
bash: ./bin/db: Permission denied

If you run it after entering chmod +x bin/db into the terminal then you will get the following output.

Now we get to the commands themselves.

To create a database, we make an else if statement that will run a block of commands based on the argument given when we call the script.

This command will be ./bin/db create and the code that will run when we call this will be.



if [ "$1" = "create" ]; then
    mkdir -p var/uploads
    sqlite3 var/App.sqlite3 < sql/schema.sql
    sqlite3 var/App.sqlite3 < sql/data.sql
    cp sql/uploads/* var/uploads/
fi

Then in the terminal run.



./bin/db create

if everything was coded correctly, and you ran chmod +x bin/db and then ./bin/db create you should have a new folder var and a file called App.sqlite3 inside that folder.

To check, run this command in the terminal



tree var

output:



var
├── App.sqlite3
└── uploads
    ├── alicewilliams.png
    ├── bobjohnson.jpeg
    ├── charliebrown.jpg
    ├── janesmith.jpg
    └── johndoe.png

We want to make a command for each functionality stated by the usage message.

To do that we will add elif's before the closing fi and after the command for create.

the rest of the elif statement will look like this.



elif [ "$1" = "destroy" ]; then
    rm -rf var/App.sqlite3 var/
elif [ "$1" = "reset" ]; then
    ./bin/db destroy
    ./bin/db create
elif [ "$1" = "dump" ]; then
    sqlite3 var/App.sqlite3 .dump

The full db file will look like this.



#!/bin/bash

set -Eeuo pipefail
set -x

usage() {
  echo "Usage: $0 (create|destroy|reset|dump)"
}

if [ $# -ne 1 ]; then
  usage
  exit 1
fi

if [ "$1" = "create" ]; then
    mkdir -p var/uploads
    sqlite3 var/App.sqlite3 < sql/schema.sql
    sqlite3 var/App.sqlite3 < sql/data.sql
    cp sql/uploads/* var/uploads/
elif [ "$1" = "destroy" ]; then
    rm -rf var
elif [ "$1" = "reset" ]; then
    ./bin/db destroy
    ./bin/db create
elif [ "$1" = "dump" ]; then
    sqlite3 var/App.sqlite3 .dump
fi

Make sure that when you run the following terminal commands that you get the same outputs before moving onto the flask portion. You will be using these commands often.

From the project directory with no database created



./bin/db create

output:



+ '[' 1 -ne 1 ']'
+ '[' create = create ']'
+ mkdir -p var
+ sqlite3 var/App.sqlite3
+ sqlite3 var/App.sqlite3



./bin/db destroy

output:



+ '[' 1 -ne 1 ']'
+ '[' destroy = create ']'
+ '[' destroy = destroy ']'
+ rm -rf var



./bin/db reset

output:



+ '[' 1 -ne 1 ']'
+ '[' reset = create ']'
+ '[' reset = destroy ']'
+ '[' reset = reset ']'
+ ./bin/db destroy
+ '[' 1 -ne 1 ']'
+ '[' destroy = create ']'
+ '[' destroy = destroy ']'
+ rm -rf var
+ ./bin/db create
+ '[' 1 -ne 1 ']'
+ '[' create = create ']'
+ mkdir -p var/uploads
+ sqlite3 var/App.sqlite3
+ sqlite3 var/App.sqlite3
+ cp sql/uploads/alicewilliams.png sql/uploads/bobjohnson.jpeg sql/uploads/charliebrown.jpg sql/uploads/janesmith.jpg sql/uploads/johndoe.png var/uploads/



./bin/db dump

output:



+ '[' 1 -ne 1 ']'
+ '[' dump = create ']'
+ '[' dump = destroy ']'
+ '[' dump = reset ']'
+ '[' dump = dump ']'
+ sqlite3 var/App.sqlite3 .dump
-- Loading resources from /Users/tallan/.sqliterc
PRAGMA foreign_keys=ON;
BEGIN TRANSACTION;
CREATE TABLE developer (
    fullname TEXT CHECK(length(fullname) <= 40),
    email TEXT CHECK(length(email) <= 40),
    picture TEXT CHECK(length(picture) <= 64),
    password TEXT CHECK(length(password) <= 256),
    created DATETIME DEFAULT CURRENT_TIMESTAMP
);
INSERT INTO developer VALUES('John Doe','john_doe@gmail.com','johndoe.png','password','2023-07-23 22:43:59');
INSERT INTO developer VALUES('Jane Smith','jane_smith@yahoo.com','janesmith.jpg','password','2023-07-23 22:43:59');
INSERT INTO developer VALUES('Bob Johnson','bob_johnson@outlook.com','bobjohnson.jpeg','password','2023-07-23 22:43:59');
INSERT INTO developer VALUES('Alice Williams','alice_williams@hotmail.com','alicewilliams.png','password','2023-07-23 22:43:59');
INSERT INTO developer VALUES('Charlie Brown','charlie_brown@gmail.com','charliebrown.jpg','password','2023-07-23 22:43:59');
COMMIT;

Part 2: Making the flask App.

Ensure part 1 works properly before continuing to part 2.

We are going to want to make a custom python environment that is specific to this directory

This will mean we need to define a requirements.txt that's used for defining all the packages.

If you mess up at any point in trying to do this section run this command in the project directory and it will remove the python env folder that we are about to create.



rm -rf env

To ensure that we have python3 on your machine, run this command.



python3 --version

output:
Python 3.11.4

You may have a different version but, as long as this is 3.10 or greater you don't have to update to succeed in this tutorial.

This also assumes that you are not using a python version from Anaconda.

Another gotcha is that when we run this command it should be a blank output.



printenv PYTHONPATH

if you do have an output when you run this, you can run this command, but you will have to do so everytime you restart the terminal.



env --unset PYTHONPATH

If all the above checks passed, we can run this command.



 python3 -m venv env

This will have created a python environment local to this directory and this command will need to be ran every time we restart the terminal regardless of whether you had an ouput on the command before the one above. If we don't then the flask App will fail to start.

To activate the environment we run this command.



source env/bin/activate

There should be something that says (env) to the left most side of our textbar where we write to the terminal.

To double check, run this command and it should output the env directory first.



 which -a python

output:



/Users/tallan/Desktop/article-writing/tutorials/flask-app/project/env/bin/python
/usr/local/bin/python
/usr/bin/python

Now we want to install jinja2 since this is what will allow us to mount the DOM to the flask App with react. It can also be very useful for making simple webpages like forms that are used in addition to react since they can be more responsive and easier to make than full react components, when the page is a simple form or needs little to no database calls, I prefer to use it.



./env/bin/pip install jinja2

We want to add additional packages to our starter files. To do this we will use a requirements.txt file.

from the terminal make a requirements.txt file



touch requirements.txt

copy and paste the following code snippet into the file.
__requirements.txt_



arrow==1.2.3
astroid==2.15.0
attrs==22.2.0
beautifulsoup4==4.11.1
bs4==0.0.1
certifi==2022.12.7
charset-normalizer==3.0.1
click==8.1.3
dill==0.3.6
exceptiongroup==1.1.0
Flask==2.2.2
html5validator==0.4.2
idna==3.4
iniconfig==2.0.0
isort==5.12.0
itsdangerous==2.1.2
Jinja2==3.1.2
lazy-object-proxy==1.9.0
MarkupSafe==2.1.2
mccabe==0.7.0
packaging==23.0
platformdirs==2.6.2
pluggy==1.0.0
pycodestyle==2.10.0
pydocstyle==6.3.0
pylint==2.16.2
pytest==7.2.1
python-dateutil==2.8.2
PyYAML==6.0
requests==2.28.2
six==1.16.0
snowballstemmer==2.2.0
soupsieve==2.3.2.post1
tomli==2.0.1
tomlkit==0.11.6
typing_extensions==4.4.0
urllib3==1.26.14
Werkzeug==2.2.2
wrapt==1.14.1

When you run the following command, this will install all the packages in the requirements.txt file to the virtual environment.

with our env activated and the txt file with all the pages above copied. Let's run the following command.



pip install -r requirements.txt

We may get some depreciation warnings, that shouldn't be an issue.

Run the env activate command again.



source env/bin/activate

We are ready to make the flask App itself.

Lowercase app is a reserved word in flask and I didn't want to call this package tutorial and so I settled for uppercase App. be mindful that there is a distinction between the 2.

We are going to house most of the App in a folder of the same name.



mkdir App

we need an __init__.py file to initialize the package.



touch App/__init__.py

__init__.py



"""App package initializer."""
import flask

# app is a single object used by all the code modules in this package
app = flask.Flask(__name__)  # pylint: disable=invalid-name

# Read settings from config module (insta485/config.py)
app.config.from_object('App.config')

# Overlay settings read from a Python file whose path is set in the environment
# variable INSTA485_SETTINGS. Setting this environment variable is optional.
# Docs: http://flask.pocoo.org/docs/latest/config/
#
# EXAMPLE:
# $ export APP_SETTINGS=secret_key_config.py
app.config.from_envvar('APP_SETTINGS', silent=True)

# Tell our App about views and model.  This is dangerously close to a
# circular import, but Flask was designed that way.
# (Reference http://flask.pocoo.org/docs/patterns/packages/)
import App.views
import App.model

Next we make a config.py file for environment variables specific to the flask app.

Inside the App directory make a file called config.py



touch App/config.py

config.py



"""App development configuration."""

import pathlib

# Root of this application, useful if it doesn't occupy an entire domain
APPLICATION_ROOT = '/'

# Secret key for encrypting cookies
SECRET_KEY = b'FIXME SET WITH: $ python3 -c "import os; print(os.urandom(24))"'
SESSION_COOKIE_NAME = 'login'

# File Upload to var/uploads/
APP_ROOT = pathlib.Path(__file__).resolve().parent.parent
UPLOAD_FOLDER = APP_ROOT/'var'/'uploads'
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg', 'gif'])
MAX_CONTENT_LENGTH = 16 * 1024 * 1024

# Database file is var/App.sqlite3
DATABASE_FILENAME = APP_ROOT/'var'/'App.sqlite3'

As the TODO suggests, run the following command and replace the SECRET_KEY assignment with the following command.



python3 -c "import os; print(os.urandom(24))"

example output:



b'\x9a\xbb4\x86\x1d7\xac\x1ad\x14\xd9:\xcc\xf3\xf4\r\xf3\xd7\xd3cd\xfc$\xae'

Now we have to make a static directory to hold css and placeholder images, I wont be providing any code for this but this is folder is where you can house it for your project. If you don't use any style within your react application or the jinja templates. This is the command.



mkdir App/static

Now lets make a folder for templates inside the App directory to act as a place to put html and jinja template files.

We will also make an index.html in the same command.



mkdir App/templates && touch App/templates/index.html

We'll add simple html to use for testing if our flask app is working.



<!DOCTYPE html>
<html lang="en">
Hello world!
</html>

Now we need to make a views model. This is where you will keep python functions that are called when a user visits a url.



mkdir App/views

Next we need to make an __init__.py to access our views functions app wide and an index.py file to hold our function specific to the '/' route.



touch App/views/index.py && touch App/views/__init__.py

Inside this index.py we will make our first flask function.



"""
index (main) view.

URLs include:
/
"""
import flask
import App


@App.app.route('/')
def show_index():
    """Display / route."""
    context = {}
    return flask.render_template("index.html", **context)

Inside the views/__init__.py we add the import.



"""Views, one for each App's page."""
from App.views.index import show_index

We will add a placeholder file model.py. Even though we wont add any code to it for the moment, eventually this file will house the code for the database connection.



 touch App/model.py

We still don't have a way for flask to understand that we have an App package to use. To fix this we will create a .toml file.

in the project directory add this file.



touch pyproject.toml

Add the following text to the pyproject.toml.



[build-system]
requires = ["setuptools>=64.0.0", "wheel"]
build-backend = "setuptools.build_meta"

[project]
name = "App"
version = "0.1.0"
dependencies = [
    "arrow",
    "bs4",
    "Flask",
    "requests",
]
requires-python = ">=3.10"

[tool.setuptools]
packages = ["App"]

Double check that you are in your python virtual environment,
now we have to install App into the virtual environment.



source env/bin/activate

and then



pip install -r requirements.txt && pip install -e .

You should receive the following output.

output:
a bunch of build info..
...
Successfully built App
Installing collected packages: App
Successfully installed App-0.1.0

if everything was done correctly you should be able to see hello world by running the following command.



flask --app App --debug run --host 0.0.0.0 --port 4000

and going to localhost:4000

Exit the terminal for the flask app by pressing control + c when you are finished checking that you see hello world at the local host.

In preparation to move onto the part where we connect the database to the App, we are going to make a run script so we don't have to type a long command in everytime we want to start the server.



touch ./bin/run

And add the following code to the script.



#!/bin/bash
set -Eeuo pipefail
set -x

export FLASK_ENV=development
export FLASK_APP=App
export FLASK_DEBUG=1

usage() {
  echo "Usage: $0"
}

if [ $# -ne 0 ]; then
  usage
  exit 1
fi



# If var/App.sqlite3 does not exist, print an error and exit non-zero.
    if [ ! -f var/App.sqlite3 ]; then
        echo "Error: var/App.sqlite3 does not exist. Run ./bin/db create."
        exit 1
    fi


flask --app App --debug run --host 0.0.0.0 --port 4000

Enable the script.



chmod +x bin/run

Run the script to ensure no errors were introduced.



./bin/run

You should now be able to visit localhost:4000 the same as before.

let's start by resetting the database.



./bin/db reset

Ensure that you can interact with the database from the terminal first.



sqlite3 var/App.sqlite3 "SELECT fullname, email FROM developer;"

output:
-- Loading resources from /Users/tallan/.sqliterc
fullname email

---------- ------------------
John Doe john_doe@gmail.com
Jane Smith jane_smith@yahoo.c
Bob Johnso bob_johnson@outloo
Alice Will alice_williams@hot
Charlie Br charlie_brown@gmai

Copy and paste the following code into the blank model.py file.



"""App model (database) API."""
import sqlite3
import flask
import App


def dict_factory(cursor, row):
    """Convert database row objects to a dictionary keyed on column name.

    This is useful for building dictionaries which are then used to render a
    template.  Note that this would be inefficient for large queries.
    """
    return {col[0]: row[idx] for idx, col in enumerate(cursor.description)}


def get_db():
    """Open a new database connection."""

    if 'sqlite_db' not in flask.g:
        db_filename = App.app.config['DATABASE_FILENAME']
        flask.g.sqlite_db = sqlite3.connect(str(db_filename))
        flask.g.sqlite_db.row_factory = dict_factory

        # Foreign keys have to be enabled per-connection.

        flask.g.sqlite_db.execute("PRAGMA foreign_keys = ON")

    return flask.g.sqlite_db


@App.app.teardown_appcontext
def close_db(error):
    """Close the database at the end of a request."""

    sqlite_db = flask.g.pop('sqlite_db', None)
    if sqlite_db is not None:
        sqlite_db.commit()
        sqlite_db.close()

Before we can display anything to the browser, we have to account for how to handle images.

Let's make a file in the views folder called images.py



touch App/views/images.py

Add the following code to this file.



import flask
from flask import  send_from_directory
import App


@App.app.route('/uploads/<path:filename>', methods=['GET'])
def download_file(filename):
    """Download a file."""
    return send_from_directory(App.app.config['UPLOAD_FOLDER'],
                               filename, as_attachment=True)

Now add this function to the view/__init__.py so that we can find files in the uploads folder.

view/__init__.py



"""Views, one for each app's page."""
from App.views.index import show_index
from App.views.images import download_file

In this file we have a way for flask to get reference images based on the string names stored in the database.

Now change the views/index.py to have a database call for all users except one.



"""
index (main) view.

URLs include:
/
"""
import flask
import App


@App.app.route('/')
def show_index():
    """Display / route."""
        # Connect to database
    connection = App.model.get_db()

    # Query database
    logname = "John Doe"
    cur = connection.execute(
        "SELECT  fullname, email, picture "
        "FROM developer "
        "WHERE fullname != ?",
        (logname, )
    )
    devs = cur.fetchall()


    context = {"devs": devs}
    return flask.render_template("index.html", **context)

And change the index.html to display that information with jinja.



<!DOCTYPE html>
<html lang="en">
    <h1>developer</h1>
    {% for dev in devs %}
    <p>{{dev.fullname}}, </p>
    <p>{{dev.email}} </p>
    <img src="{{ url_for('download_file', filename=dev.picture) }}" alt="image" width="100" height="100">
    <br />
    {% endfor %}
</html>

If our development server is on by running ./bin/run, when we visit localhost:4000 we should see the names of the developers from the server except John Doe.

This completes the flask portion of this tutorial.

Part 3: Making the react app.

We are going to make our react app in a slightly different way that normal so that it will make the instantiation on AWS easier. Doing it this was will make it so that we can run the front-end and back-end with a single process.

Let's jump in.

Make sure that you have a version of node greater than 19.8.1



node --version

and npm version greater than 9.5.1.

this should have installed npm as a package with your node install.



npm --version

Now let's make an App/js folder to keep react components.



mkdir App/js

And a Index.js file to keep our dom root div.



touch App/js/Index.js

And add the following code to this file.



import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const root = createRoot(document.getElementById("root"));


root.render(<App />);

And the App component which will be the starting point of all the react code.



touch App/js/App.js

add the following code to the App.js file.



import React from "react";

const App = () => {
  return (
    <div>
        Hello React!
    </div>
  );
};

export default App;

Next we need a package json to define all of the packages for webpack and react to use.



touch package.json

Add this code to the package.json file.



{
    "name": "App",
    "version": "1.0.0",
    "description": "App front end",
    "main": "App/js/Index.jsx",
    "author": "awdeorio",
    "license": "MIT",
    "repository": {},
    "devDependencies": {
      "@babel/core": ">=7.21.3",
      "@babel/plugin-transform-runtime": ">=7.21.0",
      "@babel/preset-env": ">=7.20.2",
      "@babel/preset-react": ">=7.18.6",
      "@babel/runtime": ">=7.21.0",
      "@cypress/grep": "^3.1.5",
      "@types/react": ">=18.0.28",
      "@types/react-dom": ">=18.0.11",
      "babel-loader": "^9.1.2",
      "eslint": ">=8.36.0",
      "start-server-and-test": "^2.0.0",
      "tmp": "^0.2.1",
      "webpack": ">=5.76.2",
      "webpack-cli": ">=5.0.1"
    },
    "dependencies": {
      "latest-version": "^7.0.0",
      "moment": ">=2.29.4",
      "prop-types": ">=15.8.1",
      "react": "^18.2.0",
      "react-dom": "^18.2.0",
      "ts-loader": ">=9.4.2",
      "typescript": ">=5.0.2"
    },
    "engines": {
      "node": ">=18.0.0"
    }
  }

Next, we want to make a package-lock.json from the package.json.

To do this run the following command.



npm i --package-lock-only

Now run this command to make a node modules folder.



npm ci .

Now we want to make sure that we have webpack with the right version.



npx webpack --version

The output should look something like this but results may very slightly.

output:



 System:
    OS: macOS 11.7.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
    Memory: 276.08 MB / 16.00 GB
  Binaries:
    Node: 20.3.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 115.0.5790.102
    Safari: 16.4.1
  Packages:
    babel-loader: ^9.1.2 => 9.1.3 
    ts-loader: >=9.4.2 => 9.4.4 
    webpack: >=5.76.2 => 5.88.2 
    webpack-cli: >=5.0.1 => 5.1.4

We want create a root.html and make a root div for the react-dom to mount onto.



touch App/templates/root.html

App/templates/root.html



<!DOCTYPE html>
<script type="text/javascript" src="{{ url_for('static', filename='js/bundle.js') }}"></script>
<html lang="en">
    <body>
        <!-- Plain old HTML and jinja2 nav bar goes here -->


        <div id="root">
          Loading ...
        </div>
        <!-- Load JavaScript -->
        <script type="text/javascript" src="{{ url_for('static', filename='js/bundle.js') }}"></script>
      </body>
</html>

This is telling the flask app to display whatever is in the bundle.js in the root div.

We want to make a webpack.config.js to keep our build configurations for react.

In the project directory run the following command.



touch webpack.config.js

And add this code to the webpack.config.js.



const path = require("path");
const { existsSync } = require("fs");

// Set the entrypoint to Index.jsx by default, but Index.tsx if using TypeScript.
let entry = "./App/js/Index.js";
if (existsSync("./App/js/Index.ts")) {
  entry = "./App/js/Index.ts";
}

module.exports = {
  mode: "development",
  entry,
  output: {
    path: path.join(__dirname, "/App/static/js/"),
    filename: "bundle.js",
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        // Test for js or jsx files
        test: /\.jsx?$/,
        // Exclude external modules from loader tests
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
          plugins: ["@babel/transform-runtime"],
        },
      },
      {
        // Support for TypeScript in optional .ts or .tsx files
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },
};

Compile the react code in preparation for a run test.



npx webpack

In the same way that we made a index.py we want to make a root.py to display the react app.



touch App/views/root.py

Add the following code.



"""
root of react app.

URLs include:
/root/
"""
import flask
import App


@App.app.route('/root/')
def show_root():
    """Display / root for react application."""
        # Connect to database

    context = {}
    return flask.render_template("root.html", **context)

Now add this function to the __init__.py within the views folder. the whole file will look like this.

App/views/__init__.py



"""Views, one for each app's page."""
from App.views.index import show_index
from App.views.root import show_root
from App.views.images import download_file

You should not receive any errors but might get warnings.

Use the script we made earlier to run the flask app.



./bin/run

You should not get an error visit localhost:4000/root

Also ensure that our jinja index page still has our developer names.

When you want to develop and make changes to the the react app and not type npx webpack everytime, you can use the --watch flag. this will work the same way as npm start

After we are finished checking the browser. Let's shut down the flask app by clicking on the terminal and pressing control + c.



npx webpack --watch

npm packages can be installed as normal with npm i <package-name>.

The only major difference between how you interact with this react app vs. one mode with create-react-app is the front-end is essentially ran through the back-end.

We are now ready to develop a front-end with react and a back-end with flask.

We can also make jinja templates in this app when the situation fits.

This completes the react portion of this tutorial.

Part 4: Setting up an AWS account.

Its a good idea to check out the best practices for setting up AWS accounts since this is easy to forget about account security after you have had an account for a while.

Before we can deploy to AWS we first have to set up an aws account. If you already have an account set up, sign into your AWS account you can skip this section by clicking here

Go to this url to create an account.

They will send a verification code to your email.

After entering the code you will enter the will have to make a password.

Then you will be sent to this page.

You will need to add a credit card to your account even though the setup we are making is free.

Confirm your Identity.

After you confirm your phone number, choose which tier. We will use the free tier. Any tier you use will not effect the rest of this tutorial.

This will redirect you to your AWS sign-in.

Log into you account and you will be directed to this page.

Click on the settings icon in the top left corner of the page.

Now click to launch a new instance.

We are going to use an ubuntu instance. Click on Ubuntu where you see all the different virtual boxes.

Scroll down to where it says add a key pair(login) and name it.

If you start typing in the text box, a modal will popup where you can enter the name of the key.

Whether you added a key pair in the model or added directly to the textbox does not matter. As long as we choose RSA and .pem this will be fine.

Click add key pair once you named it.

This will download a aws-tutorial.pem file to you computer.

Scroll down to network settings.

Click on Allow HTTP traffic. This part is important because you will be able to do everything else in this tutorial but wont be able to ever see the website even though you did everything else right!

You can also allow HTTPS traffic but I have not tested this. you will need to buy an SSL certificate too. If someone gets this to work with allowing https traffic please let us know in the comments and how to do it.

Now click launch instance.

Scroll to the bottom and click view all instances.

You will be forwarded to a page with information about all of your instances. When you click the checkbox for the instance you just created, information about that instance will be displayed on the bottom of the page.

When you go the the address it will try and load for a while but no website will pop up.

We will add the code from the previous parts of this section to be the website in the next section.

This completes the AWS console setup portion of this tutorial.

Part 5: Deploying to AWS.

This is the most complex portion the tutorial. Be sure to read carefully because a small error in this section can cause hours of headache if you don't do this step by step. But at the end of this you will have a website ready for development, live on the internet and the ability to deploy other websites the same way.

If you stuggled with earlier parts of this tutorial, you can copy my repo to make sure that none of the errors are from any previous sections which can make debugging easier.

I recommend trying to do this on your own first.

First thing is to make a github repo.

for extra data safety make a .gitignore file and add the .pem file to it.



touch .gitignore

we want to add a lot folders to the gitignore since most of these are boilerplate files and not files that we have created.



*.pem
node_modules
env
App.egg-info
__pycache__

This will prevent any private keys from being published to github.

make an initial repo



git init && git add . && git commit -m "initialize"

create a remote origin and push it to github, which you will have to do on your own, leave it public for now, at least until you pull it into your ubuntu instance which we will do shortly. Then you can make it private if you wish.

If you completed the previous sections, you should have a aws-tutorial.pem file in your downloads folder.

Ensure you are in your project directory of your local repo, then run the following command.



mv ~/Downloads/aws-tutorial.pem .

we can also drag and drop into the project directory. As long as we have it in the root of this folder of your local repo, we are fine.

Now we give this a special 400 permission to the aws-tutorial.pem file for read only access so that we don't modify our key to the aws instance.

Run this command.



chmod 400 aws-tutorial.pem

We are now going to tunnel into our aws instance which will take use to a ubuntu terminal on aws that we control from our host machine.

To do this you want to run the following command.

Do not include the <>'s in the command but do include the ubuntu@



ssh -i aws-tutorial.pem ubuntu@<your public ipv4 DNS from the AWS cosole>

we can copy and past from our AWS console like so.



ssh -i aws-tutorial.pem ubuntu@<paste what you just copied here>

Type yes and enter to finish connecting.

You should have a proper ssh tunnel to your ubuntu instance. It should look like this.

If it didn't work. Make sure that you have your aws-tutorial.pem file in the project directory. That you ran chmod 400 aws-tutorial.pem and that the command ssh -i aws-tutorial.pem ubuntu@<public ipV4 DNS> is correct and without the angle brackets. Note that everytime you shut down and restart you instance you will have to recopy this public ipV4 DNS.

Since we are now going to be working with a linux command line interface, the commands will be a bit different.

Now we want to install nginx which will give our ubuntu server a way host a website.



sudo apt-get update



sudo apt-get install nginx

type Y to add nginx.

when you visit the site remember to make sure that it's http::/ and not https::/ when you do, you should see this page now.

We are going to have to change some files to get a configuration for our app to work correctly with njinx.

To accomplish this we will use emacs to alter files.



sudo apt-get install emacs-nox

Accept this install like last time.

Also run this command.



export EDITOR=emacs

This command will give no output.

Having emacs means we will be using nano.

Check that we have it.



which nano

output:
/usr/bin/nano

Now we will create a nginx.conf file to define how nginx will interact with our web app.



sudo nano /etc/nginx/nginx.conf

For reference, when I write control + k the plus is to indicate that you press control and k keys at the same time.

Hold control + k in order to delete all the lines in the file line by line.

after the file is completely blank, copy and paste this text using control + v



# Run nginx worker processes using user www-data, which should have been created after installing Nginx.
user www-data;

# Start as many workers as there are CPU cores.
worker_processes auto;

# Configure connection processing.
events {
    # Maximum number of simultaneous connections per worker process.
    worker_connections 1000;
}

# Configure the HTTP server.
http {
    # Directly copy data between file descriptors instead of storing it in a buffer.
    sendfile on;

    # Send the response headers and the beginning of a file in a single packet.
    tcp_nopush on;

    # Map file extensions to MIME types.
    include /etc/nginx/mime.types;

    # Specify where logs should be written.
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    # Compress HTML data before sending it in responses.
    gzip on;

    # Include site-specific config files.
    include /etc/nginx/conf.d/*.conf;
}

Then press control + x then y for saving the file and enter

This will bring you back to the ubuntu terminal with the green text.

Now we want to add special configuration details specific to our App itself.

This will be a similar process as we just did but, we will be creating this file.

Type this command into the terminal.



sudo nano /etc/nginx/conf.d/App.conf

Copy and paste this file.



# Configure a virtual server. We only need one, because this machine will only host a single website.
server {
    # Configure all requests to the path /uploads.
    location /uploads {
        # Send a subrequest to /accounts/auth/. If the response is 200, proceed; if it's 403, don't
        # serve content, and just return a 403 status.
        #auth_request /accounts/auth/;

        # Serve the requested file from /var/www/uploads/<filename>.
        root /var/www;
    }

    # Configure all requests to the specific path /accounts/auth/.
    location = /accounts/auth {
        # Forward the request to the Flask app running at localhost:8000.
        proxy_pass http://localhost:8000;

        # Don't include the body of the request if any in the proxied request.
        proxy_pass_request_body off;

        # Set some headers that Nginx wants us to use for authentication subrequests.
        proxy_set_header Content-Length "";
        proxy_set_header X-Original-URI $request_uri;
    }

    # Configure all other requests to the server besides the ones that match above.
    location / {
        # Forward the request to http://localhost:8000 and return its response to the client.
        proxy_pass http://localhost:8000;

        # Make sure the proxied request's Host header is set to what the client intended.
        proxy_set_header Host $host;

        # Add a header to the proxied request indicating whether the protocol is HTTP or HTTPS.
        proxy_set_header X-Forwarded-Proto $scheme;

        # Add a header to the proxied request specifying the IP address of the original client.
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

there are some configurations in this tutorial that are based on the idea that this app will be much more heavy duty than what is given in this tutorial. Try uncommenting lines of code when you implement auth.

Press control + x then y then enter.

Now we want to restart the nginx server.



sudo systemctl restart nginx

Install our python environment.



 sudo apt-get install python3 python3-venv sqlite3

Now clone your remote repository. Alternatively you can use my repo



git clone https://github.com/TallanGroberg/aws-deploy-tutorial.git

Create a virtual environment for your project instance.



python3 --version

output:
3.10.6

This is fine if its different that our local machine but it has to still be greater that 3.10

cd into your folder.



cd aws-tutorial

We have one more file to change. Since we changed the default location for uploads in production. we have to alter our App's config.py to reference var/www instead of var/uploads.



nano App/config.py

You can use your mouse to scroll to a single line. And should be able to erase and type like in more common text editors.

We should change UPLOADS_FOLDER to be this now.



UPLOADS_FOLDER = pathlib.Path('/var/www/uploads')

Then press control + x then Y and finally enter

Create the virtual environment.



python3 -m venv env

And activate.



source env/bin/activate

(env) should be at the left side of the green text.

Run each of these commands one by one.



pip install --upgrade pip setuptools wheel



pip install -r requirements.txt



pip install -e .

This next command to install gunicorn will enable us to run a local server like in development but in production.



pip install gunicorn

Now we initialize the database.



./bin/db create

Copy the uploads folder to the var/www folder where nginx can use it.



 sudo cp -r var/uploads /var/www

Give ubuntu permissions for this new directory



sudo chown ubuntu:www-data /var/www/uploads

Now we install react related packages starting with npm and node.



sudo apt-get install nodejs npm

You will notice that we don't have the same node version.

When you see pink screens durning package downloads just press enter to get through them. They didn't cause me any problems when I picked the default everytime.



node --version

output:
v12.22.9

Now we want to install everything from our package.json



npm install .

just to be sure make sure that your package-lock.json is here.



npm i --package-lock-only

When this download is happening, we can see that we get alot of versioning warings. This will have to be addressed by updating node version manager, you can check out the github here (nvm).

Run and update for ubuntu.



sudo apt update

Install the version manager from its github directly.



curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Now we have to source it to make sure ubuntu can take advantage of it.



source ~/.bashrc

This will cause us the have to reactivate our python environment this means that we have to reinstantiate the whole package.



source env/bin/activate



pip install --upgrade pip setuptools wheel



pip install -r requirements.txt



pip install -e .

Now we just install the node version that we had our react app running on in development.



nvm install v20.3.0

Make sure that the node version update.



node -v

output:
v20.3.0

This should ensure that when we run webpack without any errors.



npx webpack

You should receive a compiled successfully in the last line of the output.

We want to install javascript-obfuscator to make our javascript harder to understand for hackers.



npm install javascript-obfuscator

Now we run the next few commands to compile, obfuscate and replace our original build.



npx webpack



npx javascript-obfuscator App/static/js/bundle.js --reserved-strings '\s*'

press y to proceed.



mv App/static/js/bundle-obfuscated.js App/static/js/bundle.js

Now we are going to get the server running.

Before we try and run it make sure that no other gunicorn processes are running.



pkill -f gunicorn

When you run the next command, there should be no output.



pgrep -af gunicorn

Start the server in the background with this command.



gunicorn -b localhost:8000 -w 2 -D App:app

Now when you visit your aws site, you should be able to see the app running.

If it's not, we can trouble shoot with this command which will give the log level output of what is happening.

first.



pkill -f gunicorn

then.



gunicorn -b localhost:8000 -w 2 App:app --log-level debug

If you get an error about packages missing pertaining to python redo the virtual environment installation. You can do the same for react and that should do the trick.

Conclusion

I have not tried to develop anything beyond a single page react application with react with this configuration. I encourage comments about any react-packages that will not work with this configuration or if anyone could make the same functionality with create-react-app.

There is a way to write a script so that this deploy is way commands in the terminal. A great exercise would be to make this script on your own.

Let me know what I could add to this article in the comments.

Making a modal with React and styled-components leveraging dev-tools

Tallan Groberg — Wed, 04 Nov 2020 10:42:04 +0000

What is a modal? Most of the time we see them on the web as a pop-up window that prompts us to log-in to a site when we try and do something that only users can. Such as when you're on dev.to and you go to like something and you're prompted to login without leaving the page.

By the definition in web design, it is a graphical control element that is subordinate to an application's main window per google search result

What you will learn:

Best practice for setting up a modal quickly with styled-components.

Why this is useful:

You can have users do site essentials without having to redirect which can save you time coding and make your website run faster because you will run into situations where this will allow you to keep state instead of having to reset with a redirect.

So I don't waste your time,

this is the github of the finished version.

This is the website

logging into dev.to when you want to like something for example.

Prerequisites:

Basic knowledge of javascript
Basic understanding of react
Basic CSS skills.
nodejs installed.
create-react-app installed.
The ability to install npm packages.
I will be using bash/unix terminal but you can follow along if you are using PC or Linux.

The first step is to make a new react app in your parent directory from the terminal.



create-react-app modal-tutorial

cd into the project directory and open it with a text editor. I will be using vscode



cd modal-tutorial

and open...



code .

Make sure everything looks like an ordinary react app and run start in the terminal to make sure you have the boilerplate made.



npm start

Tear down the app and so that you have a blank white screen by changing the App.js to look like this:



import React from 'react';


function App() {
  return (
    <div>

    </div>
  );
}

export default App;

Now it's time to make the modal.

We will use styled-components for this but it's worth knowing how to do style objects since it appears to be the standard for react native applications. If you have a solid understanding of react I suggest learning react native so that you can take your react skills to the next level.

go to the command line and npm install styled-components



npm i styled-components

This took a long time for me compared to usual and if yours did too, it may have something to do with this.

Now we need to:

Import npm at the top.
Make a styled-div.
Make the styled-div the parent most div.

At the top under import React from 'react' add the styled-components import.



import styled from 'styled-components';

Below the closing bracket of the App function and above the default export make the styled-div.



const AppStyles = styled.div`

`;

Something to know is that the AppStyles has to have a capital
A or you will crash the app.

making this a template literal is necessary it will not work with single or double-quotes.

To add this to the component, we want to make fragments that are represented by <> code stuff inside cool tags... </>

I like to add these right in front of the parenthesis

of theApp's return statement.



 return (<>

  </>);

Add the AppStyles variable like its a cool stuff inside the tags.



  return (<>
      <AppStyles>

      </AppStyles>
  </>);

I'm going to add a class inside the AppStyles div in the JSX



  <div className="modal">

        </div>

We want to represent the modal as a box, give them height, width, and border inside the backticks for the styled div like so.



const AppStyles = styled.div`

.modal {
  width: 20px; 
  height: 20px;
  border: 1px solid black;
}

`;

We have a parent-child relationship with these elements. Which means we can use flex to position everything in the center.

This is being read like an empty div if you look in the dev-tools.

We are going to use the dev tools first paradigm which means that we will start by making things look right in the dev tools. You can use Safari or Firefox but I will be using Chrome.

Let's go to the web page and press 3 keys at the same time option/alt + command + j. Alternately you can right-click and f open them with the inspector.

Go to the top right corner and click on the element inspector.

Now when the mouse hovers over an element you can see the CSS associated with it.

The goal is to get everything looking good from the dev tools and copy and paste the changes we make in the dev tools to the codebase. It's important to always copy and paste from the dev tools because if you make any changes that cause a rerender you will lose the changes in the dev tools.

You can take the risk and get this extension however I do not recommend it because it doesn't have enough reviews. If anyone wants to try it and leave a comment, I would appreciate it.

Click on the small box in the top right corner and report back to the HTML in the dev tools.

If you see elements and styles highlighted you will see the CSS as it is represented on the page.

We want to get the parent ready to make changes to the child. so add flex to the parent container. (do this in the dev tools first.)

Go to the part of the dev-tools that has a long random sequence of letters as a class name for a div.

Now add flex to the CSS sheet represented in the dev-tools.

We will get everything centered then copy and paste it to our react code base. I will provide the css to add the project.

Next, we will justify-content: center so that everything lines up horizontally.

Centering vertically requires us to make a minimum view height so that when we do center it we see that it was centered. If you don't add a view height it appears as though nothing happens.

After you add the min-height: 100vh; you can see the effect when you add align-items: center;

Before you forget, copy and paste the code from the dev-tools to the codebase inside the backticks and above the .modal attribute.



    display: flex;
    justify-content: center;
    min-height: 100vh;
    align-items: center;

When you get a rerender from your react app, and you try and copy and paste, it will.

Being able to add css is cool but using the dev-tools like this is great for being able to adjust css to look absolutely perfect.

Let's adjust the height and width of the modal class to be the size we might see a modal being.

After 20px is highlighted hold shift + up-arrow on your D-pad to move with the tens column hold command instead of shift to move it by the hundreds column.

Having a definite pixel width might be fine, but having a % will be even better.

Add 80% to the width and 80vh for the height.

Copy and paste inside the .modal class brackets.

We want to add a box that a user can exit the modal when clicked and return to the page. To show how styled-components will work down the component tree. I will make a new component for the close modal X that will be positioned in the top left corner.

Start by making a new folder called component.

Make a new file called CloseModal.js inside the component folder.

Make a skeleton for this component.



import React from 'react';

const CloseModal = () => {
    return (
        <div>

        </div>
    );
};

export default CloseModal;

The div above will be the box that contains the X so we will add two divs and make them into lines

Start by adding the close-button class name to the newly created div.



 <div className="close-button">

Add two-div tags and give them id's I will be naming them up and down based on what way they slope from left to right.

The new div will look like this.



<div className="close-button">
        <div id="up"></div>
        <div id="down"></div>
</div>

Go back to the Appstyles div and add the three new attributes.



.close-button {
  border: 1px solid black;
}

#up {
  border: 2px solid black;
}
#down {
  border: 2px solid grey;
}

I like to make borders while I start so that I can see what is happening and delete them after the positioning is correct.

When making UI atoms and molecules like this, it is best to make them multiples of 4 so we go back to the dev-tools and experiment with the right look of an X.

We have everything set up enough to go to the dev-tools and template the look.

In the dev-tools go to the side where you can see the HTML

Give it a height and width of 32px

Copy and paste the additions to the css in the AppStyles



.close-button {
    border: 1px solid black;
    width: 32px;
    height: 32px;
}

Now to position within the modal.

You can do this in grid but I want to show how to do this with flex only because I think it's important to know flex if you want to use react native or master web development.

Having another parent-child relationship, and wanting to move the box to the top right corner. We should add display: flex; again and flex-direction: row-reverse. See what happens if you copy the <CloseModal />

The .modal should look like this inside the curly brackets.



.modal {
  display: flex;
  flex-direction: row-reverse;
  width: 80%; 
  height: 80vh;
  border: 1px solid black;
}

Next, let's use the dev-tools to make a cross inside the box.

Add the transform property to #up and #down id's.

You may have noticed that in my pictures they are span tags and in my snippets they are divs. This is because you can't use transform on span tags.



#up {
  border: 2px solid black;
  transform: rotate(-45deg);

}
#down {
  border: 2px solid grey;
  transform: rotate(45deg);

To adjust the fine-tuning of positioning and sizing we go back to the dev-tools.

To do this we will add a position: relative; so that we move in relation to the parent. Then adjust the top:, right:, and width: to go perfectly through the center.

These are the measurements I came up with for #down.



    position: relative;
    top: 10px;
    right: 6px;
    width: 40px;

For the up div, we will do the same thing as for the down div with the dev tools helping us on our way.

These are the three attributes I found.



    position: relative;
    top: 14px;
    right: 6px;
    width: 40px;

Now that we have everything line up. Let's change around the edges of the divs and change the grey color to brown.

To both of the up and the down divs, add a border-radius: 25px; to round the corners and background-color: black; on the #down id so that they will both be the same color.



background-color: black;
border-radius: 25px;

We want to start the functionality for the modal to pop up on a click event.

This means that we can utilize a boolean and use state to make a button hide when clicked.

Go the App.js and import useState at the top.



import React, { useState } from 'react';

Make a piece of state at the bottom with a boolean as a data type. Add this like between the return statement and the function App() declaration.



  const [showModal, setShowModal] = useState(false)

Since we are only passing this one level down. I will pass this prop directly to CloseModal but Redux or context is a good option if you are incorporating this into a larger app.



          <CloseModal
            setShowModal={setShowModal}
            />

Add props to the CloseModal.js



const CloseModal = (props) => {

Destructure the two props we passed to get under the line above and between the return



    const {setShowModal} = props;

We want to make this show or hide based on a click event. To do this we will add an onClick to show the modal when showModal is true.

Now to add the on click handler to the close-modal div.



            <div 
            onClick={() => setShowModal()} 
            className="close-button">

The reason why we added the anonymous function: () => before is because if you don't, and you call a function inside an onClick, which you have to do in order to pass an argument inside a function for a situation like this, to the onClick handler you will get an infinite rerender.

To set up a change state. We will make, setShowModal to switch to the opposite of whatever it was.

The onClick will look like this.



onClick={() => setShowModal(prev => (!prev))}

We can reuse this onClick with our button to show the modal.

Make a button underneath the modal div.



        <button onClick={() => setShowModal(prev => (!prev))}>show </button>

To make this show the button or the modal, we want to use a ternary statement to only show one or the other based on the showModal being true or false.

The App component should look like this including the



import React, { useState } from 'react';
import styled from 'styled-components';
import CloseModal from './component/CloseModal';

function App() {
  const [showModal, setShowModal] = useState(false)


  return (<>
      <AppStyles>
       {showModal === true ? "T" : "f"}
        <div className="modal">
          <CloseModal 
            setShowModal={() => setShowModal(prev => (!prev))}
            />
        </div>

        <button onClick={() => setShowModal(prev => (!prev))}>show </button>


      </AppStyles>
  </>);
}
// AppStyles...

export default App;

The same onClick that we gave to the button in the App.js we can add to the .modal div in the CloseModal.js.



<div 
    onClick={() => setShowModal(prev => (!prev))}
    className="close-button">

We are going to change the ternary statement to include what we want to include on true (the CloseModal component) and what the user sees on false, the (button to open the modal).

Go back to the App.js and where it says "T". Add the modal div including the <CloseModal /> component. I'm spacing things out so that the code doesn't get messy.

And move the button to where it says "f".

Everything inside the return should look like this.



return (<>
      <AppStyles>
       {showModal === true 
          ?
            <div className="modal">
              <CloseModal 
                setShowModal={setShowModal}
              />
            </div>
          : 
          <button onClick={() => setShowModal(prev => (!prev))}>Show</button>
        }
      </AppStyles>
  </>);

Now when you click the Show bottom and the close-modal div you will show or close the button.

A modal isn't any good without something for a user to interact with.

We can add a form in the center of the modal.

inside the .modal div add a form with an input.



         <form>
           <input />
         </form>

This form isn't going to do anything it's just for demonstration purposes.

To position the form, we can add two pieces of css and add them to the form element instead of by class like we did with the other divs.

margin: auto; will center the div.
display: flex and flex-direction: column; will



form {
  margin: auto;
  display: flex;
  flex-direction: column;
}

Let's remove the border on the close-button div.

This is also where you could add colors and tweak the positioning of things but for sake of brevity I will leave that up to you to tell us how you did it in the comments below.

A there you have it, you now have a basic modal. Please let me know if you would like to know how to set up a modal that doesn't interfere with the dom elements underneath it and I would be happy to make that tutorial.

Here is the code on Github.

Conclusion.

You can save yourself a lot of time writing CSS code if you use the dev-tools to help you. I personally like using Firefox because they have guiding lines that help with positioning. Chrome and Safari do not have as good built-in tooling at the time of this writing.

Adding a custom domain from godaddy.com to a surge.sh project.

Tallan Groberg — Sun, 09 Aug 2020 00:09:35 +0000

In this tutorial, we are diving into the world of custom domains surge and godaddy.com.

This tutorial shows how I added the custom domain name of tallangroberg.com to my portfolio site which is a react project.

If you find this helpful please share, like and comment the site that you published with the help of this tutorial.

Prerequisites:

godaddy.com account.

2.node installed.

Knowledge of npm installs
create-react-app installed if you already have a react app you are trying to give a custom domain, you can start after the react project is made.
Knowledge of the command line. (I use a Mac/unix for this tutorial but it's possible to follow along with windows or Linux.)

First, let's make a new react-app through the terminal.

  create-react-app domain-tutorial

cd into that project.

cd domain-tutorial

Do an npm start to make sure you get the react boilerplate.

npm start

If everything looks good continue.

Since this isn't about how to make react-apps necessarily, I'm just going to publish this boilerplate.

I do want to note that none of the npm packages you install should interfere with your ability to add custom domains to your react apps since this is happening on lower levels of the OSI model and react-apps operate at the very top of that model.

Next, we want to add a script to the package.json so that when we enter npm run deploy in the command line, it will send our react app live to the web.

Go to the package.json and add the following line of code inside of the "script" brackets.

,      
"deploy": "npm run build && mv build/index.html build/200.html && surge build"

We need the comma because it's json.

Our new script section should look like this.


  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
, 
    "deploy": "npm run build && mv build/index.html build/200.html && surge build"

  },

Now go to the public folder and add a file called CNAME all caps.

Starting, we will use a surge.sh address but we will change this later to our custom domain.

As long as no one else has a domain that you have tried, you can use that domain name with the ending surge.sh type in your own creative prefix in front of .surge.sh and if you see this screen, you can use that domain.

Now copy the URL and paste it into the CNAME folder.

https://example-bob-gate-swan-vuy.surge.sh/

We still need access to the surge npm package.

npm install surge on the command-line globally.

npm i -g surge

In the command-line when you enter npm run deploy it will reference the URL in the CNAME file and publish the react app to that site.

Try it.

npm run deploy

This will create a compiled build of the react application into vanilla javascript.

if this is your first time, you may run into a strange screen.

To proceed hit enter once and you will be prompted for your email.

You will be prompted for a password as well.

After you enter an email and password, if the site isn't taken, you will see your site on the live web at the address in your CNAME file.

Now for the godaddy.com side of things.

if you don't have a godaddy.com account, go ahead and meet us back here once you have an account and a custom domain name.

Go to your my-products page within your GoDaddy account.

Click on DNS for the domain you are connecting to the react app.

It may look different on your GoDaddy dashboard depending on if they changed the web site layout.

This is the most dangerous part of the process. Read these instructions very carefully.

All you have to do is delete both the CNAME records and change the A record to the IP address we are about to get.

start by deleting both the CNAME records in your domain manager settings.

This will reference the CNAME file through the project on the surge and react side. So, they have to be removed from the GoDaddy's records.

Your account should now look like this.

We want to go back to the CNAME file in the react-app and change the URL to our final domain URL.

Save, then run another deploy on the command-line.

npm run deploy

On the command-line we can see the IP address given to us by surge.

Copy that IP address and go back to your godaddy.com dns management page for your domain.

Under Type, where it says A, at the top of the list, click the pen to edit that record.

Now change where it says Parked to the IP address you copied from the command-line.

Now click save.

Please be patient because unlike many things with web development, this is not instantaneous.

If you followed this tutorial this will work, when I talked with a customer service representative at godaddy.com, they told me that this can take up to 48 hours. In my case with writing this tutorial, it took 20 minutes before my website was live at my custom domain.

If you run into problems I recommend calling customer services. Every time I have had problems with a custom domain they were extremely helpful.

A few last warnings.

I cannot guarantee that this is safe from any type of hacking and I don't know how to set up the SSL certificate.

If anyone reading this has any helpful links please put them in the comments below.

I will also do my best to help anyone with any questions if you reach out.

link to the surge site

link to the custom-domain

link to github repo

Happy hacking everyone.

Setting up Ruby on Rails with docker and MySQL

Tallan Groberg — Thu, 25 Jun 2020 18:02:37 +0000

Docker is a technology that will revolutionize the way that you develop.

If you like what I'm teaching, please give it a Heart and a friendly comment if you found this helpful.

What I'm teaching in this tutorial is how to develop a rails application inside a docker container so that you only have to set up docker on your mac to develop a rails application. (no rails or Ruby operating system config required to start.)

This is popular with businesses because containerization or, standardizing units of software, is a revolution in how applications are made.

if you are new to docker, and you follow this tutorial. This will be the start to an amazing journey to get applications running that you can scale indefinately. You can start developing everything through a docker container without the stress of host system configurations.

Here is what I'm going to teach.

This is the start to a multi-part series that will teach you how to make 3 docker containers and publish them on heroku

ruby on rails backend.
mysql database
react-app

Provide helpful resources geared toward beginners.
I’ll show you how to install docker on mac.

Docker is also available for windows.

Prerequisites:

basic commandline.
a text editor. I will be using VS code.
attention to detail.

helpful but not nessesscary.
1. knowledge of ruby
2. knowlege of .yaml or .yml files
3. Knowledge of docker.

helpful links.

docker docs

Visit the official website and install docker.

docker for mac desktop

Getting started

Open your terminal and verify docker installed correctly.



docker --version

Your output should look something like this but may be a different version.



Docker version 19.03.8, build afacb8b

if you didn't see any version or you got an error. Go back to the link where docker for mac desktop and try do the steps again.

Before moving on, make sure that you open docker desktop.

press command + spacebar to open the searchable view.

then search for docker.

a small whale icon with shipping containers on its back should be visible at the top-right of your desktop.

Click on it.

Now click to open desktop.

Make sure that docker desktop is running the whole time, if docker is off then docker commands will not execute.

You will be prompted to do the hello world version of docker which I highly recommend doing the simple walk through.

If everything worked with the hello world app, one last check to ensure that you can follow this tutorial for a rails application is to ensure that you have access to docker-compose, this should be installed with the rest of docker command-line tools and this is the command to make sure.



docker-compose -v

the expected output.



docker-compose version 1.25.5, build some-hexadecimal

If the versions aren't the same everything should still work.

Start of the tutorial.

First, let's make an empty directory called rails-docker.



mkdir rails-docker

cd into the directory.



cd rails-docker

The first file we want to make is the Gemfile, this is because we will have docker instantiate the entire dev environment instead of running rails commands directly through our host operating system.



touch Gemfile

Inside the Gemfile, we will write the source that we get our ruby gems.



source 'https://rubygems.org'

underneath the source add a line for the rails version we want.



gem 'rails', '5.0.7'

If you want the newest version of rails(6.0.3.2 as of this writing), you can install whichever version you want but this is the one that I have tested and recommend for this tutorial.

We also need and empty Gemfile.lock, this is where the Gemfile versions are recorded by rails.

The app will not run without an empty Gemfile.lock



touch Gemfile.lock

Now we need to make a Dockerfile, this is where we define what technologies our docker image will have, such as ruby versions node.js versions.



touch Dockerfile

Inside the Dockerfile we will specify the minimum requirements for docker to make an image to run a rails app. Each new command can be thought of like a script making layers that become an operating system.

First is the programming language that everything else will need to run on top of. In our case ruby, using the FROM command.



FROM ruby:2.5.1

Dockerfile

Next is the RUN command a typical suffix for RUN is apt-get update && apt-get install problems can arise because updating should happen outside your docker image on dockerhub. see a detailed explanation here



RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs

build-essential is a package of trusted compilers for our application.

libpq-dev is a compiler system to help with port forwarding to databases from virtual machines. A detailed explanation is in the link.

nodejs is a javascript engine that will enable you to run javascript outside of a browser.

We will add more RUN commands which you can think of as the docker equivalent of a command-line script.



RUN mkdir /app

This will make a directory only within the context of our docker-image.

Now we want to make the /app directory the working directory with the WORKDIR command, its the bash equivalent of cd into a folder. This means that all the commands that you run after this line will happen in the /app directory.



WORKDIR /app

we have to ADD the Gemfile and the Gemfile.lock for docker to reference for the build of our rails app.



ADD Gemfile /app/Gemfile
ADD Gemfile.lock /app/Gemfile.lock

Since we have our Gemfile and the Gemfile.lock inside the directory where we will build, the next command is to RUN bundle install. This adds all of the rails dependencies.



RUN bundle install

now we want to ADD the current directory to the application directory after that is installed like so.



ADD . /app

the finished file should look like this.



FROM ruby:2.5.1 
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs
RUN mkdir /app
WORKDIR /app 
ADD Gemfile /app/Gemfile
ADD Gemfile.lock /app/Gemfile.lock
RUN bundle install
ADD . /app

this is the file that will be referenced every time we use the build command on the command-line.

as the next step in our configuration, let’s make a docker-compose.yml.



touch docker-compose.yml

In this file we will define a config object for the services involved in this app such as the database.

Within this file, because of how docker objects are defined, improper indentation can cause the build to fail.

I will provide a full list of the file after I walk you through what is going on with proper indentation.



version: '2'
services:

under services, we will define the external services for the app such as the database (MYSQL).



db:
    image: mysql:5.7

This is how we can pull an image database from docker hub, in our case MySQL.

some configuration for how we want our database to behave on restart and access defined by environment: variables.



restart: always
    environment:
        MYSQL_ROOT_PASSWORD: password
        MYSQL_DATABASE: app
        MYSQL_USER: user
        MYSQL_PASSWORD: password

We want to give our app a port forwarding service so that the process that docker is running is linked to the process the host operating system is running.



    ports:
       - "3307:3306"

let's add our next service called app:



app:

below app, we want our app to reference the rails application. this means that instead of calling on an image from docker hub like we did with MySQL. We are going to tell docker to build the app that we configured in the Dockerfile with the build:

we will add the current directory with build: .



  build: .

now we will run rails with the command: then bind it to port 0.0.0.0



command: rails s -p 3000 -b '0.0.0.0'

we need a thing called volumes:

It is used to say, the directory where the host system shares the /app directory.



        volumes: 
            - ".:/app"

we want to set up the port forwarding so that when docker refers its port 3000 in the container, it will forward that to 3001 to the operating system in the same way that we did so for the database.



    ports: 
       - "3001:3000"

let's make the app service depend_on the db: service so that when we use our rails app it refers to the database to store data and it is linked to the database.



depends_on:
      - db
links:
      - db

Now we want to add the environment variables for the rails application.



         environment:
             DB_USER: person
             DB_NAME: app
             DB_PASSWORD: password
             DB_HOST: db

The whole file should look like this.



version: '2'
services:
    db: 
        image: mysql:5.7
        restart: always
        environment:
            MYSQL_ROOT_PASSWORD: password
            MYSQL_DATABASE: app
            MYSQL_USER: user
            MYSQL_PASSWORD: password
        ports:
            - "3307:3306"
    app: 
        build: .
        command: bundle exec rails s -p 3000 -b '0.0.0.0'
        volumes: 
            - ".:/app"
        ports: 
            - "3001:3000"
        depends_on:
            - db
        links:
            - db
         environment:
            DB_USER: root
            DB_NAME: app
            DB_PASSWORD: password
            DB_HOST: db

docker-compose.yml

We are going to be interacting with the command-line again in a way that we prefix all of our ordinary rails commands with docker-compose run app

This is the command to download all of the boiler-plate rails.

note: this will take a few minutes the first time but will be quick next time. the --api flag can be added, is optional and but it will be easier to get started if you use embedded ruby views instead of a front end framework.



docker-compose run app rails new . --force --database=mysql --skip-bundle

This should have created a rails structure and a database structure to use but we still have some work to do.

Open the database.yml in the config folder that was downloaded in the rails install. Delete all the comments.

Without all the comments. It should look something like this.




default: &default
  adapter: mysql2
  encoding: utf8
  pool: 5
  username: root
  password:
  host: localhost

#...rest of file...

under pool: 5, erase the username, password, host and replace them with this code so that they reference the ENV variables in the docker-compose.yml



database: <%= ENV['DB_NAME'] %>
  username: <%= ENV['DB_USER'] %>
  password: <%= ENV['DB_PASSWORD'] %>
  host: <%= ENV['DB_HOST'] %>

We want to standardize the naming conventions by setting the rest of the file's dev, test, and production environments to default.




default: &default
  adapter: mysql2
  encoding: utf8
  pool: 5
  database: <%= ENV['DB_NAME'] %>
  username: <%= ENV['DB_USER'] %>
  password: <%= ENV['DB_PASSWORD'] %>
  host: <%= ENV['DB_HOST'] %>

development:
  <<: *default

test:
  <<: *default

production:
  <<: *default

We want to make the database username, password, and host reference environment variables that we created in the docker-compose.yml

Now, in the command-line we can run docker-compose build



docker-compose build

This will bundle install all the gems for the rails application that were pulled in from rails boiler-plate.

Now run docker-compose up on the command-line in order to start both the MySQL database and the rails application.



docker-compose up

When you go to localhost:3001 you will see the rails logo.

Trouble Shooting and Reconfiguration.

I will be following this up with a multi-part series that shows how to deploy multiple containers to Heroku to make full-stack containerized applications.

In order to do that easily, we have to know how to tear this app down and redo it, maybe you want to find out whether this will work with the latest version of ruby and rails. Or with a PostgreSQL database instead.

The first step is to open docker dashboard and purge data.

Click on the bug icon in the top left corner of the screen.

Click the red clean/ purge data and yes, we are sure.

Once you confirm this will restart docker, not opening the dashboard but running in the background so that you can use the command-line.

now delete the rails app from the file directory, carefully so that you don't delete any of the docker related files, Gemfile or the Gemfile.lock

You can do this in vscode by clicking on the files and folders while holding down the command key.

right-click over the selected files and select delete and confirm.

Open the Gemfile and delete everything except the source and the rails gem, you could delete the content of the Gemfile and copy and paste these two lines of code into the file.

You could also try the rest of this rebuild with a different rails version and if it doesn't work out, you can repeat the steps above for troubleshooting and reconfiguration.



source 'https://rubygems.org'
gem 'rails', '~> 5.0.7', '>= 5.0.7.2'

Now we want to make the Gemfile.lock empty since it will get filled again when we run docker-compose build.

This can easily be done by clicking on the file content and pressing command + a, highlighting everything then press delete, leaving the file empty.

Now you can go to the command-line and run the steps for creating a new image.make sure docker is running first

These commands are.



docker-compose run app rails new . --force --database=mysql --skip-bundle

This will take a while since it's just like the first time.

Build what you pulled in.



docker-compose build

While that's reinstalling, go into the database.yml and replace it with this file referencing the environment variables.




default: &default
  adapter: mysql2
  encoding: utf8
  pool: 5
  database: <%= ENV['DB_NAME'] %>
  username: <%= ENV['DB_USER'] %>
  password: <%= ENV['DB_PASSWORD'] %>
  host: <%= ENV['DB_HOST'] %>

development:
  <<: *default


test:
  <<: *default


production:
  <<: *default

To make sure it works run...



docker-compose up

if this doesn't work the first time you may have to restart docker which can be done by clicking the icon at the top right of the desktop and quitting the application.

Visit localhost:3001 and you will see yourself right back where you started.

Conclusion

Docker has a learning curve but it will save you so much time in the long run not having to worry about operating system related errors.

I will be doing more tutorials that branch off from this one showing you how to make full-stack web apps to production with rails and react.

If you run into problems getting this to work, please leave a comment and I will get back to you.

Here are some additional resources.

finished tutorial on github.

Check out the following.

docker-compose.yml

Dockerfile

and the database.yml in the config folder

an excellent youtube from
Chandra Shettigar who does an excellent tutorial on how to set up a ruby on rails app with docker but leaves the setup of docker to you and doesn't show you how to tear-down,
rebuild or reconfigure.

If this helped you get started with docker, please give it a heart, unicorn and a tag.

For the next part of this series where I will show you how to set up a react application within a docker container.

Thanks and I look forward to hearing from you in the comments
below.

Scroll effects with react and styled-components

Tallan Groberg — Sun, 24 May 2020 15:16:16 +0000

In this tutorial, we will make a react-app that will make a cog that rotates based on a user scrolling. It will scroll one way when a user scrolls down and the other when a user scrolls up.

If you think this is really cool, please share and give this post a heart.

You will learn how to add dynamic values to css attributes with styled-components based on user events. This is where you blur the line between engineering and art.

To ensure I'm not waste your time, here is the github

here is the site

Why is this useful?

Knowing how to add tasteful animations to your websites will impress your users.

It will be artistically fulfilling to command this much more imagination over the art of web development.

It could potentially be profitable and 'wow' a client or make your portfolio that much better.

Prerequisites:

create-react-app
Basic knowledge of react, styled-components and javascript.
Basic command-line for installing npm packages I'll be using bash command-line

To get started make a new react-app called scroll-tutorial


create-react-app scroll-tutorial

open that file directory

cd scroll-tutorial

Open with the text editor of your choice. I use VScode.

code .

Now let's install styled-components.

npm i styled-components

There may be another way to make this work but the way I found easiest was to create context and capture the scroll position with an event listener and wrap the styled div in context to add the number.

Inside the src folder, let's create a folder called provider and file called ThemeProvider where context will be.

Right-click the src folder.

Now make the file.

You can copy and paste this to make the skeleton for the file.

import React from 'react';

// context variable goes here


const ThemeProvider = () => {
  return (
    <>

    </>
  );
};

//higher order component goes here.


export default ThemeProvider;

We can destructure the context variable since we aren't going to be using the useContext hook and a higher-order component instead.

// context variable goes here

const {Provider,  Consumer } = React.createContext()

Now inside the <> also called fragments add the Provider like so.

return (
    <Provider>

    </Provider>
  );

Add the value object to the opening Provider tag and props.children.

    <Provider value={{

    }}>
      {props.children}
    </Provider>

Don't forget to add props at the top of the react component

const ThemeProvider = (props) => {

We are going to be saving the scroll event to state, so at the top of the file, add useState to the react import.

import React, {useState} from 'react';

Make a piece of state to save the scroll position inside the react component at the top.

const [scrollPosition, setScrollPosition] = useState(0)

Add the scroll postion into the the value object.

 <Provider value={{
      scrollPosition,
    }}>

The best practice is to make sure that context is working before we start making the functionality for it. this means that we will make the consumer, make sure we have a scroll position in the App.js then add the event listener for user scroll events.

Below and outside the component we are going to make the consumer for this provider.

This will be a HOC or higher-order component.

I highly recommend learning more about functional programming paradigms and closures but the details go beyond the scope of this tutorial. (pun intended.)

Let's make the skeleton of this function.

//higher order component goes here.
export const withTheme = C => props => ()

Inside the parenthisis add the Consumer like so.

export const withTheme = C => props => (
  <Consumer>

  </Consumer>
)

Inside the Consumer add the value and the consumer and make so that everything we pass to the withTheme function will be a child to this function.

The whole function should look like this.

//higher order component goes here.
export const withTheme = C => props => (
  <Consumer>
    {value => <C {...value} {...props} /> }
  </Consumer>
)

The whole file should look like this.

import React, {useState} from 'react';

// context variable goes here

const {Provider,  Consumer } = React.createContext()

const ThemeProvider = (props) => {
  const [scrollPosition, setScrollPosition] = useState(0)

  return (
    <Provider value={{
      scrollPosition,
    }}>
      {props.children}
    </Provider>
  );
};

//higher order component goes here.
export const withTheme = C => props => (
  <Consumer>
    {value => <C {...value} {...props} /> }
  </Consumer>
)

export default ThemeProvider;

ThemeProvider.js

Now go to the index.js and wrap your app with the provider.

import ThemeProvider from './provider/ThemeProvider'

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

index.js

In the App.js add props and and console.log them.

function App(props) {
  console.log(props)

With VS code press control + ~ , the button underneath the escape key and in the teminal that pops up. run npm start.

npm start

command line

The console will return an empty object.

To give us the scrollPosition, import withTheme at the top of our App.js

import {withTheme} from './provider/ThemeProvider'

At the bottom where the export is wrap the App withTheme.

export default withTheme(App);

We should now see a key-value pair with a scrollPosition of 0.

Let's import styled components and make a styled container while we are here.

import styled from 'styled-components'

At the bottom make a styled Container.

const Container = styled.div``

Replace the react boiler plate with an empty Container.

return (
    <Container>

    </Container>
  );

Follow the link and download the one I used for this tutorial.

Right-click on the image

Save it inside the src folder, change the name to cog.png.

Import the image to the App.js

import cog from './cog.png'

Add an img tag with the image inside the Container.

    <Container>
      <img src={cog} />
    </Container>

_Note: _ You may have to shop around for the cog you want to use. I looked up transparent cog icons on google and found something that I liked. the only requirement is that it is the background has to be transparent.

Before we go back to the ThemeProvider, lets set up some CSS for our Container.

First make the height 400vh.

Give the cog an id.

 <img id="cog" src={cog} />

Give cog a position of fixed.

 #cog {
    position: fixed;
  }

The same way that we wrapped the App withTheme do that to the styled.div

const Container = withTheme(styled.div`
height: 400vh;

  #cog {
    position: fixed;
  }
`)

Now our CSS has access to stateful logic.

Make a transform: rotate() attribute on the #cog

#big-cog {
    position: fixed;
    transform: rotate(0deg);
  }

To make it so that it will rotate on scrolling we have to go back to the provider and make the event listener.

Between the return and the useState, add this event listener.

document.addEventListener('scroll', () => {
    console.log(window.scrollY)
  })

ThemeProvider.js

When you scroll with the console open you will see a lot of numbers indicating the vertical scroll position.

Now setScrollPosition to the window.scrollY

document.addEventListener('scroll', () => {
    console.log(window.scrollY)
    setScrollPosition(window.scrollY)
  })

One last thing. we have to connect the number of degrees to be the number of scrollY to do that go back to the App.js and use this from props inside Containers props to be the number of degrees.

We can do this with template literal notation because thats exactly what css is written inside of with styled components.

transform: rotate(${props => props.scrollPosition}deg)

Check it out!!

To make the scroll a little slower we can divide the number like this.

  transform: rotate(${props => props.scrollPosition / 20}deg)

I would like to add that this is great as an art piece by this does cause a lot of rerendering and may not be suitable for bigger apps

this is the github

this is a site I made that adds more cogs to look like they are working together.

If you would like me to show you how to add more cogs and position them I would be happy to do so!!

How to make amazing transitions with React Tiger Transition.

Tallan Groberg — Sun, 19 Apr 2020 17:12:24 +0000

In this tutorial, we are going to make a beautiful website routing transitions with react-tiger-transitions to give your UX a huge lift.

Please be sure to Like and Comment if you find this helpful.

This will allow you to click through a series of links with beautiful transitions between routes using the npm package react-tiger-transitions.

Nothing is worst than having a problem you are trying to solve and the tutorial was never going to help you but, you didn't realize until you went through the whole thing.

This is why I always add a link to what the tutorial does when it is practical.

sample of what is taught

A few more things to be aware of with this package.

I am not sure if this application will work in app with context. It may work with redux but it was buggy when I tried with the useContext hook as well as prop passing with HOC.
I also could not get this working at all with styled-components.

If anyone knows the workarounds for these issues please add that in the comments below.

Prerequisites

creat-react-app
basic understanding of React and javascript.
npm installed

4.(Optional), basic understanding of react-router-dom.

The first thing we need is to create-react-app.

create-react-app tiger-transitions-tutorial

cd into the app

cd tiger-transitions-tutorial

next npm install some packages.

npm i react-tiger-transition

install the dependent packages

npm i react-router-dom react-transition-group

react-router-dom. is a package for routing between pages.

react-transition-group is used for making transitions.

Next, we want to wrap our app component from inside the index.js with BrowserRouter.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import "react-tiger-transition/styles/main.min.css";
import {BrowserRouter} from 'react-router-dom'

ReactDOM.render(
// wrapped in BrowserRouter
  <BrowserRouter>
    <App />
  </BrowserRouter>

,
 document.getElementById('root'))


serviceWorker.unregister();

Then go to the App.js and add the following import at the top of the file.

import { Navigation, Route, Screen, Link, glide, fade, glueOut } from "react-tiger-transition";

Navigation is the react-router-dom equivalent of Switch though some comparisions aren't exact.

Now import the min.css file below that.

import "react-tiger-transition/styles/main.min.css";

This import creates the layouts containers and removes padding that we need to get this working.

Next, we want to add the css style to the id of root that displays our whole application.

In the react-tiger-transition docs it recommends not doing this with javascript and with css style sheet.

Open the App.css add a view height of 100vh to the root id.

#root {
  height: 100vh;
}

Now open your App.js and again and erase the boilerplate react and replace it with the Navigation wrapper and a home route.

function App() {
  return (
    <Navigation>
      <Route exact path='/'>Home.</Route>
    </Navigation>
  );
}

It's not beautiful yet but if you did everything right your app should look like this in the browser.

We should style this app so that we can stand to look at it while we build it.

Make a style object to center everything with flex, add this object outside of the React component.

const screenStyle = {
  display: "flex",
  alignItems: "center",
  justifyContent: "center"
};

App.js

Just like we added path and exact to route, add screen and screenProps to route.

<Route  exact path="/" screen screenProps={{/* style object goes here. */}}>>

Now add the style object to the screenProps.

{style: {...screenStyle}}

In the browser, everything will be centered on mobile and desktop.

We can add color along with screen style.

Let's go to an awesome site that generates color schemes meet me back here after you have a scheme you like or follow with the colors in this tutorial.

Add the first color to your style object like so.

style: {...screenStyle, backgroundColor: "#A5817F"}

On the route tag.

It's looking good enough to put in a transition.

Let's experiment with the glide transitions first.

Add this outside the react component near the bottom of the file.

glide({
  name: 'glide-bottom',
  direction: 'bottom'
});
glide({
  name: 'glide-top',
  direction: 'top'
});

In this code, we are calling on functions in the node_modules and telling them what effects we want when we go to a new route.

Now add a link to leave the home Route.

<Link  to="/outside"><h4>outside</h4></Link>

Nothing happens when you click on it. Let's change that by making a path to get outside.

Add this to leave home.

<Route exact path='/outside'>outside</Route>

Back on the home route, let's designate the transition between the Link and to=/outside.

<Link transition='glide-top' to="/outside"><h4>outside</h4></Link>

When you click on the link it give a cool animation to the top! very cool.

Now add a way to get back home by putting a link with a transition on the outside Route.

     <Route exact path='/outside'>
        <Link transition='glide-bottom' to="/home">
          <h4>Back to home.</h4></Link>
     </Route>

Add more screen props to make for better UI.

<Route exact path='/outside' screen screenProps={{
          style: { backgroundColor: "#BDA3A1",
            ...screenStyle }}}>

You don't have to have your whole UX in one file. To demonstrate, make a new file in the src folder called DownTheStreet.js

Make the skeleton for the component.

import React from 'react';

const DownTheStreet = () => {
  return (
    <div>

    </div>
  );
};

export default DownTheStreet;

Import Link from react tiger transition.

import {Link} from 'react-tiger-transition'

Make a link to get away from the street and back to outside home.

<Link to='/outside'>outside the house.</Link>

Make the route to the street from the outside from inside the App.js

<Link transition='glide-bottom' to="/home">
              <h4>Back to home.</h4>
            </Link>
             // within the /outside route, add only like below
              <Link to='/down-the-street'><h4>Down the street</h4></Link>
             // add only line above
          </Route>

App.js

Import the component at the top of the file.

import DownTheStreet from './DownTheStreet';

Now we can make the route below outside to render the DownTheStreet component when the url ends in /down-the-street

//outside route is above. 
         <Route exact path='/down-the-street'> 
            <DownTheStreet /> 
          </Route>

this means that you don't have to add the glide({}) function calls in every component that you have a Link.

We are going to add 2 more function calls so that for glueOut which makes the browser look like cards being taken off the top and put on the bottom of a deck.

glueOut({
  name: 'glueout-left'
})
glueOut({
  name: 'glueout-right',
  direction: 'right'
})

App.js

Also, add the glueout-right transition to the /down-the-street Link

<Link transition='glueout-right' to='/down-the-street'><h4>Down the street</h4></Link>

it doesn't work yet. Why? Because we can't have more than one link inside a route like this. to fix it. Cut the link in the outside component liking you back to home.

The new route will look like this.

      <Route exact path='/outside'screen screenProps={{
          style: { backgroundColor: "#BDA3A1",
            ...screenStyle }}}>
              <Link transition='glueout-right' to='/down-the-street'><h4>Down the street</h4></Link>
          </Route>

Go to the DownTheStreet component, add the glueout-left transition to the Link.

<Link transition='glueout-right' to='/outside'>outside the house.</Link>

DownTheStreet.js

It works but it's not that fancy without the css style like the other Components have.

Add the screenProps to the Route.

<Route exact path='/down-the-street'  screen screenProps={{
                                 //changed color
          style: { backgroundColor: "#6B4E4D",
            ...screenStyle }}}>

Now that we have a glueOut working outside and down the street we get stuck between the two routes because the links take us back and forth.

To fix this let,s have the route INSIDE the DownTheStreet component takes us around the corner and back home.

              //only changed the to="/" and the >text inside the brackets<
<Link transition='glueout-left' to='/around-the-corner'>around the corner.</Link>

DownTheStreet.js

Back in the App.js let's make a route for /around-the-corner

        <Route exact path='/around-the-corner'screen screenProps={{
          style: { backgroundColor: "",
            ...screenStyle }}}>
              <Link to='/'><h4>Home</h4></Link>
          </Route>

App.js

Let's add one more effect so that we can teleport home with the fade transition.

fade({
  name: "default-fade"
});

Now add the fade transition to the '/' Link inside the /around-the-corner Route.

<Route exact path='/around-the-corner'screen screenProps={{
          style: { backgroundColor: "",
            ...screenStyle }}}>
              <Link transition='default-fade' to='/'><h4>Back to home</h4></Link>
</Route>

That's what this tutorial does.

I really want to popularize this package because I really like the ability it gives you to tell a story with your web dev.

This is the final product's git hub

This is another project for my girlfriend that uses tiger transitions.

Please like, share and follow if you found this tutorial engaging.

Setting up a news letter with React and mailchimp

Tallan Groberg — Wed, 08 Apr 2020 01:48:15 +0000

In this tutorial, we are going to leverage mailchimp’s API to set up a sign up for a news letter.

If you follow any of my other tutorials, you will find this one to be my easiest yet. This is because mailchimp is designed for Marketers, not developers. Because of that fact, it is extremely friendly to set up.

Who is this tutorial for?

Everyone that is trying to set up a mailing list within a react application.

What does this tutorial teach?

We strive for simplicity, so to make sure that this tutorial isn't wasting anyone's time. Visit this site to see exactly what it does and sign up for my news-letter

Prerequisites

create-react-app installed globally
mail chimp account
basic knowledge of react and javascript.
npm installed globally so that we can install packages.

First thing we need to do is make a new react app. we can do this on the command line.

This is what it looks like on mac.

create-react-app news-letter

cd into that folder and open it with the text editor of your choice. i will be using vs code.

In the src folder, open the App.js and delete the react boiler plate. inside the return statement.

return (
    <div>
      //blank
    </div>
  );

Now that we have a blank canvas to work with,

Let's install a few packages.

npm i dotenv react-mailchimp-subscribe

dotenv is for environment wide variables, so that you don't push your mailchimp url to git hub.

react-mailchimp-subscribe

This is so that we can use mailchimp's subscribe component to capture emails for us.

Next, if you are using vs code, right-click the src folder to make a .env file to keep our url private.

In the .env file, lets add the environment wide variable for our url.

These variables have to start with REACT_APP in screaming snake case in order to work.

REACT_APP_MAILCHIMP_URL='url goes here'

Now lets add mailchimp subscribe to the App.js

Used almost all from the docs.

import "react-mailchimp-subscribe" in the App.js at the top.

import MailchimpSubscribe from "react-mailchimp-subscribe"

Now add the mailchimp component.

Subscribe
<MailchimpSubscribe url={process.env.REACT_APP_MAILCHIMP_URL} />

We need our url, to do this, go to mailchimps site.

You will have to make an account and this can be a long process.

Once everything is set up and you have a mailchimp dashboard, we can finish the tutorial.

Now that you have a mailchimp dashboard, we should make our first email.

Click the create-button in the top right corner.

At the bottom click on the signup form.

click begin.

we have to find the action url in the copy and paste for the embedded form.

press cmd + f or on windows crl + f and type action into the field.

In the mess of HTML elements is the action url on the form, copy everything inside the quotations.

Go back to the .env file and paste the action url in the quotations for the variable.

REACT_APP_MAILCHIMP_URL='https://https://codeharp.us19.list-manage.com/subscribe/post?u=ca'sdo;dea'sdfha;lkajsd;lfkajs;dlfkja;slkfja;lj;'

Now when you enter an email into your input field in your react app. It will add that email to your email list.

Be sure to restart your server and put the .env file in the root of your directory and not the src folder.

finished website

I hope you found this helpful.

This was really hard to slowly poke around and figure out but now that it is in this tutorial, It should save you a lot of time!

Please Like and follow if you found this helpful.

Comment if you have questions or feed back.

May you have Happy dev days ahead!!

Setting up a site mailer with node mailer, express and Gmail

Tallan Groberg — Mon, 23 Mar 2020 22:40:48 +0000

photo from https://stories.wf.com/pony-express-riders-young-fast-fearless/

In this tutorial, we are going to be setting up a site mailer.

I think where a lot of devs go wrong with site mailers is trying to make one for an application instead of making a mailing service that thier application can use.

That's why in this tutorial we are going to set up a site mailer that can be used by any application.

This means that the contact form for your portfolio can also be used as the feedback form for your projects.

Once you have one of these set up you can do amazing things with your website, such as sending payment receipts to a user's email and informing a blogger of new followers.

What does this tutorial teach?

We are going to set up a contact form that sends what users enter into a form to a specific email using express, node mailer, react as a basic front end.

Why use react?

You can do the major functionality of this app without a front end framework. React is only going to be the form handling portion but it does provide the ability to scale if you want to do something more complex with a site mailer.

prerequisite software

1.node.js this is a must for every javascript related thing that happens outside a browser.

2.create-react-app you can only do the back end functionality without this but because this is going to help you to do more robust things with this tutorial, we are using it.

3.vscode you can use any text editor you want but I will be using vscode, this means it will be easiest to follow if you are too.

4.git cli for keeping versions and changes.

Prerequisite knowledge

basic javascript.
curiosity about express and node.js
how to install npm packages on the command line.

(optional) bash commandline

getting started

go to the directory where you keep your projects and begin by making a new folder, called mail-service

mkdir mail-service

cd into the directory

cd mail-service

make a new npm project by initializing a package.json

npm init -y

the -y means we want to create this without asking questions.

Open the project.

code .

In the package.json we have the basic setup. Let's install the npm packages.

npm i express morgan dotenv nodemailer

express is a minimal framework for setting up server-side applications.

morgan is an http request logger, this will allow us to see the status of our request without making a function

dotenv is a package to save environment wide variables keeping sensitive information off of github. we will use it to hide emails and passwords.

node-mailer this is all the helper methods to make our service send emails.

Make a server.js file to house our server

touch server.js

at the top add the back-end imports.

const express = require('express')
const app = express()
require('dotenv').config()
const morgan = require('morgan')
const nodemailer = require('nodemailer')
const port = 4444

at the bottom add the app.listen to give our back end a definite port.

app.listen(port, () => {
  console.log(`app is live on ${port}`)
})

in the middle of those, make our app use morgan so that we get a better idea of how our app is behaving.

app.use(morgan('dev'))

Now have our app use express.json() to make sure everything gets to our backend in proper type.

app.use(express.json())

Start the app on the commandline.

nodemon server

If everything went right and you have all the packages installed, you should have a file and terminal looking like this.

Now we want to add git, for brevity I won't do this in writing.

The outline of this app goes like this.

Make one working route to send an email, make a frontend to use that route with a form.

Let's start by making a folder.

mkdir routes

Right click the routes folder we will make a sendToMe.js

Add express and nodemailer to this file like so.

const express = require('express')
const sendToMeRouter = express.Router()
const nodemailer = require('nodemailer')

Add a console.log to that file so that we can make sure we are reaching the file from the server.js

console.log("from sendToMe")

sendToMe.js

export the Router() at the bottom of the file.

module.exports = sendToMeRouter

in the server.js have the app use that route file like this.

app.use('/sendtome', require('./routes/sendToMe'))

turn the server back on and see if the console.log shows up.

nodemon server

Now we can build out the mailer's functionality.

To do this we need to make an email address that this will use.

With Gmail, you have to use the turn on less secure apps to do this.

You can use an email you already have but please be careful not to publish your password.

Now, in your google account home, in the top left corner, go to security.

Scroll down until you reach less secure apps.

The alternative to this is figuring out how to enable your site to use Oauth in your app, that will just be another thing.

You should receive an email shortly from google saying that you enabled less secure apps.

Make a .env file

touch .env

Now we need to add the email and password to the .env file and app wide variable.

THE_EMAIL="super secret dont show anyone!!!"

THE_PASSWORD="super secret dont show anyone!!!"

.env

We are set up to make the transport object and the mailing functions in the sendToMe.js file.

const transport = {
  //all of the configuration for making a site send an email.

  host: 'smtp.gmail.com',
  port: 587,
  secure: false,
  auth: {
    user: process.env.THE_EMAIL,
    pass: process.env.THE_PASSWORD
  }
};

Now make the transporter function

const transporter = nodemailer.createTransport(transport);
  transporter.verify((error, success) => {
    if(error) {
      //if error happened code ends here
      console.error(error)
    } else {
      //this means success
      console.log('users ready to mail myself')
    }
  });

Let's add another function to make this work on a post request.

sendToMeRouter.post('/', (req,res, next) => {
    //make mailable object
    const mail = {
      from: process.env.THE_EMAIL,
      to: 'your.email@gmail.com',
      subject: req.body.subject,
      text: `
      from:
      ${req.body.name} 

      contact: ${req.body.email}

      message: 

      ${req.body.text}`
    }
// error handling goes here. 
  });

finish with some error handling.

transporter.sendMail(mail, (err,data) => {
      if(err) {
        res.json({
          status: 'fail'
        })
      } else {
        res.json({
          status: 'success'
        })
      }
    })

//still inside the .post request the next line should be });

You can test this in post man but remember that you have to have text, email, name, and subject defined in order to get this to work and enable cors app wide.

Ok now we get to my favorite part, the react app.

While still inside the project directory on the command line create-react-app

create-react-app client

Go to the package.json and connect the express app to the react app with a proxy like so.

//dont forget to add the comma after the curly bracket because it's json.
},
  "proxy": "http://localhost:4444/"

You will need to run the back and the front end at the same time.

on the back end

nodemon server

On in the client folder.

cd client && npm start

This should take you to the ordinary boiler-plate react.

Let's add axios to the client folder.

in client directory on the command-line

cd client && npm i axios

Remove all the code between the div tags.

Your app function should look like this.

function App() {
  return (
    <div className="App">

    </div>
  );
}

Now make a form with 3 inputs and a textarea

<form>
        <input type="text" placeholder="" name="" value={} onChange={} />
        <input type="text" placeholder="" name="" value={} onChange={} />
        <input type="text" placeholder="" name="" value={} onChange={} />
        <textarea name="" id="" cols="30" rows="10"></textarea>
      </form>

Dont panic! Our app will run again when we fill in the value and onChange attributes

We will have the useState hooks keep the string for us.

We need to import axios.

At the top.

import React, {useState} from 'react';
import axios from 'axios'

Inside the app function.

 const [inputs, setInputs] = useState({email: '', name: '', subject: '', description: ''})

Now to make the handleChange and the handleSubmit's

const handleChange = e => {
    const {name, value} = e.target
    setInputs(prev => ({...prev, [name]: value }))
  }
  const handleSubmit = e => {
    e.preventDefault()
    // post request goes here. 
  }

Add the place holders, name, value and onChange attributes so that our app isn't crashed anymore, add the onSubmit action to the form and a button. I've also added br tags.

<h1>feed back form. </h1>
      <form onSubmit={handleSubmit}>
        <input type="text" placeholder="email" name="email" value={inputs.email} onChange={handleChange} />
        <br />
        <input type="text" placeholder="name" name="name" value={inputs.name} onChange={handleChange} />
        <br />
        <input type="text" placeholder="subject" name="subject" value={inputs.subject} onChange={handleChange} />
        <br />
        <textarea name="description" placeholder="tell us about your experience" value={inputs.description} onChange={handleChange} cols="30" rows="10"></textarea>
<br />
        <button>submit</button>
      </form>

It's time for us to add the axios post request to /sendtome route inside the handleSubmit and configure the object so that everything is received properly.

The new handleSubmit will look like this.

const handleSubmit = e => {
    e.preventDefault()
    //destructure from inputs 
    const {email,name,subject,description} = inputs
    axios.post('/sendtome', {
      //make an object to be handled from req.body on the backend. 
      email,
      name,
      subject,
      //change the name to represent text on the backend.
      text: description
    }) 
  }

Let's give it a try.

If you copied and pasted all the code snippets it will work.

There you have it.

I'll be doing one on how to set up mailschimp to start your own news letter which gives much more beautiful emails than the plain text one you see here.

If you know anyone that this could help or just want to support me as a fellow tech enthusiast, please share and follow my posts.

Authenticate users with firebase and react.

Tallan Groberg — Wed, 26 Feb 2020 16:57:09 +0000

In this article, we are going to make a basic user auth with firebase. If you have experience with any other type of user auth, you probably got frustrated.

Firebase does have a learning curve but I have found it small compared to other alternatives.

Firebase is going to do a lot of the heavy backend functionality

If you would like to see what this app does here is the "finished" product you can here

Why is this tutorial useful?

This is how to leverage firebase so that you don't have to create your own backend, encrypt your user's passwords or go through the hassle of deploying a backend application.

Prerequisites:

understanding of JavaScript including how to pass arguments to functions and asynchronous code.
understanding of react, context, hooks with create-react-app.
Text editor of your choice.(I will use vscode)
A Firebase account
basic understanding of the command line.
knowledge of git.

Optional: bash command line/Mac OS. You can do this without it but I’ll be using it for this tutorial.

first, make a new firebase project by visiting https://firebase.com.

Click on a new project.

click "my first project" and then you can name your project whatever you want.

Click continue.

You can choose not to have google analytics and it should not interfere with this tutorial, I left it on, so you will see parts of my code where it’s enabled.

Click continue.

You will be prompted to select an account.

select the default account, then click create project.

you should now see this.

you should be in your firebase console for this project.

click on authentication on the left side navigation.

click set up sign-in method.

here is a wide variety of ways to set up users signing into our apps. We are going to do the easiest way for this tutorial.

click email and password.

Click enable.

Save.

Make sure that it actually got enabled.

Now go to the project overview.

We need to get info about how our app can send and receive firebase data, so we have to get API keys and other sensitive information given to us in the form of an SDK.

Click on the brackets to begin.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zzpeg5dqj7qmlewy87h9..

We will be creating a react app and adding everything inside the script tag to the react project.

since we don't have a firebaseIndex.js we can't add it yet.

this is everything we have to do on the firebase console for our project.

make a new react app.

create-react-app firebaseauthtutorial

cd the app

cd firebaseauthtutorial

this is a good moment to plan out what kind of packages are wanted. these will all be installed via npm.

firebase. if this was an ordinary javascript, we would use the whole script take and the SKD.
react-router-dom.

this is so that when a user logs in we display components only accessible by users.

dotenv, the best habit you can have with making apps that contain user data or leveraging APIs' (like this app will) is to ensure that hackers can't get access to your API keys, encryption techniques or other users sensitive info.

dotenv allows you to save sensitive information as environment wide variables, in a way that you can't publish to a remote repo but still be able to use in your app.

run an npm install on the command line for all the packages

pro tip: make sure that you are in the root directory of the project before you run npm install

npm install firebase dotenv react-router-dom

now open the project.

I'm using vscode so this is how from the command line.

code .

look at the package.json file and you should see the packages that you installed.

package.json

moving SDK firebase in the app.

before you copy and paste the SDK into our file, its best practice to add the .env file to the .gitignore so that you don't publish your environment variables to github. It is very easy to forget.

then add the API keys to the .env

then reference them from the firebaseIndex.js we are about to create to the .env file.

this way, you are never in danger of publishing your keys while following this tutorial.

Click on your .gitignore

write .env anywhere in the file

then right-click a blank spot in the root directory. (if you don't have one you can minimize the outline to reveal space.)

copy and paste the following variables to the .env file

REACT_APP_API_KEY=

REACT_APP_AUTHDOMAIN=

REACT_APP_BASEURL=

REACT_APP_PROJECT_ID=

REACT_APP_STORAGEBUCKET=

REACT_APP_MESSAGING_SENDER_ID=

REACT_APP_APP_ID=

REACT_APP_MEASUREMENT_ID=

Including the quotations copy and paste the info from the SDK one by one. API key, auth domain, baseurl ect...

you should have something like this.

your info from firebase.

REACT_APP_API_KEY="your secret api key"
REACT_APP_AUTHDOMAIN="your secret authdomain"
REACT_APP_BASEURL="your secret baseurl"
REACT_APP_PROJECT_ID="your secret projectid"
REACT_APP_STORAGEBUCKET="your secret storeagebucket"
REACT_APP_MESSAGING_SENDER_ID="your secret messaging sender id"
REACT_APP_APP_ID="your secret app id"
REACT_APP_MEASUREMENT_ID="your secret measurment id"

now the easy part.

Begin by making the folder to keep firebases SDK and the helper methods for the auth.

try and do this from your text editor.

by right-clicking the src folder and click new folder.

name the folder firebase.

now right-click the firebase folder and add a firebaseIndex.js

firebaseIndex.js.

import firebase at the top of the firebaseIndex.js file along with the features you want from it.

import firebase from 'firebase'
import 'firebase/auth'
import 'firebase/app'

now that your environment variables are already set up app-wide you can copy and paste this SDK to reference your sensitive data inside the firebaseIndex file with the code I provide.

var firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTHDOMAIN,
  databaseURL: process.env.REACT_APP_BASEURL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

add firebase.auth() helper method underneath the analytics() method.


firebase.auth()

we are going to need the firebaseConfig object in another file so it needs to be exported

export default {
  firebaseConfig, 
}

the whole file should look like this.



import firebase from 'firebase'
import 'firebase/auth'
import 'firebase/app'

var firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTHDOMAIN,
  databaseURL: process.env.REACT_APP_BASEURL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
firebase.auth()

export default {
  firebaseConfig, 
}

if you followed these steps you could have pushed to github at any time and it would not have saved your keys.

Adding the auth methods.

inside your firebase folder make a file called auth methods, this is where to keep an object that contains the signin, signup, signout, functions.

at the top import two things, firebaseConfig object and firebase from firebase like so.

import firebaseconfig from './firebaseIndex'
import firebase from 'firebase'

now make an export and make an auth methods object.

export const authMethods = {

// firebase helper methods go here... 

}

we are going to send this to context where this will be the top of a chain of methods that link all the way to the form for signin.

these are going to be key/value pairs that we give anonymous functions for signing in.


 export const authMethods = {
  // firebase helper methods go here... 
  signup: (email, password) => {

    },
  signin: (email, password) => {

    },
  signout: (email, password) => {

    },
  }

this looked really unusual the first time I saw it. This will make a lot more sense after we start calling on it from context.

this is from the firebase documentation for user auth.

signup: (email, password) => {
    firebase.auth().createUserWithEmailAndPassword(email,password) 
      .then(res => {
        console.log(res)
      })
      .catch(err => {
        console.error(err)
      })
    },

I want to test if this code works before I start adding the other methods.

to do that build the context and signup form and see if firebase will respond.

Creating context for our application.

right-click on the src folder and make a new folder called provider.

right-click on provider and make a file called AuthProvider.js

make a functional component, add props.

import React from 'react';

const AuthProvider = (props) => {
  return (
    <div>

    </div>
  );
};

export default AuthProvider;

outside of the function, make a firebaseAuth variable and make it equal to react context.

export const firebaseAuth = React.createContext()

we have to export it so that we can access the useContext hook.

erase the div tags and make the provider inside of the return for the AuthProvider I'm not going to explain everything that is happening here but if you want to know more about context this is an article where I explain context and the useContext hook.

const AuthProvider = (props) => {
  return (
    <firebaseAuth.Provider
    value={{
      test: "context is working"
    }}>
      {props.children}

    </firebaseAuth.Provider>
  );
};

AuthProvider.js

now we need to wrap our App.js in the AuthProvider component in the index.js file.

we also need to import our ability to route components dynamically, since we are already in this file, add BrowserRouter from react-router-dom.

start by importing the AuthProvider and BrowserRouter at the top.

import AuthProvider from './provider/AuthProvider'
import {BrowserRouter} from 'react-router-dom'

then make an App sandwich with BrowserRouter and AuthProvider.

ReactDOM.render(
<BrowserRouter>
  <AuthProvider>
    <App />
  </AuthProvider>
</BrowserRouter>
, document.getElementById('root'));

two things,

go to the App.js, at the top change how react is imported to include useContext and React.

import {firebaseAuth} so that we can destructure the test key/value pair out of it like this.

import React, {useContext} from 'react';
import {firebaseAuth} from './provider/AuthProvider'

inside the function destructure test from the firebaseAuth variable.

console.log test.

   const {test} = useContext(firebaseAuth)
    console.log(test)

go back to the terminal and start the server.

npm start

inspect with the dev tools and you should see this.

connecting to authMethods

now that we have context App wide, go back to the AuthProvider.js and import the authMethods.

import {authMethods} from '../firebase/authmethods'

This file to be the middle man between firebase and the Signup component we are about to make,

that means all the stateful logic will be housed here.

make a function called handleSignup inside the AuthProvider.

const handleSignup = () => {
    // middle man between firebase and signup 

  }

Pass it as a value in the firebaseAuth.Provider

 <firebaseAuth.Provider
    value={{
      //replaced test with handleSignup
      handleSignup
    }}>
      {props.children}

    </firebaseAuth.Provider>

now change test with handleSignup in the App.js

 const {handleSignup} = useContext(firebaseAuth)
    console.log(handleSignup)

App.js

you should see

in the AuthProvider, add the authMethod.signup() to the handleSignup.

  const handleSignup = () => {
    // middle man between firebase and signup 
    console.log('handleSignup')
    // calling signup from firebase server
    return authMethods.signup()
  }

make a components folder and Signup.js component, recreate the same functionality where we want it to end up so that we can define our routing in the App.js

make the Signup.js

make a basic component


// add useContext
import React, {useContext} from 'react';

const Signup = () => {


  return (
    <div>
      Signup
    </div>
  );
};

export default Signup;

destructure the handleSignup function out of context just like in the App.js

const {handleSignup} = useContext(firebaseAuth)
    console.log(handleSignup)

in the App.js add the beginnings of react-router-dom by removing the boilerplate and adding Switch and Route, setting the signup to be rendered by the Route.


import {Route, Switch} from 'react-router-dom'
import Signup from './component/Signup'

App.js

 return (
    <>
    {/* switch allows switching which components render.  */}
      <Switch>
        {/* route allows you to render by url path */}
        <Route exact path='/' component={Signup} />

      </Switch>
    </>
  );

if everything worked you should see a white screen with signup.

make a signup form.

return (
    <form>
      {/* replace the div tags with a form tag */}
      Signup
      {/* make inputs  */}
      <inputs  />
      <button>signup</button>
    </form>
  );

at this point, it might be tempting to make state here. but we want the context to be the single source of truth so that if a user toggles between login and signup, whatever they typed in will persist.

go back to the AuthProvider and start setting up state.

we need a piece of state for a token from firebase and for user data.

import useState next to React.

import React, {useState} from 'react';

AuthProvider.js

the pieces of state that we want will be.

token as null (then a string once we get a token from firebase), more about json web tokens.
input as an object with email and password both strings.
errors as an array, so that error messages can be displayed to the users.

add those states to the AuthProvider.js


const [inputs, setInputs] = useState({email: '', password: ''})
  const [errors, setErrors] = useState([])
  const [token, setToken] = useState(null)

add inputs to the value object of the provider.

<firebaseAuth.Provider
    value={{
      //replaced test with handleSignup
      handleSignup,
      inputs,
      setInputs,

    }}>

in the Signup.js get them from the authContext with the useContext hook like this.

  const {handleSignup, inputs, setInputs} = useContext(firebaseAuth)

make handleChange and handleSubmit functions as basic forms.

const handleSubmit = (e) => {
    e.preventDefault()
    console.log('handleSubmit')

  }
  const handleChange = e => {
    const {name, value} = e.target
    console.log(inputs)
    setInputs(prev => ({...prev, [name]: value}))
  }

change the form and input fields to work with the form functions.

<form onSubmit={handleSubmit}>
      {/* replace the div tags with a form tag */}
      Signup
      {/* make inputs  */}
      <input onChange={handleChange} name="email" placeholder='email' value={inputs.email} />
      <input onChange={handleChange} name="password" placeholder='password' value={inputs.password} />
      <button>signup</button>
    </form>

if you did everything correctly and ran a test that looks like this...

here is the error message you would have gotten.

the reason we got this error is that we didn't pass the authMethods.signup the email and password arguments that it was expecting.

pass inputs.email and inputs.password into authMethods.signin

authMethods.signup(inputs.email, inputs.password)

when you do a test like this.

you should get a response like this.

but if you try and do it twice you will get an error.

this is because you can't do this twice. all of the emails have to be unique.

to make it so that the error message displays to the user we have to do the following.

in the AuthProvider.js, pass setErrors as an argument along with email and password,

this is the only way I could figure out how to do this. whenever you do have to pass more than one argument to a function you should have a good justification.

in the authMethods.js on the signup(), add the third argument at the top and in the .catch, we will have the error messages save to state in the errors array.
have the error display to the screen by passing it to the Signup.js and mapping through the array.

//sending setErrors
  authMethods.signup(inputs.email, inputs.password, setErrors)
console.log(errors)

now add the setErrors message along with email and password.

AuthProvider.js
2.

  //catching setErrors
 signup: (email, password, setErrors) => {

authMethods.js

change the catch to the setErrors include prev in case it's more than one error

.catch(err => {
       //saving error messages here
        setErrors(prev => ([...prev, err.message]))
      })

if it worked and you console logged it, you should see this error.

add errors to the value object of the Provider

 <firebaseAuth.Provider
    value={{
      //replaced test with handleSignup
      handleSignup,
      inputs,
      setInputs,
//added errors to send to Signup.js
      errors,
    }}>
      {props.children}
    </firebaseAuth.Provider>

AuthProvider.js

destructure it from useContext from the Signup.js

const {handleSignup, inputs, setInputs, errors} = useContext(firebaseAuth)

Signup.js

now add a ternary that will only show up if an error occurs.

  <button>signup</button>
      {errors.length > 0 ? errors.map(error => <p style={{color: 'red'}}>{error}</p> ) : null}
    </form>

if everything worked you will get your error on the screen.

if you want to filter duplicates you can find out or see how I did on the repo but this tutorial is getting long and a couple more things to do.

to make it so that you can enable multiple emails per account.

go to firebase inside of this project, click on authentication.

click on signin method

scroll to the bottom and where it says advanced in small black letters. it says one account per email in bold.

Click the blue change button

click allow multiple accounts with the same email.

this will help us move faster with testing but don't forget to switch it back later.

The same way that we set an error we are going to save the token to localStorage and the token's state in the AuthProvider.
make it so that we can only see some components if we have a token.
redirect to that page if the token in local storage matches the token in state.
repeat the process for signin.
erase the token and pushing the user out of the authenticated parts of our app with the login method.
go to the AuthProvider.js and add setToken as another argument after setErrors.

//sending setToken function to authMethods.js
 authMethods.signup(inputs.email, inputs.password, setErrors, setToken)
    console.log(errors, token)

AuthProvider.js

add this as a 4th argument at the top.

// added the 4th argument
 signup: (email, password, setErrors, setToken) => {

inside the .then, underneath the console.log(res)...

I am about to save you so much time you would have to spend digging through the res object to find the token.

this is also about to be a little messy with the async code.

signup: (email, password, setErrors, setToken) => {
    firebase.auth().createUserWithEmailAndPassword(email,password) 
      //make res asynchronous so that we can make grab the token before saving it.
      .then( async res => {
        const token = await Object.entries(res.user)[5][1].b
          //set token to localStorage 
          await localStorage.setItem('token', token)
          //grab token from local storage and set to state. 
          setToken(window.localStorage.token)
        console.log(res)
      })
      .catch(err => {
        setErrors(prev => ([...prev, err.message]))
      })
    },

authMethods.js

now if you make yet another account and go to the browsers dev tools

_2. signing in _

we are going to copy and paste a lot of what we have for signup and easily configure it for login.

we will start from the bottom of the component tree by making a Signin component slightly change file by file until it works in the authMethods.

start by making a new file called Signin.js

copy and paste everything from the Signup.js to the Signin.js

highlight everywhere it says signup and change that to signin

Click on the name of the react component and Command + d if you are using a mac. Otherwise, you can use ctrl + f and type it in at the top.

I only had 3 words by remember to change handleSignup to handleSignin using the same method.

change the button as well.

Now go to the App.js and import the file.

import Signin from './component/Signin'

make sure that component folder on the import is singular.

add a new route for the Signin

<Route exact path='/' component={Signup} />
        <Route exact path='/signin' component={Signin} />

your signin component will render now if you type in the http://localhost:3000/signin but as soon as you do click the button it will crash because there is no handleSignin function.

to fix that we can go to the AuthProvider.js and copy and paste changing the wording just like we did for signup. then add the handleSignin function to the value object.

const handleSignin = () => {
    //changed to handleSingin
    console.log('handleSignin!!!!')
    // made signup signin
    authMethods.signin(inputs.email, inputs.password, setErrors, setToken)
    console.log(errors, token)
  }

now to add that function to the firebaseAuth.Provider

 <firebaseAuth.Provider
    value={{
      //replaced test with handleSignup
      handleSignup,
      handleSignin,
      inputs,
      setInputs,
      errors,
    }}>
      {props.children}
    </firebaseAuth.Provider>

AuthProvider.js

now go to authMethods.js and do something similar, instead of createUserWithEmailAndPassword, change to... signInWithEmailAndPassword()

signin: (email, password, setErrors, setToken) => {
    //change from create users to...
    firebase.auth().signInWithEmailAndPassword(email,password) 
      //everything is almost exactly the same as the function above
      .then( async res => {
        const token = await Object.entries(res.user)[5][1].b
          //set token to localStorage 
          await localStorage.setItem('token', token)
          setToken(window.localStorage.token)
            console.log(res)
      })
      .catch(err => {
        setErrors(prev => ([...prev, err.message]))
      })
    },

if you didn't delete your token from local storage then a token will still be there.

almost there!!

make a home component and only allow users with tokens to get there.
make a signout button that deletes the token and pushes the user away from the page with react-router-dom.

since you should already be in the authMethods.js we will start from the top and go to the bottom this time.

this method is really simple compared to the other two because we aren't using firebase to keep user's status there.

//no need for email and password
signout: (setErrors, setToken) => {
      // signOut is a no argument function
    firebase.auth().signOut().then( res => {
      //remove the token
      localStorage.removeItem('token')
        //set the token back to original state
        setToken(null)
    })
    .catch(err => {
      //there shouldn't every be an error from firebase but just in case
      setErrors(prev => ([...prev, err.message]))
      //whether firebase does the trick or not i want my user to do there thing.
        localStorage.removeItem('token')
          setToken(null)
            console.error(err.message)
    })
    },
  }

go to AuthProvider.js and make a signout function

const handleSignout = () => {
    authMethods.signout()
  }

add the method to the Provider

setInputs,
errors,
handleSignout,

now we need a component for this to be useful which we haven't done yet.

make a Home.js, and a basic React component inside it.

import React from 'react';

const Home = (props) => {
  return (
    <div>
      Home
    </div>
  );
};

export default Home;

import useContext and firebaseAuth

import React, {useContext} from 'react';
import {firebaseAuth} from '../provider/AuthProvider'

between return and Home inside the Component, destructure signout from useContext

  const {signout,} = useContext(firebaseAuth)

in the return statement. add login successful, then a button to call on signout.

 return (
    <div>
      Home, login successful!!!!!!
      <button onClick={signout}>sign out </button>
    </div>
  );

before we can test it, we need to go back up our component tree and change how strict it is to access each component.

in the App.js we are going to use a ternary statement to make it so that users can't get to the home component without a token saved to state.

import the Home component in the App.js.


import Home from './component/Home'

destructure the token out of firebaseAuth with useContext

  const { token } = useContext(firebaseAuth)
  console.log(token)

when you use Route to render the Home component, add a ternary statement checking the data type of the token

this means that setting up the "/" or root URL differently.

change your Home components route to use the render prop instead of the component prop. and designate the URL paths more strictly.

        <Route exact path='/' render={rProps => token === null ? <Signin /> : <Home />} />
        <Route exact path='/signin' component={Signin} />
        <Route exact path='/signup' component={Signup} />

in the AuthProvider.js, add the token to the value object.

<firebaseAuth.Provider
    value={{
      //replaced test with handleSignup
      handleSignup,
      handleSignin,
      token,
      inputs,
      setInputs,
      errors,
      handleSignout,
    }}>
      {props.children}
    </firebaseAuth.Provider>

now users can signin and signout. One final touch, make it so that when a user signs up, react-router-dom will send them to the home page.

go to the Signup.js and import withRouter from react-router-dom

import {withRouter} from 'react-router-dom'

pass the default export to the withRouter higher-order component


export default withRouter(Signup);

add props to the Signup component

const Signup = (props) => {

now we have access to prop.history.push("/goAnyWhereInApp")

now make handleSubmit an async function and await the handleSignup and then push to the root URL.

const handleSubmit = async (e) => {
    e.preventDefault()
    console.log('handleSubmit')
    //wait to signup 
    await handleSignup()
    //push home
    props.history.push('/')
  }

you might have a delay, but once you get your credentials it will work.

if you want to publish this sight here is how with surge. I am a big fan and am doing these firebase tutorials because of a dev who has suffered much at the hands of heroku

this is the finished product

this is the github give it a star if you can.

Finally, that is it

you now have a static site with powerful backend functionality.

I will be doing a lot more tutorials on firebase.

please like and share if you found this tutorial beneficial.

the firebase docs are helpful but I have a few things in here that make it so much easier to transpose to a react project.

if you have anything to say please add it to the comments below.

Context and the useContext hook.

Tallan Groberg — Sun, 02 Feb 2020 18:50:30 +0000

image from https://www.udemy.com/course/react-hooks-tutorial/

In this tutorial we are going to be making a basic app with context so that the user can enjoy dark mode in your react app.

Why is this helpful?

this is helpful because context allows you to scale your applications without having to pass props between components that don't need them.

As it stands this is the simplest way I have come across to make context.

How you should use this tutorial?

you should try and go through this tutorial with as little referencing as possible. Come up with your own way of setting up context using hooks, then practice until you can do this from memory.

prerequisites:

basic knowledge of javascript
basic knowledge of react
create react app installed globally on your computer.
a text editor, I use VS code.

getting started.

create a new react app by running this command in your command-line.

create-react-app use-context-tutorial

open the folder.

cd use-context-tutorial

open it in your text editor.

code .

make sure that you have the react boiler plate by starting the app.

npm start

after you have verified that everything is working by a the react logo appearing.

in your src folder make another folder called providers

you can do this by right clicking the src if you are using vscode then click the new folder option.

inside the providers folder make an new file called ThemeProvider.js

in your ThemeProvider.js you are going to make an exported const containing the react context object and the ThemeProvider function so that we can start declaring theme as a piece of state.

start by importing react at the top of the file.

import React from 'react';

then make make a variable for the context to live and make it equal to React.createContext() by adding this line.

export const themeContext = React.createContext()

Now make a function that we can have state and put the themeContext.Provider with value object in the return for the ThemeProvider function.

we are going to need props for the ThemeProvider as well.

you should have a function that looks like this.

const ThemeProvider = (props) => {
  return (
    <themeContext.Provider value={{

    }}>

    </themeContext.Provider>
  );
};

export default ThemeProvider;

notice that the value prop on the Provider has 2 sets of curly brackets. this is because you are breaking out of JSX for the first, then going into object notation for the second.

between the opening and closing brackets for the Provider we are going to add the consumer

we need to add state to this function so this is a perfect job for useState.

import useState at the top.

import React, {useState} from 'react';

now add the state for the theme and set the initial state to 'light'

const [theme, setTheme] = useState('light')

add the theme inside of the value for the Provider.

Between the opening and closing angle brackets on the Provider, add the props.children object inside curly brackets.

the whole file should look like this.

import React, {useState} from 'react';

export const themeContext = React.createContext()

const ThemeProvider = (props) => {
  const [theme, setTheme] = useState('light')

  return (

    <themeContext.Provider value={{
      theme
    }}>
      {props.children}
    </themeContext.Provider>
  );
};

export default ThemeProvider;

notice that even though we put the theme inside of an object this will still be valid javascript. this is because it is considered an object literal

we are done in this file. Go to the index.js file so that we can wrap the app component with the provider.

first import the ThemeProvider like this.


import ThemeProvider from './providers/ThemeProvider'

then make an app sandwich with some ThemeProvider bread like this.

ReactDOM.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>

, document.getElementById('root'));

now everything inside of your application should have access to your context.

to test it out, go to your App.js and set up the theme.

first we need to import the useContext hook inside the App.js

import React, {useContext} from 'react';

we also want the theme context in this component.

import { themeContext } from './providers/ThemeProvider';

between the lines for function App() and return we want to grab the theme with the useContext hook.

  const {theme} = useContext(themeContext)

now add a console.log for the theme

console.log('theme', theme)

if your local server is still on and you did everything correctly, when you open your dev tools you should see something like this...

just to be sure here is the whole App.js


import React, {useContext} from 'react';
import logo from './logo.svg';
import './App.css';
import { themeContext } from './providers/ThemeProvider';

function App() {

  const {theme} = useContext(themeContext)

  console.log('theme', theme)


  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

now we can change our theme with click events.

to do that go back to your themeProvider and add setTheme to your Providers value object the same way you added the theme.

return (
    <themeContext.Provider value={{
      theme,
      setTheme
    }}>
      {props.children}
    </themeContext.Provider>
  );

don't forget the comma. ,,,

in the App.js add the setTheme inside the curly brackets to add it to the available objects from the themeContext.

const {theme, setTheme} = useContext(themeContext)

grabbing things from themeContext

make a button under the learn react link.

 <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <button >change theme</button>

now we can make a new string populate the theme state in the ThemeProvider from the App.js.

to do this, add an onClick event with the setTheme making the new string 'dark'.

<button onClick={() => setTheme('dark')}>change theme</button>

you could change theme to a boolean to make it so that you can switch back and forth but that is a challenge I leave up to you.

now we can add inline style to make the background color change on the click event.

on the div right below the return add this style attribute.

<div style={theme === 'dark' ? {backgroundColor: "#000000"} : null} >

it still doesnt work when you click it.

there is css over riding your styles from the header attribute.

delete the className on the header to solve the problem.

  <header>

everything should be working and I know you can make it prettier that I have here but the main point was to learn about context.

You can really make this your own from here.

see the github

React router dom: Nested routes

Tallan Groberg — Mon, 20 Jan 2020 21:10:04 +0000

In this tutorial, we are going to build a nested route, or commonly called nested routing params.

If you prefer videos this is the youtube video

I consider this tutorial an example of nested routing because it is on the API level. However for the sake of simplicity they are only defined as routing parameters within the scope of the what is declared in the App.js that this tutorial shows how to build.

Who is this tutorial for.

This is for any one that has a list of information being displayed to a user, when a user clicks a specific item in the list, that item will display a new page only showcasing that item.

How it should be used.

I highly recommend doing this tutorial. deleting what you did. checking how far you can get from memory. referencing the tutorial when you get stuck. Deleting the app after you finish until you can do nested routes from memory.

I'm a huge advocate of memorizing how to code vs... reference, copy and paste, move on.

Memorizing how to do basic pieces of functionality will make you a faster dev in the long run.

Why nested routing is useful.

Having the ability to display more information that a user clicks on in a dynamic way like this keeps your web sites more organized and therefore, scalable.

This is also foundational for almost every e-commerce website, so knowing how to do this could mean the difference between you and your dream job as a developer, or the ability to make an online business.

Why this can be hard.

the reason why nested routes are tricky to learn is because you are representing 1 piece of information in two very different ways and they look very similar in the browser.

Prerequisites

knowledge of javascript and react.

basic knowledge of command line to install npm packages.

if you don't have npm installed on your computer, these commands work on mac or pc. you can get find out how here.

a text editor, I'll be using vs-code.

let us get started. Make a new react app.

create-react-app nested-routes-exp

after it installs, cd into the project folder.

cd nested-routes-exp

inside the root of the project directory, on the command-line, install react-router-dom.

npm i react-router-dom

open your project in your text editor of choice. This is how on the command-line with vs-code.

code .

the top section of your package.json file, also in your root directory,you should have a place that says react-router-dom inside the curly brackets for the dependencies section.


{
  "name": "nested-routes-exp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
// *you should have this below

    "react-router-dom": "^5.1.2",

// * you should have this above. 
    "react-scripts": "3.3.0"
  },

NOTE: DO NOT change this file directly if it isn't there. run npm i react-router-dom on the command line as shown above.

Now that we know that we know react-router-dom is installed, make sure that the whole app has access to this functionality.

to do this...

Open the index.js file in your text editor.
import {BrowserRouter} from "react-router-dom"
BrowserRouter is just a piece of context that you didn't make but imported instead. so wrap your in BrowserRouter so that you can access it down the component tree.

The whole file should look like this.


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

//import BrowerRouter
import {BrowserRouter} from 'react-router-dom'

ReactDOM.render(

  //sandwich the App with some BrowserRouter bread
    <BrowserRouter>
      <App />
    </BrowserRouter>
, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

index.js in the src folder.

To ensure that this worked, open your App.js and we will import the pieces of functionality we want from react-router-dom and console.log them.

we are going to use {Route, Switch } from "react-router-dom"

Route gives us a way to declare components that appear when we type in a url.

Switch gives the ability to customize which components will display. In this case, the list of things we want and then on the click event displaying that item from the list.

The App.js should look something like this.


import React from 'react';
import logo from './logo.svg';
import './App.css';

// add imports 
import {Route, Switch} from 'react-router-dom'


//add props as an argument
function App(props) {

  console.log('route',Route)
 console.log('switch',Switch)

  return (
    <div className="App">

    </div>
  );
}

export default App;

now start this project on a local server.

npm start

if your App.js is like the one above and you inspect the page you should see 2 console logged functions along with a blank white screen.

we know Route and Switch are here in the App.js to make sure we can use them lets make a Home.js and a NoMatch.js as a 404 page to see if we can get them to display separately.

if you are using vscode, you can right-click the src folder and choose to make a new folder called components, then you can make and name the 2 files.

make the skeleton of these two components.

Home.js

import React from 'react';

const Home = (props) => {
  return (
    <div>
      Home
    </div>
  );
};

export default Home;

NoMatch.js

import React from 'react';

const NoMatch = (props) => {
  return (
    <div>
      Error 404
    </div>
  );
};

export default NoMatch;

import these components in your App.js


import Home from "./components/Home"
import NoMatch from "./components/NoMatch"

add these components to the return on the App.js

 return (
    <div className="App">
 //testing if they show up

      <Home />
      <NoMatch />

    </div>
  );

now we want to add Switch to get the functionality we want by adding the inside the return

 return (
    <div className="App">
      {/* add Switch notice that the no match component isn't rendering. */}
      <Switch>

        <Home />
        <NoMatch />

      </Switch>
    </div>
  );

we are only getting one component right now because Switch reads from top to bottom.

lets add a route.

there are two ways to do this, change your home component to look like this.

<Route exact path='/home'> <Home /> </Route>

this allows us to only render the home component when we type into the Url /home. give it a try

and if we don't designate a path we get a page not found.

There are a few ways to define routes, another syntax is component={} prop for the route

<Route path component={NoMatch} />

Now the only time any other component will show up besides the 404 page is when we define that path here in our App.js

Normally this would be your home page, but for demonstration purposes, I wanted to show how you explicitly define them any way you want.

also, render is better than component because you can pass your own props along with render props. rProps for short.

now we are ready to map through a list on the home page.

I will be using the starwars API to demonstrate.

import {useEffect, useState} on the Home.js like so...

import React, {useEffect, useState} from 'react'

this means that we should install and import axios to make life a little easier.

npm i axios

in the Home.js at the top.

import axios from 'axios'

inside the function make an array for the starwars characters

  const [characters, setCharacters] = useState([])

and a useEffect to handle the get request.


useEffect( () => {
    axios.get(`https://swapi.co/api/people`)
      .then(res => {
        console.log(res.data.results)
      })
  }, [])

This should give you 10 objects in the console.log

Set these objects to state by replacing the console.log with setCharacters.

setCaracters(res.data.results)

now display the characters to the browser by mapping them in the return.

Home: 
      {characters.map(character => {
        return <h1>{character.name}</h1>
      })}

cool almost there.

Next objectives

get the characters name to show up in the url by replacing h1 with a Link .
make the link render a Character component.

import {Link} from react-router-dom

add the name link

<Link to={'/' + character.name}>{character.name}</Link>

click a character and you should see there name appear in the URL.

Make a Character.js we are going to need a axios.get useEffect and useState in this component.

We also need useParams from react router dom. so that we can get the names from the url.

here is the skeleton.

import React, {useEffect, useState} from 'react';
import axios from 'axios'
import {useParams} from 'react-router-dom'

const Character = (props) => {
  return (
    <div>
      Character: 

    </div>
  );
};

export default Character;

Now let's make it so that this component shows up when we click a character by declaring that route in the App.js

Add this Route inside the Switch.

<Route exact path='/:name'> <Character /> </Route>

It’s important to understand that if we were to write the path=“/people/:name” it would be an example of a nested Route, since it’s not it’s considered a routing parameter.

Notice the path='/:name' the : makes it so that we can have an id representing the name.

We need access to a thing that react-router-dom provides called match from params
console.log(useParams()) in the Character.js


console.log(useParams())

Walk down the object so that the character's name is just a string and not a key-value pair.

console.log(useParmas().name)

the console.log save that string to a variable so that you can add it to the url.

Note: react will throw an error if you try and call useParams directly in the useEffect. This means you must call useParams outside the useEffect.

const name = useParams().name

Make the useEffect and the useState

const [character, setCharacter] = useState([])


//above the return.

Since we want a single character, useEffect has to do a couple things.

do a get request for a single character with a search.
add that character to state.

this is what that useEffect looks like.

useEffect( () => {
    axios.get(`https://swapi.co/api/people/? 
     search=${name}`)
      .then(res => {
        setCharacter(res.data.results)
      })
  }, [])

This is how you set up a search of an API by a click event with react-router-dom.

Make the info about the character appear on the screen you can add anything you want but this is what I wanted to show for this tutorial.

Inside the return statement add the extra info you wanted to display.

return (
    <div>
        Character: 
        {character.map(char => {
          return <>
          <h1>{char.name}</h1>
            <p>eye color: {char.eye_color}</p>
            <p>hair color: {char.hair_color}</p>
            <p>birth year: {char.birth_year}</p>
            <p> gender: {char.gender}</p>
          </>
        })}
        <Link to='/home'>back to home</Link>
    </div>
  );

This is my end result.


import React, {useEffect, useState} from 'react';
import axios from 'axios'
import {Link, useParams} from 'react-router-dom'



const Character = (props) => {
  const [character, setCharacter] = useState([])

    const name = useParams().name

  console.log('character',character)
  useEffect( () => {
    axios.get(`https://swapi.co/api/people/?search=${name}`)
      .then(res => {
        setCharacter(res.data.results)
      })
  }, [])


  return (
    <div>
        Character: 
        {character.map(char => {
          return <>
          <h1>{char.name}</h1>
            <p>eye color: {char.eye_color}</p>
            <p>hair color: {char.hair_color}</p>
            <p>birth year: {char.birth_year}</p>
            <p> gender: {char.gender}</p>
          </>
        })}
        <Link to='/home'>back to home</Link>
    </div>
  );
};

export default Character;

That's it! I would suggest playing around and adding upon this tutorial to get the most out of it.

the API is kind of slow but it might be cool to make your own back-end and database and see what you could do.

I hope this tutorial was helpful.

If there is anything you would like me to add or if there are errors to fix, any kind of feedback in general, add them to the comments below.

github

React with Firebase: Firestore setup

Tallan Groberg — Mon, 13 Jan 2020 00:30:03 +0000

who is this article for?

anyone trying to set up a serverless database option.

To be sure I don't waste your time and this is actually what you are looking for...

this is the github repo

this is the working product on surge

how to use it?

think of this as a small piece of functionality to incorporate into a much larger app.

what we will learn.

this is an example of the most basic firestore setup for a react application.

prerequisites:

create-react-app installed.

firebase account

understanding of react and javascript.

basic understanding of npm and firebase.

I will be using bash command line as well as vscode

the first thing we need to do is set up our firebase app inside the firebase console.

if you don't have a firebase console already you can make one by clicking here to get started

click add project.

name your project.

select your default account.

click where it says database.

click where it says to make a database.

start in test mode and once everything is working change back to production mode.

choose a location. Ideally where your users are likely to be and not necessarily where you are.

next you need to register your app.

name your app.

now we need to add firebase to our react app.

start by making a new react app from the command-line.

create-react-app firestore-tutorial

cd into the app

cd firestore-tutorial

once installed, make a new folder called firebase inside the src folder. you can make the file at the same time too!

mkdir src/firebase && touch src/firebase/index.js

The above command will make a folder by walking down the folder structure and then, after the && sign, it will make a file in the folder you just created.

start your server by going back to the command line to running npm start

npm start

now we go back to the firebase console and grab our firebase SDK and set that up inside of a file that we can use app wide.

hover on the cog next to project overview in the top left corner of the project page and click on project settings.

this takes you to a page providing general settings. scroll down to the your apps section and you will see an HTML snippet.

if this was just javascript then we would need to add this to the index.html of the webpage.

since this is a React project we have to add only the javascript inside the script tag and add that to the index.js inside the firebase folder

copy and paste your firebase SDK into your firebase/index.js (remember that this is different from you index.js below your App.test.js inside the src folder.)

add the exports and imports, it should look something like this.


import firebase from 'firebase'
import 'firebase/firestore'

firebase.initializeApp({
  apiKey: "super secret don't tell",
  authDomain: "firestore-tutoral-the-first.firebaseapp.com",
  databaseURL: "https://firestore-tutoral-the-first.firebaseio.com",
  projectId: "firestore-tutoral-the-first",
  storageBucket: "firestore-tutoral-the-first.appspot.com",
  messagingSenderId: "super secret don't tell",
  appId: "super secret don't tell",
  measurementId: "super secret don't tell"
});


let db = firebase.firestore()


export default {
  firebase, db
}

now import firebase into the App.js at the top of the file like so.

import firebase from './firebase/index'

then inside the App component add a console log

console.log(firebase)

open the dev tools and you should see your config object.

now you have access to firebase at the top of your component tree which means that you have firebase anywhere in your app.

now make sure that you have access to your database by adding .db to the console.log

console.log(firebase.db)

in the dev tools, you should see Firestore with all its helper methods.

let's use the infamous todo list to test our firestore capabilities.

I always like to break down my development into the smallest possible step forward. this means sending anything at all the firestore.

set up the function for firestore like so.

firebase.db.collection('todo').add({})

we want to know what happened after we sent it, we want this function to let us know if it sent or failed. A prefect case for .then and .catch

change the function to look like this.


 firebase.db.collection('todo').add({title: 'first todo', description: 'new todo' })
    .then(documentReference => {
      console.log('document reference ID', documentReference.id)
    })
    .catch(error => {
      console.log(error.message)
    })

this is almost exactly like the docs

now we want to add the button to send this to firebase. To do that, we need to make this function a variable so that we don't have to add this whole function inside an onClick for a button.

after you get rid of all the react boiler plate and add the sendTodo in front of the firebase.db function you should have a component that looks like this.

import React from 'react';
import firebase from './firebase/index'

const App = () => {

  console.log(firebase.db)

  const sendTodo = () => { firebase.db.collection('todo').add({title: 'first todo', description: 'new todo' })
    .then(documentReference => {
      console.log('document reference ID', documentReference.id)
    })
    .catch(error => {
      console.log(error.message)
    })

  }

  return (
    <div>
      <h1>send todo</h1>
        <button onClick={sendTodo}>click here to send</button>
    </div>
  );
};

export default App;

go to localhost:3000 and click the button to send todo.

this will give you a document reference id.

if you go back to your firebase console and click on database.

You will notice that some changes have occurred.

congrats!!

you have set up a serverless react app.

we still have to get this displayed to the screen.

the best practice would be to save everything to state as soon as the component renders.

a perfect job for useState to store the todos and useEffect to save them as soon as the component renders.

add useState and useEffect at the top.

import React, {useEffect, useState} from 'react';

make the piece of state at the top of the component.

  const [todos, setTodos] = useState([])

the todo is an object, so we want todos to be an array of objects [{..}, {..} ect...]

now make the function to get the data from firestore and save it to the todos state with useEffect.

useEffect( () => {
        getTodos()
    }, [])

    const getTodos = () => {
      firebase.db.collection('todo').get()
        .then(querySnapshot => {
        querySnapshot.forEach( doc => {

          setTodos(prev => ([...prev, doc.data()]))
        })
      })
      .catch(err => {
        console.log(err.message)
      })
    }

now we can display those todos to the browser.

add this line inside the render method and div

        {todos.length === 0 ? null : todos.map(todo => <h1 >{todo.title}</h1>) }

here is what the App.js looks like so far...

import React, {useEffect, useState} from 'react';
import firebase from './firebase/index'

const App = () => {
  const [todos, setTodos] = useState([])

    useEffect( () => {
        getTodos()
    }, [])

    const getTodos = () => {
      firebase.db.collection('todo').get()
        .then(querySnapshot => {
        querySnapshot.forEach( doc => {
          setTodos(prev => ([...prev, doc.data()]))
        })
      })
      .catch(err => {
        console.log(err.message)
      })
    }


  const sendTodo = () => {
    firebase.db.collection('todo').add({title: 'first todo', description: 'new todo', })
    .then(documentReference => {
      console.log('document reference ID', documentReference.id )
    })
    .catch(error => {
      console.log(error.message)
    })
  }


  return (
    <div>
      <h1>send todo</h1>
        <button onClick={sendTodo}>click here to send</button>
         {todos.length === 0 ? null : todos.map(todo => <h1 >{todo.title}</h1>) }
    </div>
  );
};
export default App;

now let's make it so that we send data based on user input.

let's make an initial state and have form inputs equal that, it will be an object.

const initstate = { title: '', description: ''}
  const [inputs, setInputs] = useState(initstate)

add the form and input fields to change this state.

 <form onSubmit={sendTodo}>
          <input name='title'
            placeholder="title" 
            value={inputs.title}
            onChange={handleChange}/>
          <input 
            name='description'
            value={inputs.description} 
            placeholder="description" 
            onChange={handleChange}/>
            <button>send todo</button>
        </form>

make the handleChange function

const handleChange = e => {
    const {name, value} = e.target
    setInputs(prev => ({...prev, [name]: value}))
  }

lets add a the event object e for short to the sendTodo and e.preventDefault() to keep it form automatically refreshing.

the first 2 lines of the sendTodo() function should look like this.

 const sendTodo = (e) => {
    e.preventDefault()

the new getTodos() will look like this now.

const getTodos = () => {
      firebase.db.collection('todo').get()
        .then(querySnapshot => {
        querySnapshot.forEach( doc => {
          setTodos(prev => ([...prev, doc.data()]))
        })
      })
      .catch(err => {
        console.log(err.message)
      })
    }

this isn't best practice but it will work for learning purposes.

now call on the getTodos() in the sendTodos() under the console.log('document reference ID', documentReference.id)

the new sendTodo() will look like this.

const sendTodo = (e) => {
    e.preventDefault()
    firebase.db.collection('todo').add(inputs)
    .then( async documentReference => {
      console.log('document reference ID', documentReference.id)
      await setTodos([])
      getTodos()
    })
    .catch(error => {
      console.log(error.message)
    })
  }

we make some async and await magic happen in the .then this is because it will duplicate state (Not firestore) everytime you add a todo. we are making this function await us setting state back to empty and only after are we repopulating state.

finding a better way to do this is an exercise I will leave to you. after you figure it out leave the technique you used in the comments.

and the whole App.js with everything working will look like this.

import React, {useEffect, useState} from 'react';
import firebase from './firebase/index'



const App = () => {
  const [todos, setTodos] = useState([])
  const initstate = { title: '', description: ''}
  const [inputs, setInputs] = useState(initstate)

    useEffect( () => {
        getTodos()


    }, [])
    const getTodos = () => {
      firebase.db.collection('todo').get()
        .then(querySnapshot => {
        querySnapshot.forEach( doc => {

          setTodos(prev => ([...prev, doc.data()]))
        })
      })
      .catch(err => {
        console.log(err.message)
      })
    }


    const sendTodo = async (e) => {
      e.preventDefault()
      await firebase.db.collection('todo').add(inputs)
      .then( async documentReference => {
        console.log('document reference ID', documentReference.id)
        await setTodos([])
     // set todos back to an empty array before re-fetching the whole db.
        getTodos()
      })
      .catch(error => {
        console.log(error.message)
      })

  }

  const handleChange = e => {
    const {name, value} = e.target
    setInputs(prev => ({...prev, [name]: value}))
  }


  return (
    <div>
      <h1>send todo</h1>
        <form onSubmit={sendTodo}>
          <input name='title'
            placeholder="title" 
            value={inputs.title}
            onChange={handleChange}/>
          <input 
            name='description'
            value={inputs.description} 
            placeholder="description" 
            onChange={handleChange}/>
            <button>send todo</button>
        </form>


         {todos.length === 0 ? <p>make  your first todo</p> : todos.map(todo => <h1 >{todo.title}</h1>) }
    </div>
  );
};

export default App;

that's it, you now have a static website with the use of a server.

obviously there is a lot to do to make this a functional website but this was about getting started with firestore, if you want to make another CRUD app there are a lot of tutorials on how to do so. The only way you can become a better developer is by memorizing the small lego pieces and practicing how to put them together.

conclusion...

every problem you run into is an opportunity to strengthen your technical sophistication as a developer. that being said. see if you can figure out how to make this a full CRUD app without finding another tutorial.

the docs are a great resource

if you liked this article please share and subscribe. if you didn't like it please tell me why and I will improve everytime I get feedback

the github for this article.

see the working project.

thanks