25 March 2020

Simple blank "Hello, World!" setup combining Gin (golang) + React + Webpack. Create files with these codes, download dependencies and run.

app/src/index.jsx

Source code viewer
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3.  
  4. ReactDOM.render(
  5.   <div>browse-tutorials.com</div>,
  6.   document.getElementById('app')
  7. );
Programming Language: ECMAScript

app/.babelrc

Source code viewer
  1. {
  2.   "presets": ["@babel/preset-env", "@babel/preset-react"]
  3. }
Programming Language: Javascript

app/package.json

Source code viewer
  1. {
  2.   "name": "app",
  3.   "scripts": {
  4.     "watch": "node_modules/webpack/bin/webpack.js --mode development --watch",
  5.     "build": "node_modules/webpack/bin/webpack.js --mode production"
  6.   },
  7.   "dependencies": {
  8.     "react": "^16.13.1",
  9.     "react-dom": "^16.13.1"
  10.   },
  11.   "devDependencies": {
  12.     "@babel/core": "^7.9.0",
  13.     "@babel/preset-env": "^7.9.0",
  14.     "@babel/preset-react": "^7.9.4",
  15.     "babel-loader": "^8.1.0",
  16.     "webpack": "^4.42.1",
  17.     "webpack-cli": "^3.3.11"
  18.   }
  19. }
  20.  
Programming Language: Javascript

app/webpack.config.js

Source code viewer
  1. const path = require('path');
  2.  
  3. module.exports = {
  4.   module: {
  5.     rules: [
  6.       {
  7.         test: /\.jsx?$/,
  8.         exclude: /node_modules/,
  9.         use: ['babel-loader']
  10.       }
  11.     ]
  12.   },
  13.   resolve: {
  14.     extensions: ['.js', '.jsx']
  15.   },
  16.   output: {
  17.     path: path.resolve(__dirname, '../static'),
  18.     publicPath: '/',
  19.     filename: 'bundle.js'
  20.   },
  21.   entry: {
  22.     bundle: './src/index.jsx'
  23.   }
  24. };
Programming Language: ECMAScript

main.go

Source code viewer
  1. package main
  2.  
  3. import (
  4. 	"net/http"
  5.  
  6. 	"github.com/gin-gonic/contrib/static"
  7. 	"github.com/gin-gonic/gin"
  8. )
  9.  
  10. func main() {
  11. 	// Init router
  12. 	router := gin.Default()
  13.  
  14. 	// Serve frontend static files
  15. 	router.Use(static.Serve("/", static.LocalFile("./static", true)))
  16.  
  17. 	// Setup route group for the API
  18. 	api := router.Group("/api")
  19. 	{
  20. 		api.GET("/", func(c *gin.Context) {
  21. 			c.JSON(http.StatusOK, gin.H{
  22. 				"message": "pong",
  23. 			})
  24. 		})
  25. 	}
  26.  
  27. 	// Start and run the server
  28. 	router.Run(":3000")
  29. }
Programming Language: Go
Run npm install and build from app directory. Use "go run main.go" to compile backend and start the webserver. This is a simple "Hello, World!" setup. A good starting point.