17
Apr

Deploy your Web Applications to the Cloud Right Away! Here is how you can!

The Cloud isn’t cool anymore! Everyone here uses it! Over hyped or not cloud has deeply changed how we build and run the software. With the much more changes happening in the world of Cloud, here is what you need to know about web applications and how to deploy them in the cloud.

In this tutorial, we have given step by step guide along with the code for a quick and simple flow path.

Let’s discuss them in detail!

So what is HTTP?

HTTP (Hyper Text Transfer Protocol) is the vital factor for a website. The Internet makes use of this the servers and computers for interaction.

When we type the name of a website in a browser and hit enter, it automatically turns into an HTTP server.

This happens once you hit enter, the HTTP request is sent to the server.

What Does it Have to do with Flask?

Flask makes the process of designing simple for a web application. Moreover, Flask focuses on what users are requesting and what sort of responses need to be given back.

Flask being a Python Micro framework can run the basic web applications as well.

from flask import Flask  //importing a flask
app = Flask(__name__)  //__name__ represents current file of the web application
@app.route(“/”) //when the user visits the site and goes to default site this is activated
def home():
   return “Hello, World!”
if __name__ == “__main__”: //assigns the name when you run your python script
   app.run(debug=True) //helps to trace the errors

This is stored as main.py

Let’s run the file main.py

In your terminal or command prompt go to the folder which contains main.py file.

Type py main.py or python main.py

You can view the output similar to this on your screen

You need to take note when it says Running on http://127.0.0.1:5000/.

Where 127. 0.0.1. Represents your local computer. Go to the address and you can see

Now we shall add more routes to note the difference

from flask import Flask

app = Flask(__name__)

@app.route(“/”)

def home():

   return “Hello, World!”

@app.route(“/salvador”) //added a new route to salvador

def salvador():

   return “Hello, Salvador”

if __name__ == “__main__”:

   app.run(debug=True)

When you again run the page, go to http://localhost:5000/salvador. You canview the one similar to this image:

Now we shall add HTML and CSS to make our website more attractive!

HTML, CSS and Virtual Environment

Here is a sample code to get started

<!DOCTYPE html>

<html lang=”en” dir=”ltr”>

 <head>

   <meta charset=”utf-8″>

   <title>Flask Tutorial</title>

 </head>

 <body>

   <h1> My First Try Using Flask </h1>

   <p> Flask is Fun </p>

 </body>

</html>

Moreover, the flask framework looks for the HTML files in the folder called ‘templates’. You need to put all your HTML files by creating this folder.

Make sure your main.py file is outside the folder!

Now we need to make changes in main.py so that we can view the HTML file we created.

from flask import Flask, render_template  //will render the template from the folder            

app = Flask(__name__)

@app.route(“/”)

def home():

   return render_template(“home.html”)  //returns to the HTML file

@app.route(“/salvador”)

def salvador():

   return “Hello, Salvador”

if __name__ == “__main__”:

   app.run(debug=True)

Adding CSS to our website

Similar to the folder created as ‘template’, you need to foldernamed‘static’.

Linking the CSS with our HTML file:

<!DOCTYPE html>

<html lang=”en” dir=”ltr”>

 <head>

   <meta charset=”utf-8″>

   <title>Flask Parent Template</title>

   <link rel=”stylesheet” href=”{{ url_for(‘static’,    filename=’css/template.css’) }}”>

</head>

 <body>

   <header>

     <div class=”container”>

       <h1 class=”logo”>First Web App</h1>

       <strong><nav>

         <ul class=”menu”>

           <li><a href=”{{ url_for(‘home’) }}”>Home</a></li>

           <li><a href=”{{ url_for(‘about’) }}”>About</a></li>

         </ul>

       </nav></strong>

     </div>

   </header>

{% block content %}

{% endblock %}

</body>

</html>

Making use of Flask and virtualenv

Now you would probably know about using Flask, to go ahead let us know about the usage of virtualenv.

Why use virtualenv?

You may make use of Python for your projects besides web development. Your projects might have various versions of Python installed, different dependencies and packages.

We make use of virtualenv to create an isolated environment for your Python project. This indicates that each project can have its own dependencies regardless of what dependencies every other project has.

Getting started with virtualenv

Initially, run this command on your Command Prompt or Terminal:

pip install virtualenv

The next thing is to:

virtualenv “name of the virtual environment”

Activating the virtual environment

Now operate your terminal or command prompt. Go to the directory which contains the file called activate. The file termed as activate is found inside a folder called Scripts for Windows and bin for OS X and Linux.

For OS X and Linux Environment:

$ name of virtual environmnet/bin/activate

For Windows Environment:

name of virtual environment\Scripts\activate

You should see this at the opening of your command prompt line:

The subsequent step is to install flask on your virtual environment so that we can run the application inside our environment. Run the command:

pip install flask

Run your application and go to http://localhost:5000/

We finally made our web application!

Now let’s deploy to the cloud!

Deploying the Application

To deploy the application to Google App Engine, use this command.

gcloud app deploy

This specifies what project you are deploying.

The command will look like this:

gcloud app deploy –project [ID of Project]

The Application

Now check the URL of your application.

The application gets stored in the following way:

“your project id”.appspot.com

Final Verdict

Now you develop your web applications with flask and deploy them in the cloud with these simple steps!

If you found this article useful, do share your thoughts in the comments section anytime!

Happy Reading 🙂

 

Comments

[bws_google_captcha]