Forem: Isaac Weber

How To Deploy Apollo Server To Elastic Beanstalk

Isaac Weber — Thu, 09 Jan 2020 16:39:16 +0000

Deploying an application to Elastic Beanstalk was pretty tricky for me at first. It's pretty simple but somehow I messed it up so many times. Here is a guide to get you started so you don't make the same mistakes I did.

First things first

clone or download this repo https://github.com/ikey2244/apollo-server-elastic-beanstalk.git
navigate to wherever you downloaded it
click on the apollo-server-elastic-beanstalk folder
highlight everything, right click and create a zip called application.zip
we will be using this zip later so just hang on to it for now

Getting Started with Elastic Beanstalk

Sign into your AWS console https://aws.amazon.com/. Or go to https://portal.aws.amazon.com/billing/signup#/start if you haven't made an account

*dislaimer: AWS makes you put in a credit card in order to make an account. It's free but you have to monitor your usage. It's very easy to wrack up charges.

Once you've signed in or created your account you will be greeted with this page. Go ahead and search for Elastic Beanstalk. Click the "Elastic Beanstalk" from the suggestions list

Click the blue "Get Started" button

This is where we will configure our Elastic Beanstalk environment and application.

Go ahead and do the following:

Application name: apollo-server
Platform: Node.js
Upload your code: click "upload" button a window will pop up that looks like this:

Choose the zip file called application.zip that we created earlier
Click "Upload" button
Finally click the "Create Application" button

After following those steps you should see something like this:

Now we wait...

Finishing up

If followed each step correctly you should see something like this. Success!

Click on the URL that was generated at the top and see your new application in all of its glory!

This is a pretty simple setup. Stay tuned for a more complicated example. :)

Beginner's guide to a developer work environment (Part 2)

Isaac Weber — Tue, 18 Jun 2019 19:06:34 +0000

Finally getting around to writing the part 2! Sorry for the delay my friends. Here is a link to part 1 if you haven’t read that yet: https://dev.to/ikey2244/beginner-s-guide-to-a-developer-work-environment-part-1-ibk

Here is how I actually use the tools from part 1 in my day to day.

1. Xcode

How often I use it: Never

Only installed this to make sure our macs are set up correctly for development. If you are doing an IOS development this is what you would interact with.

Common Workflow: None

2. Homebrew

How often I use it: Occasionally

You don't have to use Homebrew. It's just a nice thing to have. It makes it really easy to install applications and tools etc.

I sometimes will use Homebrew to run servers/databases in the background. For instance I might have a MongoDB database running with Homebrew. That might look something like this.

Installed mongoDB
run command brew services start mongodb

that's pretty much it.

3. ZSH(Oh-my-zsh)

How often I use it: Everyday

So technically I use this everyday but really if you are using you Iterm you are using ZSH. Once again ZSH just offers a nice way to interact with your terminal. Tab completion/suggestions etc.

2. Iterm

How often I use it: Everyday

Common commands I use daily:

mkdir creates a new folder

Example: mkdir code creates a new folder called "code"

cd stands for "change directory".

Example: You just created a new folder called "code". In order to get inside that folder you have to type cd code and hit enter. You then will be taken inside that directory.

.. allows you to move up in the in the directory.

Example: you are in a directory called code/my-sick-project. Now you just want to be inside the code directory. By hitting .. you will move up in the directory and thus be in the code folder.

ls lists everything within a directory/folder.

touch your-file-name creates a new file.

Example: touch index.html creates a new html file called index.html in your project.

clear to clear the console (just cleans up what you've done previously)

⌘ + d to add another window to terminal.

Side note: When you first open your terminal you will most likely see a symbol that looks like this ~ this just indicates that you are in the home directory of your computer. If you run the command pwd in your terminal you will see directory you are currently in. This can be helpful if you get lost.

Common Workflow:

Open Iterm
run command mkdir new-project
cd into that project by typing cd new-project
touch index.html to create a new index.html file in the project.
run command code . (this opens VS code. We will get to that later).

Extras:

Hitting ctrl + r in your terminal will pull up a search for all your previous commands you ran! It's extremely useful if you forget what command to run. let's say you only remember the first part of a command. For instance you remembered the touch but don't know what to do next. Hit Ctrl + r in your terminal and type touch this will bring up the last time you typed that command and show you what you did.

3. Visual Studio Code

How often I use it: Everyday

In the Iterm section I mentioned running this command code . By running this command in a directory VS code will open and you can start editing files. This is very useful when creating a new project!

Here is how you make that work:

Open VS code.
Press ⌘ + ⇧(shift key) + p: this opens the command palette
In the command palette type "shell command" it will show something like this
Press enter on this option
That's it!

Now go into a project you created in Iterm or create a new directory(this would be good practice) and run the command code .VS code should open and you should see the name of your project on the left hand side in the file explorer.

Link to further information about this: https://code.visualstudio.com/docs/setup/mac

As you can imagine programming would be really hard if you had to do everything manually. Luckily VS code gives us a ton of hotkeys and shortcuts to make our lives easier! Let's check it out.

I used to use Atom(another code editor like VS code). I still love Atom but VS code has captured my heart. Relearning hotkeys for VS code would be a pain. Fortunately VS code has an extension called "Atom Keymap" that pulls all the hotkeys from Atom and sets them for VS code. Brilliant!

You don't actually need this but if you want to use my hotkeys then you will need this extension:https://marketplace.visualstudio.com/items?itemName=ms-vscode.atom-keybindings.

Install by going clicking on this icon. and search for Atom Keymap. Hit install button and you should have it.

Common hotkeys I use everyday:

copy ⌘ + c
paste ⌘ + v
cut ⌘ + x
delete single line of code ⌘ + ⇧(shift key) + k
duplicate highlighted code ⌘ + ⇧(shift key) + d
Hold ⌘ command key and click to have multiple cursors.https://code.visualstudio.com/docs/getstarted/tips-and-tricks#_editing-hacks
undo ⌘ + z
redo ⌘ + ⇧
search for a file in your project ⌘ + p
⌘ + right-arrow end of line
⌘ + left-arrow beginning of line
⌘ + top-arrow 1st line of code
⌘ + down-arrow last line of code
while holding ⌘ + ⇧(shift key) + arrow key will highlight the line of code corresponding to the direction.
Jump between words. hold alt key while using arrows to jump to each word.

Needless to say there are a lot of hotkeys. Hopefully this list will get you up and running. For a full list checkout the documentation in the Atom Keybindings extension.

Make it pretty

VS code out of the box is pretty ugly. Let's make it pretty!!

I really love the Palenight theme
https://marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme

Install it

click icon
search for Palenight theme
Install
reload
be amazing

There are a lot of different themes. Make it your own! Being comfortable with your editor is really important.

That's all folks!! Hopefully that helped some new comers. Please let me know if you see any errors or have any critiques. I welcome all correction. :) Remember everyone is a beginner at something so don't ever feel bad about not knowing something. Ask questions and fail often. That's the only way to get better.

Beginner's guide to a developer work environment (Part 1)

Isaac Weber — Wed, 05 Jun 2019 22:04:16 +0000

When I first got into programming I had zero idea how professional developers worked. My idea of coding something was to open https://codepen.io/ and start hacking away. This helped me get something up quick but I knew it was unsustainable. I constantly was asking myself "what are developers using in the real world?" Too intimidated by all the tools out there I resorted back to my comfortable world of online editors. It wasn't until I joined a coding bootcamp where I was initiated into a real workflow.

I know how daunting it can be to open a terminal or editor and have no freaking clue what to do next. So this is my attempt at making it easier for beginners to get started with tools used by professional developers.

1. Xcode(MacOS)

Description:

In order to get a proper development environment set up on your computer you will need Xcode. I don't do much with Xcode this is just required to get started.

Steps:

Install Xcode through the mac app

https://itunes.apple.com/us/app/xcode/id497799835?mt=12

2. Iterm2(MacOS)

Description:

Iterm2 is a replacement for the standard terminal in MacOS. Here is a list of all features that Iterm gives you over just a regular terminal.
https://www.iterm2.com/features.html

Steps:

Install Iterm2
https://www.iterm2.com/
Keep this open we'll come back and start entering some commands!

3. Homebrew(MacOs)

https://brew.sh/

Description:

Homebrew allows you to install packages through the terminal(Iterm2).

Steps:

1.) Install Homebrew

paste into Iterm2:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2.) confirm Homebrew installation worked

paste into Iterm2:
brew --version

should return something like

Homebrew 2.1.4
Homebrew/homebrew-core (git revision 59240; last commit 2019-05-31)
Homebrew/homebrew-cask (git revision a6dcf; last commit 2019-05-30)

4. Zsh(oh-my-zsh)(MacOs or Windows)

https://ohmyz.sh/

Description:

Zsh is a shell that has a lot of features that make our lives as programmers easier.

oh-my-zsh gives you the ability to install themes and plugins for the zsh shell!

Some of the most notable

Automatic cd: Just type the name of the directory
Spelling correction and approximate completion: If you make a minormistake typing a directory name, ZSH will fix it for you
Plugin and theme support: ZSH includes many different plugin frameworks

Full Feature list: https://github.com/hmml/awesome-zsh

Steps:

1.) Install zsh with Homebrew

paste into Iterm2:
brew install zsh zsh-completions

2.) Set Zsh as your default shell

paste into Iterm2:
this requires you to enter the password. It's going to be the same one you use to login to your computer.
chsh -s /bin/zsh

3.) Install Oh-my-zsh

paste into Iterm2:
sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

5. Visual Studio Code(MacOs or Windows)

Description:

Visual Studio code is a code editor. There are a lot of great options out there for code editors(Atom, brackets, Sublime etc.) All these are great choices but I am going to stick with VS code for this tutorial.

Steps:

1.) install vs code
https://code.visualstudio.com/Download

review

After following these steps you should have:

Xcode installed which sets your computer for a development environment
Iterm installed which gives you a better terminal than the mac default
Homebrew installed which makes it easy to install packages across the web
Zsh(oh-my-zsh) installed which makes your terminal super user friendly and pretty
Vs code installed which gives you the ability to edit your code in a very intuitive way.

I hope this helped anyone struggling like I was when first getting into programming. In part 2 I will show how I am actually using these tools in the real world.

Disclaimer

Please let me know if you are having any issues. A development environment can be tricky to set up sometimes. Also please correct any mistakes I have made. Thanks :)

Quickly Alias Git Commands

Isaac Weber — Thu, 16 May 2019 15:35:26 +0000

Typing Git commands over and over can get real tedious. Let's make it easier!

Run this command in your shell with your own alias name and the corresponding git command

git config --global alias.{alias-name} {git command}

Examples:

git config --global alias.show-remote 'remote show origin'

command is now git show-remote

instead of:
git remote show origin

You can even combine commands!

git config --global alias.add-commit '!git add -A && git commit'

command is now git add-commit -m 'My commit message'

instead of:
git add .git commit -m 'my commit message'`

Aliases can save you a lot of time! I'm always misspelling git commands but with aliases that is a thing of the past.

To see all your aliases run this command:

nano ~/.gitconfig

Near the bottom you'll see something like this

Disclaimer

With great power comes great responsibility. Use this command wisely! Make sure you know exactly what the command is doing before you alias or combine them.

Thanks 😁