Prepare the web application code

Completed

In this unit, you learn how to create the code for your web application and integrate it into a source-control repository.

Bootstrap a web application

Now that you created the resources for deploying your web application, you have to prepare the code you want to deploy. There are many ways to bootstrap a new web application, so what we learn here might be different to what you're used to. The goal is to quickly provide you a starting point to complete a full cycle up to the deployment.

Note

All the code and commands shown on this page are only for explanation purposes; you do not need to execute any of them. We use them in a subsequent exercise.

The dotnet command-line tool that's part of the .NET SDK allows you to directly create the code for a new web application. In particular, you can use the dotnet new command to generate a new application from a template:

dotnet new mvc --name <YourAppName>

This command creates a new ASP.NET Core Model-View Cotroller (MVC) application in a new folder with the specified name.

To quickly create a starter web application, you can use the Maven (mvn) command-line tool commonly used in the Java ecosystem. In particular, Maven includes a feature called archetypes that can quickly create starter code for different kinds of applications using templates. You can use the maven-archetype-webapp template to generate the code for a simple web app that displays "Hello World!" on its homepage.

mvn archetype:generate -DgroupId=example.webapp -DartifactId=helloworld -DinteractiveMode=false -DarchetypeArtifactId=maven-archetype-webapp -DarchetypeVersion=1.5

This command creates a helloworld folder that contains the source code for your application.

You can use the Node Package Manager (npm) command-line tool that comes bundled with Node.js to create a new application. The init command creates a new package.json required for your application:

npm init -y

If you open the package.json file that was created on the current folder, you can add a start entry to the scripts section to describe how your web application should run:

...
  "scripts": {
    "start": "node index.js"
  },
...

After you do that, you can write the actual code of your web application in a new index.js file:

const http = require('http');
const port = process.env.PORT || 3000;

http.createServer(function(request, response) {
  response.writeHead(200, { 'Content-Type': 'text/plain' });
  response.end('Hello World!');
}).listen(port);

console.log(`Server running at http://localhost:${port}`);

This example code creates a server that listens on port 3000 of your computer and answers every request with a "Hello World!" message.

To create a new web application starter using a few lines of code, you can use Flask, which is a commonly used web-application framework. You can install Flask using the following command:

pip install flask

After Flask is available in your environment, you can create a minimal web application using this code:

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!\n"

This example code creates a server that answers every request with a "Hello World!" message.

Adding your code to source control

After your web application code is ready, the next step is usually to put the code into a source-control repository such as Git. If you have Git installed on your machine, running these commands in your source-code folder initializes the repository.

git init
git add .
git commit -m "Initial commit"

These commands allow you to initialize a local Git repository and create a first commit with your code. You immediately gain the benefit of keeping a history of your changes with commits. Later on, you're able to synchronize your local repository with a remote repository; for example, hosted on GitHub. This synchronization allows you to set up continuous integration and continuous deployment (CI/CD). While we recommend using a source-control repository for production applications, it's not a requirement to be able to deploy an application to Azure App Service.

Note

Using CI/CD enables more frequent code deployment in a reliable manner by automating builds, tests, and deployments for every code change. It enables delivering new features and bug fixes for your application faster and more effectively.