🌐 Web App Guide

A web app template for integrating Next on the frontend and Go, gqlgen, and LangChain on the backend. This guide was created so that I could have a template for a quick web app scaffolding.

You can also check out my more in-depth tutorial to see how to integrate the Go + gqlgen logic with Next. Stay tuned for a tutorial discussing how to integrate the LangChain agent logic.

🏁 Getting started

Clone the repo and navigate there:

git clone https://github.com/anima-kit/web-app-guide.git
cd web-app-guide

Create .env file for LLM parameters:

cp ./frontend/.env.example ./frontend/.env

Build and run Docker containers:

docker compose up --build

Now the frontend should be running on http://localhost:3000 and the GraphQL backend on http://localhost:8080/. By default, this app uses a local LM Studio server to host LLMs which runs on http://locahost:1234.

🛠️ Build scaffold by hand

Below are some instructions for building the Next frontend and Go backend by hand. You can also see more details in the tutorial here.

First, create a space for your project.

mkdir web-app-guide
cd web-app-guide

Now that we have a place to house our web app, let's focus on setting up the frontend.

🖥️ Frontend

Using Next makes setting up a project ridiculously easy. With one command, we get all the necessary files for creating a basic frontend project.

1. Make sure npm and npx is installed.

   See installation instructions here (installs Node.js with automatic npm install).

2. Create your Next project:

   npx create-next-app@latest frontend --yes
   

   This will create a Next app (in ./frontend) that uses Typescript for the source code, ESLint for linting, Tailwind CSS for easy component customization, the App Router for navigation, and Turbopack as the bundler.

3. Serve your app locally to start playing around!

   npm run dev
   

   This will serve your app at http://localhost:3000 by default.

And that's it, your frontend scaffold is now set up! If everything worked correctly, you can navigate to http://localhost:3000 (after following step 3). ✨

🛠️ Backend

In this guide, we're going to set up a backend using Go + gqlgen. My backend choice was mostly due to the fact that I wanted to learn Go and GraphQL (using gqlgen), and I found them to be pretty simple to learn and start playing around with (see A Tour of Go and GraphQL's Playground).

1. Make sure Go is installed.

   See installation instructions here.

2. Create your backend directory and navigate there:

   mkdir backend
   cd backend
   

3. Create your Go project:

   go mod init github.com/<your-github-handle>/<your-project-name>
   

   This will create a Go project that you can use both locally and through your remote Github repo.

   For example, I created the backend for this guide with: go mod init github.com/anima-kit/web-app-guide

4. Install gqlgen:

   go get -tool github.com/99designs/gqlgen
   

5. Create the gqlgen scaffold:

   go tool gqlgen init
   

6. Run the gqlgen server locally:

   go run ./server.go
   

   This will host the GraphQL Playground on http://localhost:8080/ by default.

And that's it, your backend scaffold is now set up! If everything worked correctly, you can navigate to http://localhost:8080/ (after following step 6). ✨

🚀 Next Steps

This guide shows how to set up a basic scaffold, but there's still much to learn, like deployment, setting up CI/CD, connecting the backend and frontend logic, testing, formatting, linting. Check out the full tutorial to see:

• How to create your own gqlgen schemas and generate the necessary Go code.
• How to create Next components to interact with your Go backend.
• How to set up Docker deployment.
• How to set up a simple CI script.
• How to add formatting and linting.

I may also add some tutorials for setting up persistence with Postgres and adding LLM logic if time permits.

⚙️ Tech

Thanks to all the projects that make this possible:

• Apollo: Client library for GraphQL management in Next
• ESLint: Frontend linting
• Go: Backend logic
• Go CORS: Connecting backend & frontend logic safely
• golangci-lint: Backend formatting and linting
• gqlgen: GraphQL on the backend
• GraphQL: Query logic APIs
• LangChain: Agent functionality
• LM Studio: Local hosting of LLM server
• Next: Frontend logic
• Prettier: Frontend formatting
• Tailwind: CSS customization

🔗 Contributing

This project is a work in progress. If you'd like to suggest or add improvements, clarify your confusion, help others understand, or share your own relevant projects, feel free to contribute through discussions. Check out the contributing guidelines to get started.

📑 License

This project is licensed under MIT.