Go is a powerful and efficient programming language that is well-suited for web development. It has a clean syntax, strong typing, and built-in concurrency support, making it a popular choice for building high-performance web applications. In this article, we will walk you through creating a simple web application using Go, HTML, CSS, and JavaScript. We recommend that you learn Go Modules, Go Unit Test, Go Goroutines, Go Embed first before learning this course.
Before we begin, you will need to have Go installed on your computer. You can download and install Go from the official website at https://golang.org/dl/. Once you have Go installed, you can open your terminal or command prompt and create a new directory for your project:
mkdir my-web-app
cd my-web-appNext, you will create a new Go file called main.go:
touch main.goOpen the main.go file in your preferred text editor and add the following code:
package main
import (
"fmt"
"net/http"
)
func main() {
http.HandleFunc("/", handler)
http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))
http.ListenAndServe(":8080", nil)
}
func handler(w http.ResponseWriter, r *http.Request) {
http.ServeFile(w, r, "templates/index.html")
}This code defines a simple web server that listens for HTTP requests on port 8080. The handler function serves the HTML file located in the templates directory. The server also serves static files located in the static directory.
Next, you will create the templates and static directories:
mkdir templates
mkdir staticIn the templates directory, create a new file called index.html:
touch templates/index.htmlOpen the index.html file in your preferred text editor and add the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>My Web App</title>
<link rel="stylesheet" type="text/css" href="/static/style.css">
<script type="text/javascript" src="/static/script.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>This code defines a simple HTML page that includes a stylesheet and a JavaScript file located in the static directory.
In the static directory, create two new files called style.css and script.js:
touch static/style.css
touch static/script.jsOpen the style.css file in your preferred text editor and add the following CSS code:
h1 {
color: blue;
font-size: 48px;
text-align: center;
}This code defines a style for the h1 element in the HTML file.
Open the script.js file in your preferred text editor and add the following JavaScript code:
alert("Hello, World!");This code defines a simple JavaScript function that displays an alert box with the message "Hello, World!".
Save all the files and return to your terminal. Run the following command to build the executable file:
go buildThis will create an executable file named my-web-app. You can now run the web application by running the following command:
./my-web-appOpen your web browser and go to http://localhost:8080/. You should see the message "Hello, World!" displayed on the screen with blue color, and an alert box should appear with the message "Hello, World!".
Congratulations! You have just created a basic web application using Go, HTML, CSS, and JavaScript, and successfully ran it on your local machine. From here, you can continue to explore the capabilities of Go and create more complex web applications.
0 Comments