Getting Started with Web Design and Programming Course

Web Programming refers to the writing, markup, and coding involved in web development. Website scripts run in one of two places — the client side, usually called the front-end, or the server side usually called the back-end. The client of a website refers to the web browser that is viewing it, while the server of a website is the server that hosts it.

Scripting Languages used:

  • Client side: HTML, CSS, JavaScript
  • Server side: PHP, Ruby, Python

In the server side, we do need web hosting and domain registration. So, in order to process our website, we need to know how hosting and domains work. Internet address (IP Address) is a long series of numbers and that make no sense to humans for remembered every digit of the IP Address, so instead of typing xxx.xx.x.x to access a website, we can register a domain that will route to an IP Address. While Web Hosting is an account on a server that hosts our website files, in this course we will use herokuapp for free :D. If you want to host your website with the paid one, there are so many kind of domain that you can buy, for example you can buy it on NameCheap.com.

Get Started with Free Domain Name

You can also have yours in herokuapp to get a free hosting. I am going to break down the steps to get a free hosting from heroku.com

  1. The very first thing you need to do is create your Heroku account, an email and password needed here
  2. Then activate your account using email, after it your account will be ready to used
  3. Create a new app with ‘‘‘your-app-name.herokuapp.com’’’

Deployment

Application deployment is where a set of code (web, services, database, etc) is being installed onto a configured system by some type of process.

By using Heroku App, we can choose deployment method

  1. Heroku Git: Using Heroku CLI;
  2. GitHub: Connect to GitHub; and
  3. Container Registry: Use Heroku CLI.

Heroku CLI

Install the Heroku CLI in here (choose MacOS/Windows/Ubuntu as you need), so that we can deploy our apps from the command lines. Because we used Python, Heroku provides us an article to learn about the deployment process https://devcenter.heroku.com/articles/getting-started-with-python.

  1. Prepare the app, in this step we will prepare a simple application that can be deployed. To clone the sample application so that we can have a local version of the code then deploy to Heroku, we should execute in terminal:
$ git clone https://github.com/heroku/python-getting-started.git$ cd python-getting-started

2. Deploy the app

$ heroku create              //create app on heroku
$ git push heroku master //deploy our code
$ heroku ps:scale web=1 //ensure that the app is running
$ heroku open //visit the URL

3. Define a Procfile

Procfile is used to explicitly declare what command should be executed to start out app. The first step to do is: Install a web server within our app (Gunicorn)

$ pip install gunicorn

Add our apps requirements

“>” to write in requirements.txt

$ pip freeze > requirements.txt

Create a new file: “Procfile” then add to the Procfile, for our particular app:

$ web: gunicorn gettingstarted.wgsi --log file-

4. Declare app dependencies

The demo app deployed already has a requirements.txt which contain: django; gunicorn; django-heroku. When app is deployed, Heroku reads this file and install those dependencies using this command:

$ pip install -r requirements.txt

5. Push local changes

$ git add .                  //add modified file to the local repository
$ git commit -m "message" //commit the changes to the repository
$ git push origin master //deploy

In addition to make an auto deployment, we should set it by connect to our GitLab account.

Heroku App: Go to account settings and copy the API Key

Gitlab:

Our Gitlab Repository will host the code of our application and also the .gitlab-ci.yml

  1. Go to Settings > CI/CD > Variables
  2. Name the Key as and enter the API Key (as copied from Heroku App), App Name, and Heroku App URL

Key: HEROKU_APIKEY , Value: API Key

Key: HEROKU_APPNAME , Value: App Name

Key: HEROKU_APP_HOST , Value: App URL

3. Create a file .gitlab-ci.yml , this file used to push our code to Heroku using the API Key and we only push to the master branch. This file contain:

— Deployment Completed

p.s: I have just learned about web design and programming, I hope readers enjoy my writing :D Sorry if errors happened in this writing (include information or grammatical). If you have any additions or corrections to make, please reach me out by the comments below or email: leugenebrigita@yahoo.com, positive critics are accepted. Thank you!

— eugenebrigita

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store