title: How Can I Link back end Go server to front end ReactJS?
body: <p>How can I enter an input in my App.js file and retrieve is in the go backend server using the FormValue() function?  I don't want to send the values as a JSON object.  The endpoint the form should post to is the PostForm function in Server.go.</p>
  
  <p>The go server should be able to serve the bundled react files without separately sending the input in react to a separate go server and then getting the information back.</p>
  
  <p>Errors:
  Currently, when I enter something into the input form, the browser goes to "Cannot POST /api/postform"</p>
  
  <p>Thanks!</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
    &lt;title&gt;React Starter&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
    &lt;noscript&gt;
      You need to enable JavaScript to run this app.
    &lt;/noscript&gt;
    &lt;script src="../dist/bundle.js"&gt;&lt;/script&gt; &lt;!--references the react app --&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>import React, { Component} from "react";
  
  class App extends Component{
  
      constructor() {
          super();
          this.state = {
              query: '',
          }
          this.handleChange = this.handleChange.bind(this);
      }
  
      handleChange(event) {
          this.setState({
              query: event.target.value
          });
      }
  
      render() {
          return(
            &lt;div className="App"&gt;
              &lt;h1&gt; Hello, World! &lt;/h1&gt;
              &lt;form action="/api/postform" method="POST"&gt;
              &lt;input type="text" name="query" onChange={this.handleChange} /&gt;
              &lt;input type="submit" value="Submit" /&gt;
              &lt;/form&gt;
  
            &lt;/div&gt;
          );
      }
  
  }
  
  export default App;
  
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>const path = require("path");
  const webpack = require("webpack");
  
  module.exports = {
    entry: "./src/index.js",
    mode: "development",
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /(node_modules|bower_components)/,
          loader: "babel-loader",
          options: { presets: ["@babel/env"] }
        },
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"]
        }
      ]
    },
    resolve: { extensions: ["*", ".js", ".jsx"] },
    output: {
      path: path.resolve(__dirname, "dist/"),
      publicPath: "/dist/",
      filename: "bundle.js"
    },
    devServer: {
      contentBase: path.join(__dirname, "/"),
      port: 3000,
      publicPath: "http://localhost:3000/dist/",
      hotOnly: true
    },
    plugins: [new webpack.HotModuleReplacementPlugin()]
  };
  </code></pre>
  
  <p>server.go</p>
  
  <pre><code>package main
  
  import (
    "net/http"
  
    "github.com/gin-gonic/contrib/static"
    "github.com/gin-gonic/gin"
    "fmt"
  )
  
  
  func main() {
    // Set the router as the default one shipped with Gin
    router := gin.Default()
  
    router.Use(static.Serve("/", static.LocalFile("./index.html", true)))
  
    // Setup route group for the API
    api := router.Group("/api")
    {
      api.GET("/", func(c *gin.Context) {
        c.JSON(http.StatusOK, gin.H {
          "message": "pong",
        })
      })
    }
  
    // input form should hit this function when it posts
    api.POST("/postform", PostForm)
    router.Run(":5000")
  }
  
  // should be able to retrieve the value netered into the form and print it out.
  func PostForm(c *gin.Context) {
    c.Header("Content-Type", "application/json")
    q := c.Request.FormValue("query")
    fmt.Println("VALUE IS: ", q)
  
  }
  </code></pre>