Generate a Web project with Go in React/Angular/Vue and MongoDB in seconds.
Published: 2020-03-08 16:34:01


## Overview

It's always have been a pain point when we start with new applications from scratch with golang as a primary language.

Today, I came across an interesting go library to generate scaffold application with golang having MongoDB as backend. You can use any frontend framework (Angular, React or Vue)

Goxygen aims at saving your time while setting up a new project. It creates a skeleton of an application with all configuration done for you. You can start implementing your business logic straight away. Goxygen generates back end Go code, connects it with front end components, provides a Dockerfile for the application and creates docker-compose files for convenient run in development and production environments.

##### Golang

[Go](https://golang.org) is an open-source programming language that makes it easy to build simple, reliable, and efficient software.

The Go programming language is an open-source project to make programmers more productive. Go is expressive, concise, clean, and efficient. Its concurrency mechanisms make it easy to write programs that get the most out of multicore and networked machines, while it's novel type system enables flexible and modular program construction. Go compiles quickly to machine code yet has the convenience of garbage collection and the power of run-time reflection. It's a fast, statically typed, compiled language that feels like a dynamically typed, interpreted language.

#### MongoDB

[MongoDB](https://www.mongodb.com) is a general-purpose, document-based, distributed database built for modern application developers and for the cloud era. No database makes you more productive.

##### React

[React](https://angular.io/docs) makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.

##### Angular

[Angular](https://www.mongodb.com) is an app-design framework and development platform for creating efficient and sophisticated single-page apps.

### How to use

You need to have Go 1.11 or newer on your machine.

    go get -u github.com/shpota/goxygen
    go run github.com/shpota/goxygen init my-app

This generates a project in `my-app` folder. By default, a React-based project is generated. You can choose from Angular, React and Vue by passing `angular`, `react` and `vue` to the --frontend flag. For example:

    go run github.com/shpota/goxygen init --frontend vue my-app

The generated project is ready to run with docker-compose:

    cd my-app
    docker-compose up

After the build is completed, the application is accessible on [http://localhost:8080](http://localhost:8080).

<figure class="wp-block-image">![Golang React App](https://res.cloudinary.com/zeshastyles/image/upload/f_auto/v1583680417/showcase.gif "Application with golang, react and MongoDB")</figure>

You can find more details on how to work with the generated project in its README file.

### Structure of a generated project (React-based app)

    my-app
    ├── server                   # Go project files
    │   ├── db                   # MongoDB communications
    │   ├── model                # domain objects
    │   ├── web                  # REST APIs, web server
    │   ├── server.go            # the starting point of the server
    │   └── go.mod               # server dependencies
    ├── webapp                    
    │   ├── public               # icons, static files, and index.html
    │   ├── src                       
    │   │   ├── App.js           # the main React component
    │   │   ├── App.css          # App component-specific styles
    │   │   ├── index.js         # the entry point of the application          
    │   │   └── index.css        # global styles
    │   ├── package.json         # front end dependencies
    │   ├── .env.development     # holds API endpoint for dev environment
    │   └── .env.production      # API endpoint for prod environment
    ├── Dockerfile               # builds back end and front end together
    ├── docker-compose.yml       # prod environment deployment descriptor
    ├── docker-compose-dev.yml   # runs local MongoDB for development needs
    ├── init-db.js               # creates a MongoDB collection with test data
    ├── .dockerignore            # specifies files ignored in Docker builds
    ├── .gitignore
    └── README.md                # guide on how to use the generated repo

Files such as unit tests or sample components are not included here for simplicity.

#### Dependencies

[Goxygen](https://github.com/Sonatrix/goxygen) generates a basic structure of a project and doesn't force you to use a specific set of tools. That's why it doesn't bring unneeded dependencies to your project. It uses only `mongo-go-driver` on the back end side and Axios in React and Vue projects. Angular projects use only Angular specific libraries.

For more interesting articles, you can visit [Myzigyasa](https://myzigyasa.com)