Forem: Farley Knight

Three Implementations of a Bag in Python

Farley Knight — Sun, 05 Apr 2020 22:32:48 +0000

One of the first data structures discussed in Sedgewick's Algorithms is the Bag. A Bag is a data structure, which holds an unordered collection. We say unordered because it is in contrast to ordered collections like conventional arrays. Because we are not concerned with order, we can store the elements in any way we want.

This article will discuss three different implementations of Bag, each using a different internal data structure. By using different internal data structures, a clearer picture is created on the value of these interfaces, and can also help identify time complexity trade-offs.

The Bag Interface

The image below describes a Bag interface in Java:

It describes five operations:

The constructor Bag() takes zero arguments
The method add(item) inserts an item into the Bag.
The method isEmpty() tells us if the Bag is empty.
The method size() tells us the size of the Bag.
The interface Iterable<Item> in Java allows the use of the for .. in .. loop.

Implementing `Iterable` in Python

Unlike Java, Python does not have a formal concept of a typed interface. However, it does have facilities to allow an object to be iterable, much like Java, using the __iter__ and _next__. The following is an example of how these methods work in Python:



class DoubleYourNumber:
  def __init__(self, start=0, stop=10):
    self.start = start
    self.stop  = stop
  def __iter__(self):
    self.current = self.start
    return self
  def __next__(self):
    if self.current <= self.stop:
      value = self.current * 2
      self.current += 1
      return value
    else:
      raise StopIteration

The above is an example of a class that supports the Python Iterator interface. Below is an example of how this class could be used to iterate:



>>> for value in  DoubleYourNumber(stop=5):
...    print(value)
...
0
2
4
6
8
10

You can get the same effect by using iter and next directly on the iterator object:



>>> doubler = DoubleYourNumber(stop=5)
>>> iter_doubler = iter(doubler)
>>> next(iter_doubler)
0
>>> next(iter_doubler)
2
>>> next(iter_doubler)
4
>>> next(iter_doubler)
6
>>> next(iter_doubler)
8
>>> next(iter_doubler)
10
>>> next(iter_doubler)
Traceback (most recent call last):
...
StopIteration

In a way, you can think of iterators as following this while loop pattern:



iter_object = iter(object)

while True:
  try:
    value = next(iter_object)
    # Do something with `value`
  except StopIteration:
    break # Leave the infinite while loop

We'll be using this pattern in our implementations of Bag.

Unit Testing a Bag

Since we don't have a formal interface, we can instead rely on unit testing to confirm the implementation is useful for our needs. Below is a set of tests that we can use to verify our implementation.



import unittest

from bag_implementation import Bag

class BagUnitTest(unittest.TestCase):
  def test_new_bag_is_empty(self):
    """
    A Bag should initially be empty.
    """
    bag = Bag()
    self.assertEqual(bag.is_empty(), True)

  def test_add_increases_size_by_one(self):
    """
    Calling bag.add(...) should increase it's size by one.
    """
    bag = Bag()
    bag.add(1)
    self.assertEqual(bag.size(), 1)

  def test_bag_can_be_iterated_over(self):
    """
    Bag uses the iterable Python interface.
    """
    bag = Bag()
    for i in [1,2,3]:
      bag.add(i)

    sum = 0
    for i in bag:
      sum += i

    self.assertEqual(sum, 6)

Creating a Bag Using the Built-In `list`

The first implementation of Bag is mostly a wrapper around list. Since list is an ordered collection, if we drop the ordered constraint list can be used as an unordered collection. Below is a possible implementation using list:



class BagWithList(object):
  def __init__(self):
    self.collection = list()

  def add(self, item):
    self.collection.append(item)

  def size(self):
    return len(self.collection)

  def is_empty(self):
    return len(self.collection) == 0

  def __iter__(self):
    return iter(self.collection)

The official Python wiki has a page on the time complexity of some of the built-in data structures. In particular, the list operations has the following big-O in the average case:

Version	Operation	Big-O
`list`	Append	O(1)
`list`	Get Length	O(1)
`list`	Iteration	O(n)

Also this data structure uses O(n) space.

Using a Linked List

By default Python does not come with a version of a linked list as a native data structure. Causing us to write our own below, with a custom iterator.



class LinkedListNode(object):
  def __init__(self, value):
    self.value     = value
    self.next_node = None

  def add(self, value):
    if self.next_node == None:
      self.next_node = LinkedListNode(value)
    else:
      self.next_node.add(value)

  def size(self):
    if self.next_node == None:
      return 1
    else:
      return 1 + self.next_node.size()

  def __iter__(self):
    return LinkedListIter(self)

class LinkedListIter(object):
  def __init__(self, current_node):
    self.current_node = current_node

  def __next__(self):
    if self.current_node == None:
      raise StopIteration
    else:
      value = self.current_node.value
      self.current_node = self.current_node.next_node
      return value

We could use this implementation of a Linked List in our implementation of a Bag.



class BagWithLinkedList(object):
  def __init__(self):
    self.linked_list = None

  def add(self, value):
    if self.linked_list == None:
      self.linked_list = LinkedListNode(value)
    else:
      self.linked_list.add(value)

  def size(self):
    if self.linked_list == None:
      return 0
    else:
      return self.linked_list.size()

  def is_empty(self):
    return self.linked_list == None

  def __iter__(self):
    if self.linked_list == None:
      return iter([])
    else:
      return iter(self.linked_list)

The time complexity of these methods are not as attractive as the previous. There are other use cases for linked lists that show how to use it effectively. Despite this, it still uses O(n) space complexity, as the list version did.

Version	Operation	Big-O
Linked List	Append	O(n)
Linked List	Get Length	O(n)
Linked List	Iteration	O(n)

Using `defaultdict` from `collections` as a Multiset

A set is a commonly known mathematical object. A set is only concerned with membership, or whether an element belongs to collection or not. Like bags, sets are unordered. However, unlike bags, they only allow an element to appear once. If we relax this constraint, and keep track of the number of times an element appears, then we have a multiset.

Multisets appear in C++ as a built-in data structure. However, Python does not have anything named as a multiset. Instead, there is collections.Counter and collections.defaultdict. The former keeps track of both counts and the insertion order. We only need to keep track of counts, so we will use defaultdict with a default value of 0 by using defaultdict(int).



from collections import defaultdict

class Multiset(object):
  def __init__(self):
    self.counts = defaultdict(int)
    self.total = 0    

  def add(self, item):
    self.counts[item] += 1
    self.total += 1

  def size(self):
    return self.total

class MultisetIterator(object):
  def __init__(self, multiset):
    self.multiset   = multiset
    self.keys       = list(multiset.counts.keys()) # Choose a fixed ordering
    self.key_index  = 0 # Current `keys` index
    self.key_repeat = 0 # Number of times we've repeated the current key

  def current_key(self):
    return self.keys[self.key_index]

  def current_count(self):
    return self.multiset.counts[self.current_key()]

  def __next__(self):
    key   = self.current_key()
    count = self.current_count()

    if self.key_repeat == count:
      if self.key_index + 1 < len(self.keys):
        self.key_index += 1
        self.key_repeat = 0
      else:
        raise StopIteration

    self.key_repeat += 1
    return self.current_key()

Next, we use our Multiset in the implementation of Bag.



class BagWithMultiset(object):
  def __init__(self):
    self.multiset = Multiset()

  def add(self, item):
    self.multiset.add(item)

  def size(self):
    return self.multiset.size()

  def is_empty(self):
    return self.multiset.size() == 0

  def __iter__(self):
    return MultisetIterator(self.multiset)

This version of Bag might be the most performant, given the time and space complexity.

Version	Operation	Big-O Average Case	Big-O Worst Case
Multiset	Append	O(1)	O(n)
Multiset	Get Length	O(1)	O(1)
Multiset	Iteration	O(n)	O(n)

These results are almost on par with the list implementation. Perhaps the worst case for appending, is worth revisiting. However, the space complexity is not O(n), but in fact O(k) where k is the number of unique elements in the collection. If there are many repeated values, this might be more advantageous than the two other versions of Bag.

Conclusion

We covered the basics of Python iterators, and considered three different versions of Bag: one using list, one using our hand-rolled linked list implementation, and finally a version of a multiset using Python's defaultdict. This data structure is not very common, and does not have many advantages to ordered arrays. Nevertheless, because of its simplicity, we can use the Bag data structure as an introduction to algorithms.

With that.. happy algorithming, friends!

Docker Basics - Containers and Images

Farley Knight — Tue, 24 Mar 2020 17:54:19 +0000

What is Docker?

Docker implements a software concept called a container. Essentially, the idea is when you ship code from development to production, you ship your code inside a container.

Because applications ship in containers, developers and/or devops are responsible for creating a custom container for their application. Some have coined the term "dockerize" as a verb, which means "to create a docker container for a specific application or service". One of the first tasks when learning Docker is to "dockerize" an application.

Why Use Containers?

In the early days of the web, it was common for developers to have a set of very delicate steps for deploying. These steps might include, in some logical order:

Creating a ZIP (.zip) or tarball (.tar.gz) file with the source code.
Sending that file to the host server. If you're behind a corporate firewall, you might have to send it through multiple machines.
Decompress the file, creating a new directory, followed by symlinking other directories (like log directories and temp file directories) to subdirectories of this new directory.
Restart the web server with the new source code.
Delete the artifact and clean up old versions of the source code.

This entire model of deployments has many potential problems.

Files must be put in the correct directory for the web server to read them.
- If the deployment process is very manual, then the deployment coordinator must be sure they do not make a mistake during this process.
- This is especially common in the case of sites that are not updated frequently.
Files could be readable by the web server.
- If files were marked as only readable by the user (per Unix file permissions) then the web server will not be able to access them.
Managing security around which users will be doing deployments adds further complexity.
- Do certain commands require sudo? Who has sudo rights on your team?
- Do they require a user be added to a security group?
What if you created one user account for deployments?
- Then team members will need to be aware of those plaintext credentials, which is rife with potential security mistakes.
Old versions of the code must be kept around, in case of the need to roll back.
- If we accumulate old versions of the code, it may start filling up the file system, causing hard disk space issues.
Log files also grow very quickly on the hard disk.
- Log rotation tools must be implemented to save disk space.
If processes are known to be unresponsive or crash, then we need process monitoring tools to ensure they continue to be available, or perform necessary restarts.
Processes with memory leaks or ones that consume many CPU cycles can interfere with other processes.
- This can make services unavailable. It could even crash the host system entirely.
There might be essential libraries that must be installed on the operating system level for an application to run correctly.
- If you always keep the same physical machine, and the same libraries, you can install these libraries once, and not worry.
- The process of installing new libraries (and verifying library versions) can be an error prone process.
- What if you must move to a new physical server? It becomes necessary to install all libraries on the new machine.

Can Docker perfectly solve all of these problems?

No

Can it solve most of them, and make the rest routine?

Definitely

Let's go over some of the benefits of using Docker. Each container can:

Limit the amount of CPU the application is using.
Limit the amount of memory the application is using.
Limit the networking resources of the application.
Keep track of its dependencies via a Dockerfile, which describes the process to build a specific container.
Track the health of an application or service via health checks using docker-compose.
Define networking configurations between multiple containers, much like networking between physical machines.
Use the file system only temporarily.
- Containers are not meant to be permanent, which makes for better reproducibility in application environments.

It is important to emphasize, because Docker containers, by default, do not have a permanent file system, this means when your container is shut down, any files created or modified will be reset on the next container deployment. Be sure you are aware of this when you create your Docker container. If your application needs to store data, it should be done on some external system, or it must attach something called a Docker volume.

The value of reproducible environments

Reproducibility is a fundamental tenet of science. In computer science, and its implementation via software engineering, reproducibility can be found in unit and integration tests. Docker brings reproducibility into deployments and devops. There are many benefits to this new paradigm:

Writing and testing your code in the same environment as you deploy your code means there's less of a chance of production-only bugs.
All dependencies are tracked via the container image.
- New talent on your team can get up to speed quickly by running and working on a container.
Docker images can be tracked by version, so you can roll back to previous images when a deployment is botched.
Scaling up or down the number of application instances, databases, load balancers, or job queues to a cloud such as AWS or Google Cloud, can be easily automated with tools like docker-compose and Kubernetes.

All reproducibility is possible because of container images.

What is a Container Image?

If you are familiar with the concepts behind virtual machines (VM), you may have heard of a VM image. It is a template for creating new virtual machines. There are some similarities, but also important differences.

Container images are up of layers. Each layer represents a Docker instruction. All except the last layer is read-only. This allows Docker to reduce the size of images by sharing common layers between running containers. The diagram below shows how you might deploy several instances of an image as different containers. Because each layer is read-only, these layers can be shared amongst several containers without the risk of data corruption. Only the last layer is writable, and this layer is usually kept as thin as possible.

In the next section, we're going to Dockerize a simple Node.js app.

Let's make an `app.js` to Dockerize

For this tutorial, we will be using Node.js, since Express is the most popular Node.js framework. For a future project, perhaps we can use Meteor, which is also popular.

To create an Express app, all you need is a single JavaScript file. The official documentation shows a simple "Hello, World" tutorial.

const express = require('express')
const app = express()

app.get('/', function (req, res) {
  res.send('Hello World')
})

app.listen(3000)

To run this simple web server, we need to give it a folder. Create one somewhere. For this tutorial, I'm creating the directory the-greatest-node-js-app-ever. In that folder, we're going to install Express:

$ cd the-greatest-node-js-app-ever
$ npm install express --save
$ node app.js
Example app listening on port 3000!

NOTE: If you are on a Mac, you might see this alert. You can click "Allow" in this case.

Now switch to your web browser and go to http://localhost:3000. You should see something similar to this:

Adding a `package.json`

If we want our app to be self-contained and deployable, we should probably keep track of what dependencies we're using. In Node.js, that is handled by a file called package.json.

{
  "name": "the-greatest-node-js-app-ever",
  "version": "1.0.0",
  "description": "The Greatest Node.js app ever! On Docker",
  "author": "Farley Knight <farleyknight@gmail.com>",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

The version number of the express package might have changed since the time of this writing. Make sure to include the latest version instead of ^4.17.1.

After creating package.json we should install of the necessary packages via npm install. This step is important because it will generate package-lock.json, which locks the version numbers for all of our package dependencies. Locking the version number prevents unintended upgrades or downgrades.

$ npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN the-greatest-node-js-app-ever@1.0.0 No repository field.
npm WARN the-greatest-node-js-app-ever@1.0.0 No license field.

added 50 packages from 37 contributors and audited 126 packages in 2.307s
found 0 vulnerabilities

Once we have our package-lock.json file, we can create the Dockerfile.

Creating a `Dockerfile`

We're going to use the following content for our Dockerfile.

FROM node:10

# Create a directory called `/workdir` and make that the working directory
ENV APP_HOME /workdir
RUN mkdir ${APP_HOME}
WORKDIR ${APP_HOME}

# Install all of the packages mentioned in `package.json`
RUN npm install

# Copy the project over
COPY . ${APP_HOME}

# We'll access the app via port 3000
EXPOSE 3000

# Run this command when the container is ready
ENTRYPOINT ["node", "app.js"]

In a future tutorial, we will go over the details of these lines. For now, we'll continue with the process of building a Docker container.

Building the Docker Container

Docker containers are based on Docker images. You can think of an image like an installation package. It contains all the necessary data to run the container. During the deployment process, a Docker image will be sent to the host machine. The host will then use that image to create the container.

To build the image, make sure you're in the project's directory and run docker build ..

$ docker build .
Sending build context to Docker daemon  3.584kB
Step 1/8 : FROM node:10
10: Pulling from library/node
3192219afd04: Extracting [===========================================>       ]  39.45MB/45.38MB
...
...

This can take a little while, but you should see a lot of activity from that one single command. At the end of the process, there will be a line saying Successfully built c132a227961b (although yours will have a different image ID than mine).

$ docker build .
...
...
Step 9/9 : CMD ["node", "app.js"]
 ---> Running in a812b758efa8
Removing intermediate container a812b758efa8
 ---> c132a227961b
Successfully built c132a227961b

By the way, don't forget the . at the end, which is necessary. It tells Docker to build the image based on the Dockerfile in the current directory.

We can see a list of all our Docker images by running docker images.

$ docker images
REPOSITORY                        TAG                 IMAGE ID            CREATED              SIZE
<none>                            <none>              c132a227961b        About a minute ago   910MB

The list of images is sorted by newest first, so you should see your image listed here with the image ID (in my case c132a227961b). However, under the REPOSITORY and TAG, it only shows <none>. It's not critical that those be filled in with values. Your container can run just fine without them. But, trying to remember the image ID is an error prone process. Thankfully Docker gives us the ability to name and tag our images.

Giving Your Image a Name

It is much easier if we give our images human readable names. Let's rebuild the image, but this time with the --tag flag.

$ docker build --tag the-greatest-node-js-app-ever-on-docker .
Sending build context to Docker daemon  2.006MB
Step 1/9 : FROM node:10

Running docker images again gives us a container with a name:

$ docker images
REPOSITORY                                TAG                 IMAGE ID            CREATED             SIZE
the-greatest-node-js-app-ever-on-docker   latest              c132a227961b        About a minute ago      910MB

Turning an Image into a Container

Now that we have an image, we can tell Docker to run it, which will create our container.

$ docker run --detach --publish 3000:3000 the-greatest-node-js-app-ever-on-docker
03665844b45a03e88a813c815c8d02d72712b27faa2332975778e0a847fad41d

The command docker run needs a few command line arguments:

--detach - This flag tells Docker to run the container and immediately detach from the shell. In other words, the Docker container should now run in the background.
--publish 3000:3000 - The publish flag is to make a port available to the outside world. In this case, we're mapping the internal port 3000 to the external port 3000. Therefore, we can access our Express app via http://localhost:3000. If we wanted, we could have set this to --publish 80:3000 and that would mean that http://localhost would be the link to access our app.
- Be mindful of the ordering. The syntax 80:3000 means that the outside world will see port 80, but inside the Docker container, we're using port 3000. Lots of Unix commands use the ordering source first, target second. But, Docker's port is reversed: target first, source second.
the-greatest-node-js-app-ever-on-docker - The name of the image we want to use should be the last argument.

To verify that everything works correctly, go to your web browser and double check http://localhost:3000 looks like this:

Now that our container is running, let's discuss how to manage it.

Docker Container Management

Similar to how we manage processes on a machine using a command line ps -aux (where ps is short for processes), we have a similar command for Docker, which is docker ps. This is what mine looks like, while writing this tutorial:

$ docker ps
CONTAINER ID        IMAGE                                     COMMAND                  CREATED             STATUS              PORTS                    NAMES
db032070bda8        the-greatest-node-js-app-ever-on-docker   "docker-entrypoint.s…"   6 seconds ago       Up 5 seconds        0.0.0.0:3000->3000/tcp   jovial_carson

Like most processes, this Docker container is running in the background. To gracefully shutdown or stop this container, we can run docker stop <CONTAINER-ID>. In our case, the container ID is db032070bda8.

$ docker stop db032070bda8

Also like most processes, containers sometimes can become unresponsive when trying a graceful shutdown and need to be forced to shutdown. For ordinary processes, we would use a kill -9 command. For Docker, the command is docker kill <CONTAINER-ID>.

$ docker kill db032070bda8

Interacting with Your Container

A Docker container is meant to act as an isolated environment, almost like a separate host machine. This means you can "login" and run a Bash shell inside your container. Once you're inside the container, you can look around and verify your application is working properly. The command for this is docker exec -it <CONTAINER-ID> /bin/bash. The flag -i stands for interactive and the flag -t is used to create TTY session, much like an SSH session.

$ docker exec -it db032070bda8 /bin/bash
root@db032070bda8:/workdir# pwd
/workdir
root@db032070bda8:/workdir# ls
Dockerfile  app.js  node_modules  package-lock.json  package.json
root@db032070bda8:/workdir#

Removing Your Stopped Container and Image

Docker management means creating and maintaining a collection of containers and images, and running them as needed. It also includes removing those containers and images as well. In most Unix-like environments, the rm <FILE-PATH> command deletes a file.

Steps to delete old containers and images:

First run the command docker rm <CONTAINER-ID> to delete the container.
Finally run the command docker rmi <IMAGE-ID> to delete the image.

Note that even when you stop a container, it is still being managed by Docker. Since containers rely on images, you must remove the stopped container first, then you may remove the image. If you do not run those two steps in order, you'll get an error message like this:

$ docker rmi c132a227961b
Error response from daemon: conflict: unable to delete c132a227961b (must be forced) - image is being used by stopped container db032070bda8

If you run the commands in the correct order, it should look something like this:

$ docker rm db032070bda8
db032070bda8
$ docker rmi c132a227961b
Untagged: the-greatest-node-js-app-ever-on-docker:latest
Deleted: sha256:c132a227961bf42ac0664e7ab470931ae440661a4eae98b286016cd5a20c3c46
Deleted: sha256:ca7c95922974a846620e0ce42fbc65b585b58457ca30a9910687d2a701f598fa
Deleted: sha256:3e2c92e96f06d4282152faf9f81c9fb5bd138f57786112775afed57ba12a1f1b
Deleted: sha256:ac7b17970c321c61a620b284f81825e2867b7477a552a485ce2226ac2b06004d
Deleted: sha256:9ca2186b2dfe59cc5eed7b6ff743da708d35d5c14445d49048cf8924d6017767
Deleted: sha256:ed667d696e50cb479043af9725dbd5f40e300e923192c4e337f40ce95a1dfa1a
Deleted: sha256:9f49958e02bd156c2ba0a0cef23736dfcab645a4f40f6590a48df9674c723c0a
Deleted: sha256:bf5333fd26a86ab238b781f2012e0c47d09b978ae39372e2fb441adce07e1c05

Conclusion

In this post, we've covered the basics of Docker, what containers and images are, and how they are useful in the world of software development. We discussed what Docker images are and how they produce Docker containers. Additionally, we explained the value of containers and images, and showed how to dockerize a very simple Node.js application. In future posts, I hope to discuss the Dockerfile in more detail, as well as Docker volumes and Docker networking.

Building Forms with Formik and React - Part 2

Farley Knight — Fri, 20 Mar 2020 13:25:18 +0000

About this post

In the previous post of this series, we built a form using React only. We used React's state to store the values held by each <input>, making them React-controlled components. The resulting form, which was functional for our purposes, included a lot of boilerplate. But, we can do much better!

We're going to introduce a library called Formik that should hopefully make building forms much less painful.

Adding Formik to the Project

To add Formik to our project, we will use the npm install command, as we did for Bootstrap in the last post.

$ npm install --save formik

And make sure that formik is now in your list of dependencies.

/* Part of package.json  */
"dependencies": {
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.3.2",
  "@testing-library/user-event": "^7.1.2",
  "bootstrap": "^4.4.1",
  "formik": "^2.1.4",  /* Make sure you see this line */
  "react": "^16.12.0",
  "react-dom": "^16.12.0",
  "react-scripts": "3.4.0"
},

Rewriting `LoginForm`

In the original version of LoginForm, we had a lot of boilerplate involved. We needed to set up state to handle current form state, form validation and error messages. In Formik, there is built-in support for handling state. Validation will still be specified by us, but Formik has a prop we can set for this validation function.

We're not going to duplicate the entire LoginForm class from the previous post, but we should touch on its interface. The component had the following methods, with summaries of what they did:

// Class structure for LoginForm
class LoginForm extends React.Component {
  constructor(props) {
    /* In this method we initialized `state` for the form values,
       the field validity, and their errors. */
    ...
  }

  onSubmit(event) {
    /* Iterated over the form values and checked if they were valid */
    ...
  }

  validate(name, value) {
    /* Checked if a given value was valid, based on the field name */
    ...
  }

  onChange(event) {
    /* Because this is a controlled component, we need to update our
       form values whenever they change */
    ...
  }

  render() {
    /* The HTML for our component */
    ...
  }
}

By using Formik, we no longer need to do our own onChange updating. The validation step is handled by Formik, so we don't need to add that to our onSubmit method. Finally, Formik handles initial values, stores validity, and lets the user check errors via a validate method.

Rewriting our LoginForm using Formik will make building this form much less complicated, and much more routine.

Import Formik

In order to use Formik, we need to import it. Here's what the top of LoginForm.js should look like.

// Top of LoginForm.jsx
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from "formik";

class LoginForm extends React.Component {
  ...
}

Rewriting `render`

We're going to use our new Formik component to rewrite the render method of our LoginForm. The main <form> tag will be replaced by <Formik>. In turn <Formik> is passed a function that renders the <Form>. Note that the 'F' is capitalized, since this component is specific to Formik.

The <Formik> component requires a few props be set to be useable:

initialValues - Determines the initial state of the form.
validate - A function which validates the form, and updates any errors.
onSubmit (optional) - A function we want to call after validation, but before final submit. This is likely where you would send your payload to the HTTP server.

Comments are given inline, pointing out important usage of <Form>, <Field>, and <ErrorMessage>.

class LoginForm extends React.Component {
  ...
  render() {
    return (
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-lg-6">
            <div className="col-lg-12">
              /* Add new <Formik> component with two new methods that we have
                 not written yet: `initialValues` and `validate` */
              <Formik
                initialValues={this.initialValues()}
                validate={this.validate.bind(this)}>
                {
                  props => (
                    /* Our <Form> component is our main container */
                    <Form>
                      <div className="form-group">
                        <label htmlFor="email">Email</label>
                        /* This <Field> handles state change for the <input> */
                        <Field
                          type="email"
                          name="email"
                          placeholder="Enter email"
                          className={`form-control ${props.errors.email ? "is-invalid" : ""}`}
                        />
                        /* Formik handles error messages for us with this component. */
                        <ErrorMessage
                          component="div"
                          name="email"
                          className="invalid-feedback"
                        />
                      </div>

                      /* The changes to the password field are similar */
                      <div className="form-group">
                        <label htmlFor="password">Password</label>
                        <Field
                          type="password"
                          name="password"
                          placeholder="Enter password"
                          className={`form-control ${props.errors.password ? "is-invalid" : ""}`}
                        />
                        <ErrorMessage
                          component="div"
                          name="password"
                          className="invalid-feedback"
                        />
                      </div>

                      <button type="submit" className="btn btn-primary btn-block">
                        Log in
                      </button>                      
                    </Form>
                  )
                }
              </Formik>
            </div>
          </div>
        </div>
      </div>      
    );
  }
}

Adding `initialValues` and `validate`

The biggest change to our form is in the render method. We are close to done with our rewrite, but we still have a two more methods: initialValues and validate. Below are the implementations that should work for our needs:

class LoginForm extends React.Component {
  initialValues() {
    return {
      email: "",
      password: ""
    }
  }

  validate(values) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i;
    let errors = {};

    if (values.email === "") {
      errors.email = "Email is missing";
    } else if (!emailRegex.test(values.email)) {
      errors.email = "Email is not in the expected email address standard format";
    }
    if (values.password === "") {
      errors.password = "Password is missing";
    } else if (values.password.length < 6) {
      errors.password = "Password must be 6 characters at minimum";
    }
    return errors;    
  }
  ...
}

The initialValues method returns a new JavaScript object with empty strings for email and password. The validate method has changed to taking a JavaScript object with the current form values. We handle not only the two previous validations from our React-only form, but also verify that these fields are not empty, letting the user know they are missing.

We're now ready to test our the refactored form.

Testing it Out

After making those changes, we should have a working login page again.

When using this form, you'll notice that the error message for email appears immediately after switching from email to password. Also, we are checking for multiple validations, not just required or email format.

Our new form has the same functionality as the previous React form, which means our refactor was successful! However, we can go further. In particular, the validate method can be refactored further. Formik has built in support for another library called Yup, which allows us to describe the fields of our form in a declarative way.

Using Yup for Validation

Before we get into what Yup can do, let's first add it to our package.json.

$ npm install --save yup

Verify you have the correct package:

/* Part of package.json */
"dependencies": {
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.3.2",
  "@testing-library/user-event": "^7.1.2",
  "bootstrap": "^4.4.1",
  "formik": "^2.1.4",
  "react": "^16.12.0",
  "react-dom": "^16.12.0",
  "react-scripts": "3.4.0",
  "yup": "^0.28.1" /* Make sure you see this line */
}

Now let's import it into our project.

// Top of LoginForm.jsx
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from 'yup';  /* Add this line to */

class LoginForm extends React.Component {
  ...
}

The new Yup object we've imported has the ability to create JSON schemas via the object method. Let's add this code just above our LoginForm:

import * as Yup from 'yup';

/* Add this new schema */
const loginFormSchema = Yup.object().shape({
  email: Yup.string()
            .email("Email is not in the expected email address standard format")
            .required("Email is missing"),
  password: Yup.string()
            .required("Password is required")
            .min(6, "Password must be 6 characters at minimum")
});

class LoginForm extends React.Component {
  ...
}

We're going to get rid of the validate prop of the Formik component, but we're going to add a validateSchema prop, to use the new schema:

class LoginForm extends React.Component {
  ...
  render() {
    return (
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-lg-6">
            <div className="col-lg-12">
              <Formik
                initialValues={this.initialValues()}
                /* New prop validateSchema */
                validateSchema={loginFormSchema}>
                ...
              </Formik>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Let's test our form, to confirm it still works properly.

Success! Our LoginForm component now uses Formik for it's <input> fields and Yup for defining the validations.

Conclusion

React is a very useful framework for building interactive websites. However, because React must control all state on the page, we cannot use vanilla DOM elements. To provide a user experience that most customers expect of web forms, we can use Formik to handle common needs, including validation. We refactored our hand-written validate method to use Yup, which allows us to declaratively describe our form.

Building Forms with Formik and React - Part 1

Farley Knight — Sun, 01 Mar 2020 23:20:15 +0000

About This Post

Hello there!

This post will focus on creating some forms using React! Form building is a frequently visited topic in web development. Many aspects of web development have something to do with forms. Form builders, form serializers, form validation, etc, etc.

Looking at the web component of React, we have two versions: controlled and uncontrolled <input>s. One of the main advantages of using React is the fine-grained control of state and how it is handled in the user interface.

When an <input> is uncontrolled, it behaves exactly as it does in the ordinary DOM: the <input> itself handles its own state. The other option are controlled <input>s, which are React components that wrap DOM fields, which store the field state inside the component and renders when it is changed. Because controlled components are such a common use-case, a form-handling library called Formik has emerged in the React ecosystem.

This post will cover creating a login form in React first. In future posts, we'll be using Formik to build the actual form, and then we'll use Formik to build the form with Yup to specify a validation schema, instead of hand-written validation methods.

Creating a Sample React.JS Application

Let's first create a React.JS application with create-react-app and run it.

$ npx create-react-app building-forms
npx: installed 99 in 16.195s

Creating a new React app in .../building-forms.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
...
$ cd building-forms
$ npm start

After waiting a minute, you should see:

Compiled successfully!

You can now view building-forms in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.9:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

And then your browser will open localhost:3000 with the React logo spinning:

In the next section, we'll replace the logo and other text with a login form.

Building a Login Form

Before we get into Formik and why it is preferable for React form development, let's take a look at src/App.js.

// App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  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;

We're going to hollow out this App component and replace it with a LoginForm, which isn't fleshed out yet. Replace your src/App.js with the following content.

// App.js with LoginForm stub
import React from 'react';
import './App.css';

const LoginForm = () => "Login form goes here"

const App = () => {
  return (
    <div className="App">
      <header className="App-header">
        <LoginForm/>
      </header>
    </div>
  );
}

export default App;

You shouldn't be surprised to see a very boring message at the center of your screen:

Since the LoginForm component is just a stub, we defined it in the App.js file. In the next step, we're going to flesh it out and give it it's own file.

Fleshing Out the Login Form

Create the file src/LoginForm.js and add the following:

// LoginForm.js
import React from 'react';

const LoginForm = () => {
  return (
    <form>
      <div>
        <label>Email Address</label>
        <input type="email" name="email" placeholder="Enter email"/>
      </div>
      <div>
        <label>Password</label>
        <input type="password" name="password" placeholder="Password"/>
      </div>
      <button type="submit">Log in</button>
    </form>
  );
}

export default LoginForm;

Next update your src/App.js to use import for the LoginForm.

// App.js with LoginForm import
import React from 'react';
import LoginForm from './LoginForm';
import './App.css';

const App = () => {
  return (
    <div className="App">
      <header className="App-header">
        <LoginForm/>
      </header>
    </div>
  );
}

export default App;

As you can see, the result is pretty much garbage as far as design / UX is concerned:

Let's fix that by adding Twitter Bootstrap to our React.JS application.

Adding Bootstrap to our React Project

We can install Bootstrap to our existing React.JS application with the npm install --save bootstrap command. This command should install the package, but also add this project to the package.json, which keeps track of the dependencies for our project.

$ npm install --save bootstrap
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
...

The installation process can take a while. When it's done, make sure bootstrap is in your package.json.

/* package.json */
"dependencies": {
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.3.2",
  "@testing-library/user-event": "^7.1.2",
  "bootstrap": "^4.4.1", /* Make sure you see this line */
  "react": "^16.12.0",
  "react-dom": "^16.12.0",
  "react-scripts": "3.4.0"
},

In the src/index.js you can add this line:

// index.js
import './index.css';
// Add this line below the `index.css` include
import 'bootstrap/dist/css/bootstrap.css';

Now let's update our LoginForm component to use Bootstrap styles.

// LoginForm.js with Bootstrap classes & styles
import React from 'react';

const LoginForm = () => {
  return (
    <div className="container">
      <div className="row justify-content-center">
        <div className="col-lg-6">
          <div className="col-lg-12">
            <form>
              <div className="form-group">
                <label>Email Address</label>
                <input
                  type="email"
                  name="email"
                  placeholder="Enter email"
                  className="form-control"          
                />
              </div>
              <div className="form-group">
                <label>Password</label>
                <input
                  type="password"
                  name="password"
                  placeholder="Password"
                  className="form-control"
                />
              </div>
              <button type="submit" className="btn btn-primary btn-block">
                Log in
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}

export default LoginForm;

Form Validation in React.JS

We've got a good looking login form, but it has some problems.

For one, the form will send an HTTP GET request to the root URL / instead of a POST to some authentication URL, like /sessions. The backend has not been prepared to receive the payload, so we'll only be redirected to the same page. However, we're not going to worry about this detail at the moment. A future blog post will cover adding a backend to a React.JS application.

The primary goal is to do form validation. Before introducing Formik, we're going to do this validation in React.JS only.

Form state in React.JS

Before we can even get into validation, we need to rewrite our code. Since React forms maintain state, we need to rewrite this component. Instead of using a functional component, we switch to a class that allows us to use this.state and this.setState to set and render values.

// LoginForm.js as a class component with form state
import React from 'react';

class LoginForm extends React.Component {
  // In order to capture the state of the form, we need to initialize the `state`
  // property in the constructor.
  constructor(props) {
    super(props);
    this.state = {
      values: {
        email: "",
        password: ""
      }
    };
  }  

  // We've moved the HTML into the `render` method, and we've added a change
  // handler that will update the component state as the fields are changed.
  // In addition to the change handler, we've also connected the `value` of the
  // <input>s to the component's state.
  render() {
    return (
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-lg-6">
            <div className="col-lg-12">
              <form>
                <div className="form-group">
                  <label>Email Address</label>
                  <input
                    type="email"
                    name="email"
                    placeholder="Enter email"
                    className="form-control"
                    /* Add onChange and value props */
                    onChange={this.onChange.bind(this)}
                    value={this.state.values.email}
                  />
                </div>
                <div className="form-group">
                  <label>Password</label>
                  <input
                    type="password"
                    name="password"
                    placeholder="Password"
                    className="form-control"
                    /* Add onChange and value props */                    
                    onChange={this.onChange.bind(this)}
                    value={this.state.values.password}
                  />
                </div>
                <button type="submit" className="btn btn-primary btn-block">
                  Log in
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // In our change handler, we update the form's `values` based on the input
  // `name`.
  onChange(event) {
    let { values } = this.state;
    values[event.target.name] = event.target.value;
    this.setState({ values });
  }
}

export default LoginForm;

Test out your form again to make sure it still works. Since this update only changes where we store and how we render the form values, we should not expect a difference in behavior.

Writing Validations in React.JS

Now that we've updated our form component to keep track of the field's values, we can add a validation step. We're not going to repeat the entire component here, but only call out the changes we've made.

First, we need to add a place in our state to keep track of what fields are valid or invalid.

class LoginForm extends React.Component {
  ...
  constructor(props) {
    super(props);
    this.state = {
      values: {
        email: "",
        password: ""
      },
      /* Add these two new section to your `state`. */
      /* All fields are invalid by default. */
      valid: {
        email: false,
        password: false
      },
      /* All fields have an empty error message by default. */      
      errors: {
        email: "",
        password: ""
      }
    };
  }
  ...
}

Next, we'll add a submit handler, giving us a place to trigger the validation. We'll also add a new method called validate that will:

Check that the email field matches the email regex.
Check that the password is six characters or more.

class LoginForm extends React.Component {
  ...
  onSubmit(event) {
    event.preventDefault();
    let { values } = this.state;
    for (let key in values) {
      this.validate(key, values[key]);
    }
  }
  validate(name, value) {
    let { errors, valid } = this.state;

    if (name === "email") {
      /* This complicated regex checks that a string follows the standard
         format for email addresses, e.g. user@example.com
      */
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i;
      if (!emailRegex.test(value)) {
        errors.email = 'Email should be a valid email address';
      }
    }

    if (name === "password") {
      if (value.length < 6) {
        errors.password = 'Password should be at least 6 characters';
      }
    }

    this.setState({ valid, errors });
  }
  ...
}

Let's add the submit handler to our form, so it gets called when the user attempts to do a submit.

<div className="col-lg-6">
  <div className="col-lg-12">
    <form onSubmit={this.onSubmit.bind(this)}> /* Add the submit handler here */
      <div className="form-group">
        <label>Email Address</label>

Now that we keep track of valid fields and field errors, we can provide a better user experience by validating the form immediately, instead of waiting for a response from the server.

At the top of the render method, let's destruct the state:

render() {
  /* Add this line above the return */
  let { values, valid, errors } = this.state;
  return (
    <div className="container">
      <div className="row justify-content-center">
        ...
      </div>
    </div>
  );
}

Next, we'll look for the <input> sections of the component. In particular, the email field. We'll change the markup to:

Add is-invalid to the CSS classes if the email is not valid.
Use values.email, which shorter than this.state.values.email.
Add a new <div> for errors, with class name invalid-feedback.

<div className="form-group">
  <label>Email address</label>
  <input
    type="email"
    name="email"
    className={`form-control ${valid.email ? "" : "is-invalid"}`}    
    placeholder="Enter email"
    onChange={this.onChange.bind(this)}
    value={values.email}
  />
  <div className="invalid-feedback">{errors.email}</div>
</div>

A similar set of changes need to happen for the password <input>.

<div className="form-group">
  <label>Password</label>
  <input
    type="password"
    name="password"
    className={`form-control ${valid.password ? "" : "is-invalid"}`}
    placeholder="Password"
    onChange={this.onChange.bind(this)}
    value={values.password}
  />
  <div className="invalid-feedback">{errors.password}</div>
</div>

After making all of those changes, your LoginForm class should look like this:

class LoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      values: {
        email: "",
        password: ""
      },
      valid: {
        email: false,
        password: false
      },
      errors: {
        email: "",
        password: ""
      }
    };
  }

  onSubmit(event) {
    event.preventDefault();
    let { values } = this.state;
    for (let key in values) {
      this.validate(key, values[key]);
    }
  }

  validate(name, value) {
    let { errors, valid } = this.state;

    if (name === "email") {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i;
      if (!emailRegex.test(value)) {
        errors.email = 'Email should be a valid email address';
      }
    }

    if (name === "password") {
      if (value.length < 6) {
        errors.password = 'Password should be at least 6 characters';
      }
    }

    this.setState({ valid, errors });
  }

  onChange(event) {
    let { values } = this.state;
    values[event.target.name] = event.target.value;
    this.setState({ values });
  }

  render() {
    console.log(this.state);
    let { values, valid, errors } = this.state;
    return (
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-lg-6">
            <div className="col-lg-12">
              <form onSubmit={this.onSubmit.bind(this)} novalidate>
                <div className="form-group">
                  <label>Email address</label>
                  <input
                    type="text"
                    name="email"
                    className={`form-control ${valid.email ? "" : "is-invalid"}`}
                    placeholder="Enter email"
                    onChange={this.onChange.bind(this)}
                    value={values.email}
                  />
                  <div className="invalid-feedback">{errors.email}</div>
                </div>
                <div className="form-group">
                  <label>Password</label>
                  <input
                    type="password"
                    name="password"
                    className={`form-control ${valid.password ? "" : "is-invalid"}`}
                    placeholder="Password"
                    onChange={this.onChange.bind(this)}
                    value={values.password}
                  />
                  <div className="invalid-feedback">{errors.password}</div>
                </div>
                <button type="submit" className="btn btn-primary btn-block">
                  Log in
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    );
  }
};

Let's test what this looks like in the browser:

Next post: Refactor using Formik

In the next post we will work on refactoring our code using a popular React library called Formik, which can handle much of the boilerplate with building React forms.

Thanks for reading, if you have any comments/questions feel free to share them down below! They are always appreciated. :)

How to Deploy a Rails Application to AWS with Docker - Part 3

Farley Knight — Sat, 29 Feb 2020 15:09:02 +0000

Creating a load balancer

Load balancers are like the waiters & waitresses of the web server world. Whenever a user wants to look at a web page, some software must respond to that request. If we only have one container instance running, then that instance will be the only one available to take orders and process them.

Having only one container running your application is kind of like going to a food truck with only one person making the food. Many businesses start with such a simple model, but need to expand when they get more customers. In those cases, we cannot the same person taking orders as the one making them. Similarly the server that takes the requests for web pages should not be the same as the one making them.

This is where load balancers come in. Load balancers act like waitress. A waitress who does not know about making the food, just about describing what the customer wants, forwarding that request to a cook, and then getting the food back to the customer's table. Similarly, load balancers do not know about HTML, CSS, or JavaScript. They know HTTP, which is the language of web requests. It can forward requests for web pages to different containers. If one container is too busy to respond to a request, it can send the request to one that is not busy. Hence they balance the workload amongst the containers.

For this part of the tutorial, we're going to use AWS EC2. Search for "ec2" in the service search menu:

The EC2 console is sophisticated and has many options, and is under constant improvement.

The load balancing options are in the sidebar, if you scroll down enough.

Click on "Load Balancers" and then click the blue button "Create Load Balancer".

You'll want to choose on the "Application Load Balancer" option, so click the "Create" button there.

Here we are brought to the load balancer configuration. We'll give it a name using our 'the-greatest' naming convention: "the-greatest-rails-lb-ever"

For the Availability Zones, you'll want to enable both subnets.

The next panel is to "Configure Security Settings", but we can skip that for now and move on to "Configure Security Groups".

For this step, we DO NOT want to select an existing security group. When switching to "Create a new security group", we're asked the name and description of the new group. We're sticking to the same naming style, and going with "the-greatest-rails-security-group-ever".

In step 4, we configure the load balancer around what group it will delegate work to. I've gone with the name "the-greatest-target-group-ever".

From here you can skip to step 6, review.

Click the blue button "Create" and you should see, after a brief loading period, a success screen:

Creating the ECS cluster

We have containers but we don't have any machine instances to run them on. Towards this end, we need to create an ECS cluster. The next section will do that for us. Towards this end, we'll first need a key pair from EC2 to run ECS.

Creating an EC2 key pair

Search for "ec2" in the AWS console.

Scroll down the side menu until you find "Key Pairs".

Next we'll create a new key pair by clicking the orange button "Create key pair".

We're going to create "the-greatest-rails-key-pair-ever"

Click on "Create key pair" and you'll get a success screen. It should also download a .pem file that you will need soon.

Creating the ECS cluster

Search for "ecs" in the AWS console and let's create a cluster.

Once there, click the "Clusters" option from the side menu.

Click "Create Cluster". We'll be using the "EC2 Linux + Networking" option.

Click the "Next Step" button at the bottom and now we can pick a cluster name. I went with "the-greatest-rails-cluster-ever".

Scroll down and you should see Instance configuration. I changed the EC2 Instance type to "t2.micro" because it is a part of the free tier. Large applications will likely want "m3.medium" or larger.

We also specify the Key pair ("the-greatest-rails-key-pair-ever"), which we created earlier.

For the networking portion of this configuration, you'll be using the same VPC and subnets we configured earlier, when we configured the Availability Zones for the load balancer.

One last configuration is allowing CloudWatch to provide Container Insights.

When you're done, hit "Create". It will kick off the cluster. Give it a minute and it should be ready when all three steps are green.

When it's ready, click the "View Cluster" button, where we will create the ECS service.

Creating an ECS service

To create an ECS service on our new cluster, click on the "Create" button in the cluster detail view.

Much of the initial service configuration is filled in for us. When I did this, I needed to specify the launch type as "EC2", and the service name as "the-greatest-rails-service-ever". The number of tasks can be set to 1.

Go to the "Next Step" to configure the network.

In this part, we need to choose "Application Load Balancer", which is what we created earlier. The IAM role can be changed to "AWSServiceRoleForEC2". The load balancer name should be picked for you, since it's the only one available. When you're done here, you can click "Add to load balancer".

After you've clicked that, it should pop up with configurations on "Container to load balance". At this point, I picked "the-greatest-target-group-ever" as the target group name.

Make sure that the "Enable service discovery integration" is unchecked. Then click "Next Step".

Leave this configuration as is.

This is what my review page looked like.

When ready, hit "Create Service" and you'll see a success screen.

Creating AWS Security Groups

AWS Security Groups are like virtual firewalls, and are absolutely necessary to create a secure cluster. We're going to create a security group around our EC2 instances and our RDS database. This is to ensure that the traffic between the two instances is protected from the outside world.

Adding the cluster to the security group

Search for "ecs" in the AWS console.

We're going to go back to the cluster we just created.

Click on the name ("the-greatest-rails-cluster-ever") and it should bring you to the detail view.

Click on the "EC2 Instances" tab below and you should see at least one instance available.

Click on the "EC2 Instance" link, which in my case, starts with "i-089132...". This should bring you the detail view for the EC2 instance.

If you scroll down a bit in the lower panel, you should find a section called "Security groups" under the "Description" tag. In my case, the link starts with "EC2ContainerService-the-greatest-...".

Clicking on that link should bring you a list with only one security group.

Click on the "Inbound" tab in the bottom panel.

In that tab, click "Edit". We are editing the inbound rules for this security group. We already have one for HTTP. We also want to allow SSH-ing into this group, so we add another row for SSH, and set the source to "Anywhere". We add one more rule for All TCP. Set the source to the security group we created earlier. In my case, I started typing "the-great" and I added the one that begins with "sg-02f94...".

Hit "Save" and and the new rules will show up in the bottom panel.

We've added the security group to the ECS instance. Now we need to add it to our RDS database.

Adding the database to the security group

Search for "rds" in the AWS console.

Find your database in the list of database, then click it's name. In my example, it is "the-greatest-rails-app-ever-db-1".

We're going to edit the security group for the database as well. In the detail view of database, we can edit it's security group. Click on it's name, which in my case it is "default (sg-7d493718)".

This view should look familiar, since we were just editing the group for the container instances. Look for the "Inbound" tab at the bottom.

Clicking on that tab should give you an edit button. From there we can add a new rule for MySQL/Aurora, belonging to the same security group we used before.

Test the SSH connection

Go back into your EC2 panel and click on "Instances"" in the side menu.

Clicking "Connect" will bring up instructions on how to connect to this instance. Yours will be different from mine. Run the instructions to be sure you can connect to your instance, with one exception: Instead of root, you should use ec2-user.

Here's what I got when running it:

$ ssh -i "the-greatest-rails-key-pair-ever.pem" ec2-user@ec2-54-85-141-101.compute-1.amazonaws.com
Last login: Fri Feb 28 21:24:36 2020 from 104.218.140.180

   __|  __|  __|
   _|  (   \__ \   Amazon Linux 2 (ECS Optimized)
 ____|\___|____/

For documentation, visit http://aws.amazon.com/documentation/ecs
No packages needed for security; 1 packages available
Run "sudo yum update" to apply all updates.
[ec2-user@ip-172-16-0-12 ~]$

Check the running Docker containers:

[ec2-user@ip-172-16-0-12 ~]$ docker ps
CONTAINER ID        IMAGE                                                                      COMMAND              CREATED             STATUS                   PORTS                     NAMES
e3fbc2eda44f        035513743183.dkr.ecr.us-east-1.amazonaws.com/the-greatest-rails-app-ever   "sh entrypoint.sh"   50 seconds ago      Up 48 seconds            0.0.0.0:32769->8080/tcp   ecs-the-greatest-rails-docker-app-ever-30-web-a2e082efd5f689d71500
9be25ec937fa        amazon/amazon-ecs-agent:latest

Final Testing of Our Rails application

Since our container is running, we should be able to access our Rails application. The EC2 instance should have a publicly accessible domain name.

We're going to plug in that URL and add /blog_posts at the end, since that endpoint will allow us to test the database as well.

Clicking on the 'New Blog Post' link should bring up a form to create a new blog post.

Once we've created the blog post, we will be redirected to this screen:

A little anti-climatic, but we have shown that our application does work in AWS!

Wrapping up

What have we learned so far?

How to dockerize our Rails application.
How to create an IAM role and ECR repository for a Docker image.
How to create an ECS cluster and Task Definition based on that image.
How to test the EC2 instance that is running the container.

With AWS, there is plenty to learn and explore. I will continue to post about new topics as I learn them! If you have any questions, suggestions or other comments, please feel to them down below.

Thanks everyone! :)

How to Deploy a Rails Application to AWS with Docker - Part 2

Farley Knight — Sun, 16 Feb 2020 23:03:11 +0000

Deploying Your Docker Image to AWS

The last blog post showed how to create a Docker image and container locally. Verifying that a container works before deploying will save a developer many headaches..let me tell you. 😅 Without this step, one could easily build and deploy an image that doesn't start up properly, or is not properly connected to the database. As they say, measure twice, cut once.

Now let's take a look at AWS Elastic Container Service (ECS). AWS ECS works by defining appropriate cluster parameters, allowing the service to add or remove machines, based on bandwidth needs or user traffic. These containers need to be registered with AWS to be used. So, we must work with another AWS service, namely the Elastic Container Registry (ECR).

From here, our cluster will be configured to launch containers on Amazon's services, called Elastic Compute Cloud (EC2) machines. To get started, we'll need to create an IAM policy, an IAM user, and a container repository.

Setting up Identity and Access Management (IAM)

In order to use AWS ECR, you'll need to add permissions to your account. To do that, first go to your AWS web console.

You should see a place to search for AWS services. Search for "IAM" and you should see the option for "Manage access to AWS services".

You'll know you're on the right page if it looks like this:

Click on "Policies" in the sidebar. Now you'll see this next screen, with a blue button called "Create Policy".

Creating the IAM Policy

Click "Create Policy" and it will show you a new form with four different sections.

For the "Service" section, we'll search for "elastic container service" and choose it from the search results. It should highlight blue when you've clicked it.

For "Actions", we're going to pick the "All Elastic Container Registry actions" option. Notice that shows a warning. We're going to immediately fix that in the next step.

For "Resources", we pick "All resources".

When you're done, click the blue button labeled "Review policy".

On this screen, the only necessary field is the name of the policy. The name doesn't matter, so long as you can remember it later. In my example, I call it "my-full-access-ecr-policy".

Creating the IAM User

After we've got our policy, we need to attach it to a user. Go back to the sidebar and click on "Users". You should see a blue button "Add user".

Click on "Add user" and you'll get a form for adding a user. I used the name "my-aws-cli-user". Also, while the AWS console is a fine UI for many tasks, it is perhaps not as efficient as the AWS CLI. Let's enable "Programmatic access" here.

In the "Set permissions", we're going to add the policy we just created. Pick the "Attach existing policies directly" option at the top.

Next search for the policy you just created, check the box next to it.

Click the blue button "Next: Tags". You scan skip the "Add tags (optional)" step. The next step is just to review before actually creating the user.

Hit "Create user" in the bottom right-hand corner. You'll get success screen and a chance to download the credentials (hopefully as credentials.csv).

MAKE SURE YOU DOWNLOAD THE CREDENTIALS FILE!

You will not get a second chance, so keep them ready for later.

Create a Repository

Just like for IAM, we're going to start this part at the AWS console. Search for "elastic container registry".

Once inside the ECR panel, you'll see an orange button labeled "Create repository".

Click on the orange button. You'll probably want to name your new repository after the name of your project. For the purposes of this tutorial, we'll go with "the-greatest-rails-app-ever".

Create the repository with the orange button in the lower right corner. Now you've got a new repository which can hold our Rails Docker image.

The URI on this screen is important for a pushing our Docker image to ECR. For my example, this is the URI that AWS ECR gave us to push to:

035513743183.dkr.ecr.us-east-1.amazonaws.com/the-greatest-rails-app-ever

Pushing to ECR

Pushing to ECR is a matter of tagging the image, logging into ECR via Docker, and then pushing the Docker image. Below is the first step: tagging the image.

$ docker tag the-greatest-rails-app-ever_web:latest 035513743183.dkr.ecr.us-east-1.amazonaws.com/the-greatest-rails-app-ever:latest

This command has no output, just in case you got confused. The next step is to login to ECR via Docker. To do that, we need AWS to give us the proper credentials. Run aws ecr get-login and you'll be given a really long response that will probably take up several lines in your console:

$ aws ecr get-login --no-include-email --region=us-east-1
docker login -u AWS -p eyJwYXlsb2FkIjoiVFVhaVpDbWlqR0NLSDZkYkxFUDJGaDd
...1ODI4ODU4NDB9 https://035513743183.dkr.ecr.us-east-1.amazonaws.com

Make sure it ends with a similar *.amazonaws.com domain. To run this docker login command, you can use the $ operator in the shell:

$ $(aws ecr get-login --no-include-email --region=us-east-1)
WARNING! Using --password via the CLI is insecure. Use --password-stdin.
Login Succeeded

With confirmation that the login was successful, we can tag our Docker image and push it to ECR.

$ docker push 035513743183.dkr.ecr.us-east-1.amazonaws.com/the-greatest-rails-app-ever:latest
The push refers to repository [035513743183.dkr.ecr.us-east-1.amazonaws.com/the-greatest-rails-app-ever]
31c727deda0b: Pushing [=============>                                     ]  13.89MB/50.29MB

With the new image on ECR, we can connect set up the connection to the database.

Connecting a Rails application to Amazon RDS

Ruby on Rails is a framework that thrives when it is paired with a relational database. Amazon provides the Relational Database Service (RDS), which is effectively a managed instance of MySQL or Postgres. We're using MySQL in this tutorial.

Open up your Amazon web console and search for "rds":

The big orange button labeled "Create database" is where we start the process.

Click it and you'll see some options on the kind of database you'd like to create. To keep things simple, we will go with the "Easy Create" option and the "MySQL" engine type.

Further down, we have more options:

The DB instance size can be kept small for testing purposes. Your application may require a larger instance. You should do load testing based on your anticipated needs.
The DB instance identifier can be changed, and will be used later. It defaults to database-1. I've chosen "the-greatest-rails-app-ever-db-1" as my database name.
The Master username should likely stay the default admin.
Use a password generator like LassPass to create a Master password.

When you're done, hit the orange button "Create database" in the lower right-hand corner.

It takes a bit for AWS to start the instance.

We will come back to RDS soon, when we need to provide the appropriate environment variables to our Rails Docker container, which includes the database endpoint. When you click on the database name (in my case "the-greatest-rails-app-ever-db-1"), you should be given a detailed view of your database instance:

The most important piece of information in this section is the database endpoint. Keep a reference to the endpoint for later in this tutorial.

Creating a Task Definition on AWS ECS

Amazon's Elastic Container Service (ECS) is what will be running our Rails Docker image. In order to run an image, we need to define what AWS calls a Task Definition.

Go to the AWS console and search for "ecs" and click on "Run and Manage Docker Containers".

Once there, you should see a blue button labeled "Create new Task Definition".

Click the blue button and you'll be given two launch types to use. Fargate is a relatively new offering, while EC2 is a much more mature service. We're going to choose EC2 for now since there is more support for troubleshooting around more mature technologies.

Hit "Next step" in the lower right corner. This is the meat of the Task Definition. I'm going with the same naming theme as previous sections, so my Task Definition will be called "the-greatest-rails-docker-app-ever".

The next major section to configure is the Task size. We're going with 512 for both the memory and CPU units. We can reconfigure this if we find it's too small or too big.

Task Definitions require container definitions to be spun up. The blue button labeled "Add container" will let us do that.

Click on "Add container" and a new form will pop up. A simple name for this container like "web" will suffice. In some setups, you'll also have another container be launched at the same time, like "db" or "job-queue". The Image should be the URI we got from ECR earlier in the tutorial. The Port mappings should be as shown: 0 for the Host port and 8080 for the Container port.

Scroll down and you'll see a section called "Environment" and add "sh,entrypoint.sh" in the Command section.

In the "Environment Variables" section, we must provide several for accessing the database. Here is what it looks like when I filled it out:

In summary:

MYSQL_HOST is the endpoint we got from the RDS database.
MYSQL_USER should stay admin.
MYSQL_PASSWORD will be the password you generated for the database.
RAILS_ENV could be staging, or production. But, could also be development if you're setting this up for the first time.
RAILS_MASTER_KEY can be found by running cat config/master.key.
RAILS_LOG_TO_STDOUT should be ENABLE.

Once you've got your environment variables set up, you can scroll down to the storage section. Since we've enabled Rails logging to STDOUT (via the RAILS_LOG_TO_STDOUT environment variable), we can use CloudWatch to collect our telemetry.

The logging configuration is the last step. You can now click the blue button "Add" to add the new container. You should now see it in the list of container definitions.

Now you can create the task definition. Click the blue button "Create" at the bottom of the page.

You should be greeted with a success notification.

FIN! 😃

How to Deploy a Rails Application to AWS with Docker - Part 1

Farley Knight — Mon, 10 Feb 2020 18:18:16 +0000

Why Use Docker for Deploying to AWS?

There are so many good reasons to use Docker, it would be hard to fully sell all of the benefits in a few paragraphs. On the outside, it seems like a lot of abstraction without immediate benefit. However, the ability to codify your infrastructure makes it possible for your web/cloud hosting solution to respond to changes in traffic. Since containers are small enough to be run on a developer's machine, development and production environments are nearly identical, reducing the chances of platform dependent bugs. Their small size also means you can run many containers on one machine.

You can read the following links if you're not familiar with Docker (and containerization in general), and to learn why it could be beneficial for your project's architecture.

Assuming you are already convinced, let's get down to business.

Prerequisites

Before beginning this tutorial, this article assumes that:

Your Rails application uses MySQL for its database. Or you're okay with using MySQL for your next Rails project. Either way, don't sweat it. We'll be creating a sample one along the way.
You have a AWS account, where you can test this out. If you happen to have an AWS account for your employer, you may run into issues with credentials. There is some advice from AWS about using the CLI and managing multiple AWS accounts.
You have Docker installed on your development machine.
You also have the AWS CLI installed on your development machine.

A Sample Rails Application

I know from experience that trying to add a big architectural change to an existing application can be tricky sometimes, causing lots of headaches. To ensure that you do not run across the same trouble I had, we'll create a sample application to go along with this tutorial.

If your configurations stray from this example, and need some guidance, feel free to reach out. If your existing application is drastically different, you should consider a smaller, more incremental change, which might be outside the scope of this article. Hence, for this tutorial, I created a sample Rails application, which uses MySQL by default.

First verify you have MySQL running:

$ brew services list
Name              Status  User    Plist
...
mysql             started fknight /Users/fknight/Library/LaunchAgents/homebrew.mxcl.mysql.plist
mysql@5.7         started root    /Library/LaunchDaemons/homebrew.mxcl.mysql@5.7.plist

Make sure you see mysql here, otherwise you'll have trouble connecting to the database. Next we will create the Rails app.

$ rails --version
Rails 5.2.4.1
$ rails new the-greatest-rails-app-ever --database=mysql
      create
      create  README.md
      create  Rakefile
      create  .ruby-version
      create  config.ru
      create  .gitignore
      create  Gemfile
         run  git init from "."
      Initialized empty Git repository in /Users/fknight/code/amazon_ecs/the-greatest-rails-app-ever/.git/
      create  package.json
      create  app
...

To ensure that our Rails application can talk to the database, we will create a simple UI to store blog posts. Rails gives us the ability to generate very simple UIs automatically, using scaffolds. We will generate a UI scaffold for blog posts using the rails generate scaffold command. This command creates a database table and a set of web pages to create new blog posts, edit existing blog posts, etc.

$ cd the-greatest-rails-app-ever
$ rails generate scaffold blog_post title:string content:text
Running via Spring preloader in process 97195
      invoke  active_record
      create    db/migrate/20200209213701_create_blog_posts.rb
      create    app/models/blog_post.rb
      invoke    test_unit
      create      test/models/blog_post_test.rb
      create      test/fixtures/blog_posts.yml
...
$ rake db:create
Created database 'the-greatest-rails-app-ever_development'
Created database 'the-greatest-rails-app-ever_test'
$ rake db:migrate
== 20200209213701 CreateBlogPosts: migrating ==================================
-- create_table(:blog_posts)
   -> 0.0168s
== 20200209213701 CreateBlogPosts: migrated (0.0169s) =========================

Verifying the Rails App Works

Run the Rails app:

$ rails server
=> Booting Puma
=> Rails 5.2.4.1 application starting in development
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.2 (ruby 2.4.5-p335), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:3000
Use Ctrl-C to stop

Now go to your browser with this URL: http://localhost:3000. If everything worked as expected, you should see this image:

Now to go http://localhost:3000/blog_posts. Try creating a new blog post.

And save it.

If you see this screen, your app is connected to your database. We're on our way to a dockerized app!

Adding a `Dockerfile`

A Dockerfile is a way to describe a docker image. It starts with a basic image, in this case we're using ruby:2.4.5-stretch which is based on Debian's Stretch distribution. There are lots more to talk about how Dockerfiles work. But that is the subject for a future blog post. Here is one that I propose we use for this series of posts.

FROM ruby:2.4.5-stretch

# Update the package lists before installing.
RUN apt-get update -qq

# This installs
# * build-essential because Nokogiri requires gcc
# * common CA certs
# * netcat to test the database port
# * two different text editors (emacs and vim) for emergencies
# * the mysql CLI and client library
RUN apt-get install -y \
    build-essential \
    ca-certificates \
    netcat-traditional \
    emacs \
    vim \
    mysql-client \
    default-libmysqlclient-dev

# Install node from nodesource
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - \
  && apt-get install -y nodejs

# Install yarn
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
  && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
  && apt-get update -qq \
  && apt-get install -y yarn

# Create a directory called `/workdir` and make that the working directory
ENV APP_HOME /workdir
RUN mkdir ${APP_HOME}
WORKDIR ${APP_HOME}

# Copy the Gemfile
COPY Gemfile ${APP_HOME}/Gemfile
COPY Gemfile.lock ${APP_HOME}/Gemfile.lock

# Make sure we are running bundler version 2.0
RUN gem install bundler -v 2.0.1
RUN bundle install

# Copy the project over
COPY . ${APP_HOME}

# Map port 8080 to the outside world (your local computer)
EXPOSE 8080

ENTRYPOINT ["sh", "./entrypoint.sh"]

The ENTRYPOINT directive is the final line as that will be the script we use to start the application. The contents of the file entrypoint.sh are below.

#!/usr/bin/env bash

# Precompile assets
bundle exec rake assets:precompile

# Wait for database to be ready
until nc -z -v -w30 $MYSQL_HOST $MYSQL_PORT; do
 echo 'Waiting for MySQL...'
 sleep 1
done
echo "MySQL is up and running!"

# If the database exists, migrate. Otherwise setup (create and migrate)
bundle exec rake db:migrate 2>/dev/null || bundle exec rake db:create db:migrate
echo "MySQL database has been created & migrated!"

# Remove a potentially pre-existing server.pid for Rails.
rm -f tmp/pids/server.pid

# Run the Rails server
bundle exec rails server -b 0.0.0.0 -p 8080

Docker Image Hygiene

In our Dockerfile, we used the COPY command to copy all of the files into our container. We would like to ignore some of those files. In that case, we include a .dockerignore file in our project:

.dockerignore
.git
logs/
tmp/

Adding a `docker-compose.yml`

Docker Compose is a tool for running multiple containers that must maintain network support between them. For example, a database and a web application must be in constant communication in order to persist, query, and then dynamically display information.

The following file describes two services: db and web:

version: '3'
services:
db:
  image: mysql:5.7
  environment:
    MYSQL_ROOT_PASSWORD: the-greatest-root-password-ever
web:
  depends_on:
    - db
  build: .
  ports:
    - "8080:8080"
  environment:
    MYSQL_USER: root
    MYSQL_PASSWORD: the-greatest-root-password-ever
    MYSQL_PORT: 3306
    MYSQL_HOST: db
    RAILS_ENV: development
    RAILS_MAX_THREADS: 5
  volumes:
    - ".:/workdir"

volumes:
db:

The first (db) is based on the dockerhub mysql image, which is robust enough for our needs.
- The environment variable MYSQL_ROOT_PASSWORD was provided to the mysql:5.7 section based on configuration advice available on the website. If we want a user with enough permissions to create their own database, we'll need to use the root user and provide the password for root.
The second (web) is what we're calling our web application's container. We can keep these names short because they only need to exist in this file.
- The web container requires that the db container be available first, so we add the section depends_on and include db in the list.
- Since web is based on our Rails app, we specify the build is happening in the current directory.
- We specify that we're mapping the ports 8080:8080, which means that we're exposing it to the host (your computer).
- These environment variables should conform to your purposes. In this example, I went with the Rails environment as development to allow us to have the most freedom while deploying. You will likely want either staging or production here.
- These environment variables will be discussed again later, in the AWS context. We'll be using different values there.
- The volumes should mention the WORKDIR from your Dockerfile.

Updating `config/database.yml`

We're going to rely on docker-compose to run the database instance for us when we need to bring up the service. Because we are letting docker-compose handle our environment variables as well, we're going to refer to them into our config/database.yml. In other words, we'll be including the environment variables MYSQL_USER, MYSQL_PASSWORD, etc.

The contents of your config/database.yml file should look something like this:

default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV['MYSQL_USER'] %>
  password: <%= ENV['MYSQL_PASSWORD'] %>
  host: <%= ENV['MYSQL_HOST'] %>
  port: <%= ENV['MYSQL_PORT'] %>

development:
  <<: *default
  database: the-greatest-rails-app-ever_development

staging:
  <<: *default
  database: the-greatest-rails-app-ever_staging

test:
  <<: *default
  database: the-greatest-rails-app-ever_test

production:
  <<: *default
  database: the-greatest-rails-app-ever_production

Verifying Your Docker Image

After adding the Dockerfile and updating the config/database.yml, we can build and run our container to verify it works properly.

Checking the Database Connection (optional)

If your Rails application has trouble getting access to the database, it could be a networking issue. You can check if the application container has access to the database container by following these steps:

Log into Docker container

This involves running docker ps and looking for the container ID. Use that container ID to then run docker exec -it <container-ID> /bin/bash. This should log you into the container. Once inside the container, check your environment variables by trying echo $MYSQL_HOST or echo $MYSQL_USER.

Look for environment variables, $MYSQL_USER, $MYSQL_PASSWORD, making sure they are being set properly.

$ echo $MYSQL_USER
root
$ echo $MYSQL_HOST
db

Try connecting via mysql. If those seem okay, you can attempt to log into the database by running.

$ docker exec -it 324a9d4aa153 /bin/bash
root@324a9d4aa153:/workdir$ mysql -h $MYSQL_HOST -u $MYSQL_USER -p$MYSQL_PASSWORD
Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MySQL connection id is 3
Server version: 5.7.29 MySQL Community Server (GPL)

Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

MySQL [(none)]>

Building and running from `docker-compose`

Once you've set everything up, you can build it using docker-compose build.

$ docker-compose build
db uses an image, skipping
Building web
Step 1/15 : FROM ruby:2.4.5-stretch
 ---> a14928bdfa34
Step 2/15 : RUN apt-get update -qq
 ---> Using cache
 ---> 0387647b8229
Step 3/15 : RUN apt-get install -y     build-essential     ca-certificates     netcat-traditional     emacs     vim     mysql-client     default-libmysqlclient-dev
 ---> Using cache
 ---> 206407159286
Step 4/15 : RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -   && apt-get install -y nodejs
 ---> Using cache
 ---> 1a0efb43afa5
Step 5/15 : RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -   && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list   && apt-get update -qq   && apt-get install -y yarn
 ---> Using cache
 ---> 5e43706cab49
...
...

Once it has finished building, you can run them with docker-compose up.

$ docker-compose up
Starting the-greatest-rails-app-ever_db_1 ... done
Recreating the-greatest-rails-app-ever_web_1 ... done
Attaching to the-greatest-rails-app-ever_db_1, the-greatest-rails-app-ever_web_1
db_1   | 2020-02-10 16:19:58+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 5.7.29-1debian9 started.
db_1   | 2020-02-10 16:19:58+00:00 [Note] [Entrypoint]: Switching to dedicated user 'mysql'
db_1   | 2020-02-10 16:19:58+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 5.7.29-1debian9 started.
...
...

Your Rails App has Been Dockerized! 🎉

You now have a version of your Rails application running on a local Docker container. We did this to make sure it is working locally before deploying it to the rest of the world. In the next part of this series, we'll talk about getting your container running on AWS.

Forem: Farley Knight

Three Implementations of a Bag in Python

The Bag Interface

Implementing Iterable in Python

Unit Testing a Bag

Creating a Bag Using the Built-In list

Using a Linked List

Using defaultdict from collections as a Multiset

Conclusion

Docker Basics - Containers and Images

What is Docker?

Why Use Containers?

Can Docker perfectly solve all of these problems?

No

Can it solve most of them, and make the rest routine?

Definitely

The value of reproducible environments

What is a Container Image?

Let's make an app.js to Dockerize

Adding a package.json

Creating a Dockerfile

Building the Docker Container

Giving Your Image a Name

Turning an Image into a Container

Docker Container Management

Interacting with Your Container

Removing Your Stopped Container and Image

Conclusion

Building Forms with Formik and React - Part 2

About this post

Adding Formik to the Project

Rewriting LoginForm

Import Formik

Rewriting render

Adding initialValues and validate

Testing it Out

Using Yup for Validation

Conclusion

Building Forms with Formik and React - Part 1

About This Post

Creating a Sample React.JS Application

Building a Login Form

Fleshing Out the Login Form

Adding Bootstrap to our React Project

Form Validation in React.JS

Form state in React.JS

Writing Validations in React.JS

Next post: Refactor using Formik

How to Deploy a Rails Application to AWS with Docker - Part 3

Creating a load balancer

Creating the ECS cluster

Creating an EC2 key pair

Creating the ECS cluster

Creating an ECS service

Creating AWS Security Groups

Adding the cluster to the security group

Adding the database to the security group

Test the SSH connection

Final Testing of Our Rails application

Wrapping up

How to Deploy a Rails Application to AWS with Docker - Part 2

Deploying Your Docker Image to AWS

Setting up Identity and Access Management (IAM)

Creating the IAM Policy

Creating the IAM User

Create a Repository

Pushing to ECR

Connecting a Rails application to Amazon RDS

Creating a Task Definition on AWS ECS

How to Deploy a Rails Application to AWS with Docker - Part 1

Why Use Docker for Deploying to AWS?

Prerequisites

A Sample Rails Application

Verifying the Rails App Works

Adding a Dockerfile

Docker Image Hygiene

Adding a docker-compose.yml

Updating config/database.yml

Verifying Your Docker Image

Checking the Database Connection (optional)

Implementing `Iterable` in Python

Creating a Bag Using the Built-In `list`

Using `defaultdict` from `collections` as a Multiset

Let's make an `app.js` to Dockerize

Adding a `package.json`

Creating a `Dockerfile`

Rewriting `LoginForm`

Rewriting `render`

Adding `initialValues` and `validate`

Adding a `Dockerfile`

Adding a `docker-compose.yml`

Updating `config/database.yml`

Building and running from `docker-compose`