vectyshortener

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 16 Open GitHub ↗

A basic link shortener with a frontend built with Vecty

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Link Shortener Build With Vecty and GopherJS

A basic link shortener with a frontend built with [Vecty](https://github.com/gopherjs/vecty).

# Running the Application

First, build and run the backend:

```console
$ make backend
```

Next, build the frontend:

```console
$ make frontend
```

After you're done with these two commands, you'll be able to go to [`localhost:8081`](http://localhost:8081) in your browser to see the app.

If you make any changes to the frontend, make sure to re-run `make frontend` and re-load the browser window. No need to re-run `make backend`.

If you make any changes to the backend (`main.go`) or any files in the `templates/` directory, make sure to re-run `make backend` and re-load the browser window. No need to re-run `make frontend`.

## The Layout of the Repository

### `main.go`

This file implements the backend server that serves up our app. It's main jobs are to (1) serve up the frontend code (2) serve a static HTML file that tells the browser to load the frontend code.

### `templates/`

This directory holds all of the HTML that we want to serve up from our backend server. Since our backend server just wants to serve one page, there's only one file in here.

If we wanted to expand the functionality of our site, we could add more files in here for the backend to serve.

### `public/`

This is where our backend server looks for static assets to serve up. We have three in our app:

- `main.css` - standard CSS for our application (we could use a CSS pre-processor to generate this file, if we wanted!)
- `wasm_exec.js` - a boilerplate javascript file that tells the browser how to load the frontend
- `frontend.wasm` - the frontend itself! This is generated by a command that we'll see below, so is not checked into the repository. Read on for how this works!

### `frontend/`

This directory is where 99% of all the action is! All the code in here builds a big WASM app that gets run in the browser. The WASM app is similar to a big Javascript bundle that you'd get if you build a React app with Webpack (& friends). The big difference is that WASM is low-level code, not Javascript, so the browser can execute it more efficiently.

In our case, we're using Go to write a [single page application](https://en.wikipedia.org/wiki/Single-page_application) (SPA), and then delivering that SPA to the browser in WASM format.

We'll be zooming in on the code in this directory in the rest of this article

>WASM is a new and fast growing technology. The technical details are stable, and WASM support has been in the major browsers for a few releases now. Its first primary use case is to improve performance in graphics intensive applications (check out what [Google Earth](https://web.dev/earth-webassembly/) is doing with it!), but more use cases are being discovered every day.

vectyshortener

Today's picks

Was this content helpful?

Recent Feedback

vectyshortener

Today's picks

Was this content helpful?

Recent Feedback

Download README