Author: Sean Hallisey

Since the last time that I made a blog post one of the tasks I was assigned was finding out a way to deploy our web application to the cloud so that users can finally use our application. It basically came down to two options. AWS Amplify and Google App Engine.

The decision came down to these two because they are very popular and there are lots of guides and documentation on how to get a React application deployed to those services, and the other reason is that I have some familiarity with both. I have familiarity with Google App Engine from CS 493 which I am taking currently, and AWS Amplify because I used AWS during my internship. I tried to deploy both applications to their respective platforms and this is the story that.

First I went with Google App Engine and I found a blog post that someone wrote and they went throught the steps of getting everything setup and have deploys after pushing to a specific branch. First the instructions where to get your app containerized with docker. Which was not too difficult because the steps were really well explained. Then we would create a project with Google App Engine and then push the container to that project. The next big step was getting the app to deploy by running a few command line commands and it was up into the cloud and ready to be seen, but therer was no way re-deploy if you had changes without going through that process again. So, now we had to get GAE attached to the repo with some secrets and create a pipeline that would run on any merges to main. You have to make secrets and make sure you can understand what an yaml file is and what it does. I did not and it was a pretty big headache and I stopped trying at the moment and moved on to AWS Amplify.

When you set up the project with AWS Amplify all you need to do is follow some simple steps. One you need to allow AWS Amplify to read the contents of your Github repository. Fill out a pre-made template of where your preoject will ‘build’ and where that build folder will be, and which branch you want to be your deploy branch. And thats it. Any changes you make to that branch will get your app re-deployed. It was very simple and easy to get setup.

So in the end I decided to go with AWS Amplify and its has been smooth sailing vers since.

For deploying anyway

The last two weeks have been pretty hectic for me. My wife and I are moving soon and we recently put an offer in on a house and it was accepted! Other than that news for me I have been working on the capstone project in the short amount of time in between looking for a house, work, and my other class.

For the 2 week sprint, my goal was to create some reusable React components for text input, a list of experiences, and dropdowns, and also create the create a trip form page. I started off by working on the text input with some of the basic things that a text input needs. For example a label, value, type, and hint. Which was pretty simple since we are also using React-Bootstrap for our project. This library is actually one of the oldest React libraries.

Once I had finished with the reusable components it was time to start on our first form. The trip form is, at the moment, just a name, but later on, we will be adding functionality for a description to add as well, and maybe a start and end date. There is one thing that I did not take into account and that was form validation. Luckily my fellow teammate had a pretty simple solution. Instead of creating our own form validation by hand. He decided to look into Fromik and Yup.

Formik is designed to manage forms with complex validation. This coupled with Yup which is a validation schema package that is actually very similar to express-validator or Joi if any backend express developers have ever used those. You basically tell it what value you want to validate and give it some constraints and a message that will show if the validation fails.

const validationSchema = Yup.object().shape({
	username: Yup.string()
                .min(2, 'Minumum 2 characters')
                .max(30, 'Maximum 30 characters')
                .required("Required"),
	password: Yup.string()
                .required('No password provided.') 
                .min(8, 'Minimum 8 characters')
                .matches(/[a-zA-Z]/, 'Password can letters.')
                .required("Required"),
});

Once you have your validation schema ready you can pass it as a prop in the Formik component, and also pass some initial values that will be for your form. You can also need to pass some functions that come with Formik that will handle common functions for forms including handleChange and handleSubmit.

<Formik
    initialValues={{
    username: "",
    password: "",
    }}
    validationSchema={validationSchema}
    {({
        handleSubmit,
        handleChange,
        isSubmitting,
        values,
    }) => (Form Goes Here)
></Formik>

After that, you are pretty much set up to handle some form validation in your new React application!

We have finally started getting the ball rolling on our project. We have begun with divvying up who will work with what. There are 3 people total on the team. Another partner and I are working on the front end and the other partner is working on the back end. For the front end we decided to go with React as our framework, Bootstrap as a CSS framework, and Jest as our testing framework.

I was given the task of setting up our GitHub repo for the front end, while my other partner was given the task of setting up our task management software Jira for the team. Now something I have come to realize with using React is when you want to get things up and running easily you run ‘npx create-react-app’ and from there you are usually good to go, but if you run into issues you dig around the internet to find a solution, usually found on StackOverflow, and you find out how much this command actually does for you.

I don’t know how common knowledge this is, but I won’t butcher everything it does for you. I think this article is a pretty good explanation for what is happening. I really had no idea what a webpack was or what it did, but I am glad someone smarter than me came up with it so I can spend more time googling how to center a div, and how to setup my repo!

---

HOW I GOT TO OREGON STATE

Hello, my name is Sean Hallisey, and I am in my final quarter at Oregon State University. I am doing the post-baccalaureate degree because I have a previous degree in music education from Sam Houston State University. I wanted to be a beginning band teacher when I was younger, like in my high school/early college years. I wanted to be able to start the kids off and be able to watch them progress. I never really got a chance to start that career and did not have a backup plan if the music teacher career did not pan out how I wanted. So, I worked in customer service for many years after graduating and eventually stumbled upon Udemy and Colt Steele’s Web Developer Bootcamp, and enjoyed the process of creating a web app from scratch, but I did not feel comfortable with my abilities and sought after another Udemy course from Brad Schiff, and then another course, and another after that, and then Youtube how-to’s. Long story short I was stuck in what is known as ‘tutorial hell’. I would go from one beginner tutorial to another without knowing how to take the next leap. With the uncertainty of my abilities, I essentially gave up on these ventures even though I enjoyed creating something that could help solve a problem for other people. Then the Covid-19 pandemic happened, and I was left with uncertainty about the service industry and wasn’t really sure where to go next. I originally looked at going back to school, but nothing too serious, and figured now would probably be the best time for me to go back to school. I eventually made my decision, as I am sure most of the students finishing up a post-baccalaureate degree did, to start at Oregon State just after the pandemic.

---

TIME AT OREGON STATE

My time at OSU has been positive overall. Some classes were stinkers and some classes really stood out to me. CS225 Discrete Structures is the class that tested most, if not all students coming into the program. This class helped me get my ‘stuff’ together and laid the groundwork for how I would take on bigger classes. Another class that stands out is CS475 Parallel programming. If you are reading this as a person in their last term, you really missed out. If you are reading this as a person who still has the opportunity to take this class. You NEED to take this class. Professor Bailey makes this class special, and his engagement with the class is something you don’t get with this program as a whole and was a breath of fresh air.

---

HOBBIES/INTERESTS

One of my hobbies is video games. Much to the surprise of no one, I am sure that a CS major likes video games. Another hobby of mine is going to the movies with my wife. We have something called AMC A-List and we can see up to 3 movies a week and we both pay $20 a month. This hobby almost didn’t make it out of the pandemic, but I am really glad it did. My wife and I also have a corgi named Okapi (pronounced Oh-ka-Pee). We call her ‘P’ for short.

Welcome to blogs.oregonstate.edu. This is your first post. Edit or delete it, then start blogging!