DEV Community: Sheridan

How to Deploy your app to Heroku

Sheridan — Tue, 12 Jul 2022 18:11:15 +0000

Hello, this blog is going to explain how to deploy an app that was made with a ruby on rails backend and a react frontend.

To begin you want to create a heroku account, this is free and necessary to use the site to deploy your app.

Once you have created the account go to your project and sign in to heroku through the terminal.

It will direct you to the heroku site to log you in.

Disclaimer- before you do anything inside of heroku make sure that you have pushed all your data to github using these commands.
git add . git commit -m "message" and git push
This is what heroku will use to build the app on their site to eventually deploy it.

Ok, now that all your information is updated and you are logged into heroku you want to make sure that heroku is available on your application by running these commands
heroku buildpacks:add heroku/nodejs --index 1
heroku buildpacks:add heroku/ruby --index 2
If they are installed already it will give an error that looks like this

Alright! Almost there!

Next we want to make sure that heroku sees the app that we are building. To push the information to heroku type:

Now, if everything was set up correctly this command will initiate a long line of code that will take a couple minutes to complete. If everything looks good it should also migrate the information for you. If there is an issue and it says rails aborted you can view the error and fix it accordingly. For more information about what the error is you can use the command:

It should populate where exactly the application failed.

Side note: if you are using image uploading make sure you are using a public site to upload them to. Meaning somewhere not on your local hard drive. A place where heroku can see. I used AWS and used a bucket to upload my images. I also changed my seeds file in my database to tell the application where to view the images. You also need to include them under the "Config Vars"
Just click reveal confiv vars and put the keys into the key and value areas so heroku knows where to look.

Side side note. Make sure your public keys are in an .env file so that they are available but hidden to the public eye. Learn from my mistakes.

Back to our regularly scheduled program.

Ok, so you should have been able to push and migrate your data. Now we can seed our data. Go ahead and type:
This command may also take a little bit of time. If there is an error there make sure that you type:
to see exactly where the application failed. Be warned, this might be time consuming but you are so close!

If you did run into an error while pushing or seeding your data to heroku you might want to restart your database so heroku has the most up to date information. Use this command

To find the name of your project it will be here

Don't push it the updated version to heroku just yet. You want to make a slight change to your application so github sees a change. Something as simple as this will do it.

So close, stay with me.

Now that you have restarted your heroku database and made the proper changed to your project, you can go ahead and re-push the information to heroku. If you forgot the command, here it is:

Once again, this should automatically migrate your information to heroku. You can them type in:

When heroku is done seeding it should say something like the "seeding is complete" and will give you a URL. Click that URL and BAM your project is deployed through heroku!

Congrats you did it!

Implementing Image Uploading in Ruby

Sheridan — Tue, 05 Jul 2022 13:56:22 +0000

Hello, this blog is simply going to walk you through how to implement image uploading to a react frontend with a ruby on rails backend.

First you want to create your database. Making sure you have models, controllers, and serializers for your data. You will also want to make sure that you have told your seeds file that your database contains images. Here is an example.
You can see I implemented the images on lines 15, 17, 19, 23, 25, and 27. I was able to save my images in a file and access them through app/assests/imagefilename.

Once you have that you want to install active storage using the command:
rails active_storage:install.

After that run the migration using:
rails db:migrate
This will create two new tables called active_storage_blobs and active_storage_attachments. These are important. Your code should also automatically include the files storage this will be where the database stores the images you added, as well as any more you add along the way.

These commands should also add a storage.yml file. If none of these files are included simply add them in and it should work.

Now that all the files have been created and your images are in your database, it is time to create your associations. If for example you created image uploading in products your product.rb file should include an association saying has_one_attached and what you called the image. For example: On line 8 I called my images for the products :photo. The dependent: :destroy is basically saying if I delete a product remove the attached image as well.

Whew, almost done with the backend section. Ok, now that we have that, next we need to make sure we have the proper validations to not throw an error. There are a couple ways to do this. You could write the validation in the model like so : with a helper method such as this: .

I chose to do mine this way, implementing a helper method in my serializer.

If you are able to I recommend doing it the first way I mentioned.

To make sure the image is the proper size you can add logic to your helper method such as
unless main_image.byte_size <= 1.megabyte errors.add(:main_image, "is too big") end
as well as
acceptable_types = ["image/jpeg", "image/png"] unless acceptable_types.include?(main_image.content_type) errors.add(:main_image, "must be a JPEG or PNG") end
These would be to make sure your image is in the correct format and that it is a decent size to be able to display it in your front end.

Ok, hang in there. Almost done!

Next, we need to make sure we have access to the images. We can do that be installing a gem in the Gemfile called:

Then install it using bundle install in the terminal. You also want to say sudo apt-get install imagemagick to make sure you have all the logic implement.

Now that the logic is in all you need to do is let your frontend know there is an image to be used. This is the example that I used.

This calls avatarURl and assigns it to the image that I use on line 26.
It's a ternary to say if the image I uploaded is present display it, otherwise show the default avatar that I uploaded.

Boom! Just like that you have implemented image uploading!

Creating an Application| Ruby on Rails

Sheridan — Tue, 31 May 2022 19:41:22 +0000

Hello again! This blog is all about the basics of starting a Ruby on Rails backend to communicate to a React frontend. For our purposes we will build a todo list. The most basics portions of a Rails app is the route, controllers, model, and of course using all of that to migrate the data. Let's get started!

To begin, you want to create your Rails app. Simply open a terminal and cd into the directory where you want to create the rails app. Type in the following code and viola, a new app is created.
rails new name of your app
It should look something like this: My app being called example app. Once you have created the app cd into it and we can start building the basics.
cd example-app

Ok, now that it's created it we want to take a look around.

Let's start by adding a route to our routes file, config/routes.rb.
This is what mine would look like. This code would display all the todos that I have.

Next we want to create a controller

I went ahead and put this code in for the most basic functionality.

Now that we have a controller and a route let's create the next piece, the model.

A model is what Ruby uses to represent data. To create a model, let's use the model generator
This will create the most basic structure for the todo table - a title in the form of a string, and a body in the form of text.

This will create a models/todo.rb file. In there I wrote some basic code to get the app working.

Whew, we are almost there!

The last thing needed to create the most basic application is to migrate Simply run rails db:migrate in the terminal. The four lines below are to show that the migration is successful.

To make sure that your application was created successfully you can run rails s A.K.A. rails server the browser should return something like this The array is empty because we created an application but did not put any information into the database yet.

Congratulations! You have officially created a basic Ruby on Rails App!

What is Postman?!

Sheridan — Mon, 28 Mar 2022 15:36:05 +0000

Hello beautiful people! It's me again coming to tell you about Postman. So first, what is postman? Well, Postman is an application where an user can send requests to a JSON server (a Node package that turns a JSON file on your computer into data storage) and find out if the request works or not.

For example, let's say you are building a project using Ruby and JavaScript. Ruby being backend and JavaScript being frontend of course. You are going to want to send data that you create in the backend, to the frontend. You know, so that you can see what is happening on your web application. Postman is a fantastic way to do that!

Let's say in our backend we create a todo list that has multiple users. You may want to perform a few CRUD (Create Read Update, Delete) operations. To start you want to download postman from their website.

https://www.postman.com/downloads/

Make sure you set it up properly. Just so you know, you don't have to sign in, you are able to say 'skip and go to the app'. Then you just click 'Get Started', 'Create a request'. After that you figure out which CRUD operation you want to use, make sure the URL that you are typing matches with the one you created in the backend, and voila you have successfully used postman!

Now you are able to 'get', 'patch', 'post', 'delete', etc., through postman. Go crazy, really play around with it until you fully understand what it does. I will also recommend you pay close attention to what you type in the 'Body' portion. You want to make sure that the object you type has the exact parameters you laid out in the backend. Otherwise you are really going to confuse yourself.

I hope this helps, remember, don't be afraid to try multiple requests, after all this is your project and you want to make sure you know everything inside and out.

React- how to begin

Sheridan — Sun, 08 Aug 2021 01:29:24 +0000

Hello everyone, welcome back to my blog! Or, if you haven't been here before, welcome! This blog is all about react. I'll be showing you the basics of how to begin an application through react. So hang on tight, it's gonna be a bumpy ride. Just kidding, the start up is actually pretty simple to understand!

First off, we need to create the react app in the first place. This is done by going to a handy dandy place called the terminal. Mine is called "Ubuntu" but there are many to choose from. If you are working with ubuntu you are going to navigate to where you want your project to be located. For example, I want mine under "sheridan-codes" so I am going to type "cd sheridan-codes" it should look something like this :

Once we are in the location we want, we can create our actual project. How exciting! Once in the location, type in "npx create-react-app (what my app is named)" this basically means create a react app that is called something. Let's say for example we want it to be called "practice-app". We would then write npx create-react-app practice-app. Easy enough right? See you're halfway there! This step will look something like this:

Now just a heads up, this step will take a minute to work it's magic, don't be alarmed if it takes a minute or two to say it's done. Once it's completed the installation of the files you can run the usual "code ." to open your project.

Congratulations, you have officially created a project in react! Now you're ready to begin creating components and designing an awesome application. To start kicking butt and taking names. To show Tom, who thinks he is hot stuff and likes to show off, who is boss!

One final disclaimer I feel I need to mention before I leave you. If this is your first project do not, I repeat, do not change or alter the HTML file! Trust me, I have made that mistake before and I had to begin the whole project over again, which was not fun. This is the file you should stay away from:

I hope this information was helpful to you, thank you so much for reading and allowing me to lead you on this journey. Good luck coders, you got this!

My first official project

Sheridan — Fri, 28 May 2021 21:19:57 +0000

Hello everyone! It's me again coming to talk about the first project I have done to date. Well technically the only project in this boot-camp I have done... so far. Let me just tell you how fun this was, and by fun I mean so much fun I wanted to pull my hair out the whole time.

Just kidding.... kinda...

Anyway, we were given a task to create a webpage that contains a HTML, JavaScript, and a CSS file. The parameters were to create three event listeners and use a public API. Oh, and the entire app had to run on a single web page meaning only one HTML page. Not that difficult right? Well you would be correct except when you are given this task on your own. As in the only piece you are given is a git repository to fork.

So, step one, fork your code. Easy enough I think. Perfect, now the fun part. you have to create your HTML, CSS, and JS which is also easy enough with a simple google search.

Ok, now for the real interesting part. figuring out what you want your website to look like and finding a public API to use. I will take a second to stress how important it is to plan out your website. What it looks like and what exactly you want it to do. You know, like the old saying measure twice cut once. I learned that particular lesson the hard way. Just, you know, do what I say not what I do.

Anyway, I decided upon a GitHub API that projects random pictures of cats on the screen. Perfect. I essentially decided on creating a "click me" button that when pressed would pull up pictures of cats. Yes, you guessed it, this is where that event listener comes into play! Now if you're wondering where the event listener goes, well let me tell you. You first have to create a button tag in the HTML (because "click me" is in the form of a button), then you can link it in the JS.

Voila you have an event listener. I know what you're thinking, Sheridan you said you have to have at least three to pass this project. Yes, you are correct, that's why I put in a comment section where you would be able to leave a comment about the cats. I also put in a heart button where you can, you guessed it, like the page. We are just cruising alone here, look at us go! I will go ahead and say I am making this sound like a walk in the park but trust me when I tell you, creating that heart button and trying to get it to work had me question my sanity multiple times. It was a shit show to be frank. I think I literally screamed in pure joy when it finally worked. Back to my process.

Ok, so what do you think is next up? Well, you have already put buttons into your HTML for the "click me", the "submit", and the "heart button". We have added our event listeners to the JS. If you were thinking that we have to actually get our API working you would be correct. So in all honesty I would suggest ensuring the API works to begin with. It is fantastic to get your HTML set up in a way that you understand and makes the website pleasing to the eye, but, if your API does not work then you will end up having to start from scratch.

Guess what I had to do...

Yep, that's right. The API I had originally set out to use ended up now working properly so I had to scrap my idea and start from scratch. Fun. So, take my advice, make sure the URL for your API works. Once you ensure it does it is time to fetch it. Fetching an API can be done a few different ways. I chose to fetch mine in the JS and honestly it worked out swimmingly for me. Did I have to reach out to my instructor a little for this, maybe, but no shame in that game. I learned something from it and that is all that matters.

The last thing I did was add finishing touches. Such as making sure all the buttons were centered and looking nice. I decided to put the "Click me" button in a black box that would separate it from the heart and submit button. At the end of the day it is all personal preference.

If I had to do this project again I would absolutely give myself more time to think about the layout and specific spacing of things. I think I would also add some more fancy things like a like button for each individual photo in the API, but there was no way I was going to have time for that. I would also have put a column to the side where the most liked photos would be. But, again that would mean I would also have to set a like button to each picture. Not impossible, just way too time consuming and complicated for the level I am at currently.

Anyway, I hope this blog was helpful and made you feel like you could conquer your own website/ app. See ya on the next one!

Why Software Engineering?

Sheridan — Mon, 26 Apr 2021 13:01:48 +0000

Hey guys, Sheridan here! I wanted to hop on and talk about my journey in software engineering, why I'm here, what makes me want to do this, so on and so forth.

First, let me start out with saying I am not someone who knows a lot about computers or computer programs. I am a total beginner when it comes to coding. Anything beyond the basics of control C and how to minimize and maximize a webpage is beyond my scope of understanding. But, I have friends who have gone through coding boot camps and talked about how much freedom it allows. I see how much fun they have with the people they work with, and how they just seem to be having a good time doing their job. they recommended the flatiron boot camp, now here we are.

Anyway, all that to say I dabbled in HTML on my own time just to see what I thought... and holy crap was it fun! I was able to dabble in HTML, CSS, and Java script to create a basic website.

I will go ahead and state that this is the hardest thing I have ever done by far. Total cluster ~you know what ~ when you're in the middle of coding. But, once you get it, it's similar to the feeling of hiking up a steep mountain and finally reaching the top and seeing those beautiful mountain views.

I have an educational background. Meaning, I graduated with a bachelors degree in Anthropology and a minor in History. I know what you're thinking. Sheridan what the heck made you want to make a 360 and go to coding... on a computer... when all you were doing was scientific based nerd things. To be honest I don't even know. I want to eventually dabble in van life and I quickly realized the path I was on was not gonna be able to transfer on the road.

I'm excited to continue this journey, and see what other doors are opened along the way!