Deploy your app - bommezijn/Dating-Shreks GitHub Wiki

This topic was worked on by Parvin.

Deploy Your App

Let's talk about deploying. Deploying is basically the last step in your coding process. First, you start with coding. Here there will be a lot of errors that you can test with your localhost. Your localhost is a place where you can test your app to see if it will work in the 'real world'. The 'real world' is accessed through deploying your app, which means: putting it on the internet for everyone to see. In this topic, I will go through several ways you can deploy your app, which one I chose & how to deploy it.

Which ways can you deploy your app

To deploy an app you will need a server on which it can run on. There are a lot of ways to deploy your app but since I am also using back-end in my app, all the easy ways are gone. If you are not using back-end in your code, you should consider the following ways to deploy them:

If you are using back-end, like me, then you should look for other alternatives that are a little bit harder than just filling out some things online. But don't worry. I will help you through with it so you too can deploy your app. First, let's compare some ways to deploy your app. For this, I will compare Digital Ocean & Heroku

Digital Ocean

49aa0a09-06d2-4bba-ad20-4bcbe56ac507_logo

Digital Ocean is a developer cloud where somewhere hardcore developers (in my eyes) come. It is a nice tool for deploying your app. But it's somewhat difficult. You will certainly have to follow some tutorials if you want to correctly install it and know what you are doing. It uses PaaS which means that you will have to do a lot on your own. The Operating System + Middleware + Runtime are thing you will have to do by hand.

Advantages
  • Affordable pricing for many ranges
  • The user interface is simple and aesthetic
  • It has a fast server
  • It has a lot of servers
Disadvantages
  • Harder to use
  • Nothing = free

Heroku

ewasdf

Heroku is a more easy to use cloud service. Which works with IaaS, which is basically way easier than PaaS. With IaaS you don't have to worry about infrastructure and that kind of stuff, Heroku will do it for you. It is also very easy to set up since I went through that process. You can easily link it with Github which is very nice too. Only, to use every feature (for example: MongoDB), you will need add-ons where you could also be paying money for.

Advantages
  • Github Link
  • Easy & Fast
  • Works great with Github
Disadvantages
  • It's costs are higher
  • Add-ons

My Choice: Digital Ocean 🎊 🎊

Even though Heroku is easier I wanted to go for the challenge and since I had found some good toturials on Digital Ocean I thought I could handle it (I could). But this wasn't the only reason I went with Digital Ocean. Also because Heroku works with add-ons and when I tried it I got very frustrated. This was because I had to fill in my Credit Card to use a free add-on?? Well... that was just weird and since a friend of mine offered me a free server on his account I couldn't say no.

How to fully install Digital Ocean (pay attention because this could be tricky)

  1. Create an account on Digital Ocean
  2. Create a new droplet within your account
  3. For Distribution, server choose: CentOS
  4. Choose the size of the server that you desire (πŸ’‘tip: for small server choose the one of $5/$10)
  5. Choose the server which is closes to your location or the location where most users will use your app
  6. Add your public SSH key (if you don't know where to find it or what it is. No problem, just click here)
  7. Choose a hostname that you like
  8. For the following steps, open your terminal.
  9. Now to connect to the server type in the following:
ssh root@IPADRESS_OF_YOUR_SERVER

9.1 You will get a question, answer with yes 10. Now you'll need to update all the packages. To do so, enter the following (this might take a while)

yum -y update
  1. We will need node for this all to work so type in the following:
curl -sL https://rpm.nodesource.com/setup_14.x | bash -
  1. After this is installed, enter the following:
yum install -y nodejs
  1. Now that we have installes node & npm. Run the following command:
npm install -g pm2 http-server
  1. Now open a new window in your Terminal and go to the map where your stored your app in. Once your are there, type the following command to download the files and put them in a zip:
tar czf NAME_OF_YOUR_MAP.tar.gz ENTER_THE_FILES_NEEDED_FOR_YOUR_APP_TO_RUN

some explanation with the code: at ENTER_THE_FILES_NEEDED_FOR_YOUR_APP_TO_RUN you will need to enter file names of the files you need. For example: index.js package.json views/ 15. Now you will need to copy this file to your server. To do so, enter the following:

scp NAME_OF_YOUR_MAP.tar.gz root@ IPADRESS_OF_YOUR_SERVER:~
  1. Now go back to where the server is still running and type the following, to see if your files were converted succesfully:
ls
  1. Now we should make a map and in there extract the files using this code:
mkdir NEW_MAP_NAME
tar xf NAME_OF_YOUR_MAP.tar.gz -C NEW_MAP_NAME
  1. Now go to that folder using this code;
cd NEW_MAP_NAME
  1. Now you can start your server!!!! Enter the following code inside the NEW_MAP_NAME where all your files are:
npm start
  1. To go to your site enter the following in your browser:
IPADRESS_OF_YOUR_SERVER:port

πŸ’‘ note: If you are using sessions you will need to manually add the thing in your .env to the .env in the server. To do so, follow this toturial

Sources

Cloud Application Platform | Heroku. (2020, 18 juni). Geraadpleegd op 17 juni 2020, van https://www.heroku.com

DigitalOcean – The developer cloud. (z.d.). Geraadpleegd op 17 juni 2020, van https://www.digitalocean.com/

DigitalOcean vs Heroku | Which is better? (2020, 15 juni). Geraadpleegd op 17 juni 2020, van https://blog.back4app.com/digitalocean-vs-heroku/

Github Pages. (2007 oktober). Geraadpleegd op 17 juni 2020, van https://pages.github.com

Juriy Bura. (2017, 15 maart). Deploying Node: DigitalOcean Setup. Geraadpleegd op 15 juni 2020, van https://www.youtube.com/watch?v=1OU5ngq-WyM&list=PLQlWzK5tU-gDyxC1JTpyC2avvJlt3hrIh&index=1

Juriy Bura. (2017, 15 maart). Deploying Node.js App With PM2. Geraadpleegd op 17 juni 2020, van https://www.youtube.com/watch?v=RF6Dzwwpduo&list=PLQlWzK5tU-gDyxC1JTpyC2avvJlt3hrIh&index=4

Juriy Bura. (2017, 15 maart). Installing Node.js, PM2 and Yarn on CentOS. Geraadpleegd op 14 juni 2020, van https://www.youtube.com/watch?v=XCgCjasqEFo&list=PLQlWzK5tU-gDyxC1JTpyC2avvJlt3hrIh&index=2

Localhost Definition. (z.d.). Geraadpleegd op 17 juni 2020, van https://techterms.com/definition/localhost

Meade, C. (2020, 19 februari). 4 Easy Ways to Deploy Your Website or App. Geraadpleegd op 17 juni 2020, van https://www.shopify.com/partners/blog/deploy-website

So You Want to Deploy Your Web App - a Goal Oriented Introduction. (2017, 13 juli). Geraadpleegd op 17 juni 2020, van https://vsupalov.com/deployment-intro/

Testing and Deploying your Application. (z.d.). Geraadpleegd op 17 juni 2020, van https://cloud.google.com/appengine/docs/flexible/go/testing-and-deploying-your-app