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.