Skip to content

Introduction

Ned Palacios edited this page Jan 20, 2021 · 9 revisions

What is VEX

VEX is an Easy-To-Use, Featured And Modular Web Framework Written on V.

Key Features

  • Fully Support for GET, POST, PUT, PATCH, DELETE, and OPTION HTTP methods.
  • Very Easy-To-Use
  • Route groups
  • Static File Server Support
  • Params and query parsing
  • Middleware support
  • Cookie parsing (Basic Support)
  • Websocket Server ( Soon )
  • Powerful Body parsing

It's design is inspired from the KISS (Keep It Simple, Stupid) it's Similar to Express.JS, Approach and is Consists of the Following SubModules:

name Purpose
server Used for creating and running a HTTP server.
router Handles the creation and handling of routes as well as the middleware system.
ctx Contains the type declarations for the request (Req) and response (Resp) structs as well as its related methods.
mime Used for identifying appropriate MIME data types based on the file format given. A fork of v-mime
html Used for declarative building of HTML views/user interface
utils Helper methods that are shared by the above SubModules but can be used in your own project as well.

Not all of the SubModules are needed for a typical Vex web project. The ctx and server SubModules are sufficient enough for you to get started.

Getting Started

A video version of this tutorial is available: https://youtu.be/U-MquC3OKtM

We are gonna be doing a simple Web site which greets the person based on the name provided. At the root of your project directory, create a file named vex.v. Afterwards, copy the following contents:

module main

import vex.server
import vex.router
import vex.ctx

fn main() {
   // Code goes here!
}

TIP: If you installed Vex as a global module, just replace vex. with nedpals.vex. instead.

Initializing the server

We cannot be able to access the greeter without initiating a new instance of the HTTP server. Below of the commented code inside the main function, type the following code.

// fn main() {
//    Code goes here!
      mut app := router.new()
// }

The new function found on the router SubModules allows us to create a new instance of the server struct and access its methods like creating routes.

Creating our first route

We have now initiated the server, now it's time to create our first route for this program. Below the existing code, add the following:

//  mut app := router.new()
app.route(.get, '/', fn (req &ctx.Req, res mut &ctx.Resp) {
    // route code goes here
})

The .get parameter allows us to create a GET route which we can use to access a specific resource inside the browser or an HTTP client. Inside the .get parameter, we need to specify the path for this route which is / and the specific function will be used to execute for this route.

We can now send whatever we want to this route. In this case, we need to send the words "Hello" and the name of the person specified by the user. Inside the route function, do the following:

app.route(.get, '/users/:name', fn (req &ctx.Req, res mut &ctx.Resp) {
   name := req.params['name']
   res.send('Hello, $name!', 200)
})

This will send the corresponding text with the response with a status code of 200 which is the equivalent of an OK response.

Getting the name data

Now you're wondering where do we get the contents of the name variable. Earlier we have created a route with the path of /users/:name and as you can see at the last part there is a "name" word prepended by a colon (:name). This is what we call a route parameter and it enables us to dynamically access and provide the data to the user based on a given value. To get the value of the specific parameter, just use req.params[<param key>]. In this case, /users/Joe will be routed to /users/:name and by calling req.params['name'], we can now obtain the name which is Joe.

Starting the server

Our simple greeter web site is done and we can now start the server by executing server.serve(app, 8000) below all the server code. Afterwards open your terminal pointing to your project directory and execute v run . to compile and automatically run the program. Once the program starts, the terminal should output Serving at port: 8000 and you will be able to access it through http://localhost:8000.

Code

module main

import vex.server
import vex.ctx
import vex.router

fn main() {
   mut app := router.new()
   app.route(.get, '/users/:name', fn (req &ctx.Req, res mut &ctx.Resp) {
     name := req.params['name']
     res.send('Hello, $name!', 200)
   })
   server.serve(app,8000)
}

In other 20 lines of code, we've been able to create a simple HTTP web site using Vex.