The system cannot find the path specified

To serve your React frontend from Go, you may do something like this. First, build your React app:

cd /path/to/your/app/ && npm run build

That’ll create this structure under /path/to/your/app/:

build/
  static/
    css/
      main.css
    js/
      main.js

You could move it under the Go project:

mv /path/to/your/app/build/* /path/to/your/go/application/static

So now you just serve those files from Go. For example, you may use go-bindata to embed your file (check https://github.com/elazarl/go-bindata-assetfs) and then serve them like this


r.PathPrefix("/").Handler(http.FileServer(&assetfs.AssetFS{
	Asset:     static.Asset,
	AssetDir:  static.AssetDir,
	AssetInfo: static.AssetInfo,
	Prefix:    "",
}))

this is my personalDetails.go

    package main
    import (
    "database/sql"
    "html/template"
    "log"
    "net/http"
    _ "github.com/go-sql-driver/mysql"

    )
    var db *sql.DB
    var err error
    var tpl *template.Template
    func init() {
    // repoFrontend := "src/*.js"
    // http.Handle("/static/", http.StripPrefix("/static/",
    // http.FileServer(http.Dir(repoFrontend))))
    db, err = sql.Open("mysql", "root:root@/hrms")
    _, err := template.ParseGlob("src/app/*.js")
    if err != nil {
    log.Fatal("Error loading templates:" + err.Error())
    }
    //tpl = template.New("").ParseFiles("src/*")
    }
    func userForm(w http.ResponseWriter, req *http.Request) {
    err = tpl.ExecuteTemplate(w, "PersonalDetails.js", nil)
    if err != nil {
    http.Error(w, err.Error(), http.StatusInternalServerError)
    return
    }
    }
    func personalDetails(res http.ResponseWriter, req *http.Request) {
    if req.Method == http.MethodPost {
    fname := req.FormValue("fathersname")
    dob := req.FormValue("dob")
    gender := req.FormValue("gender")
    phone := req.FormValue("phone")
    addr := req.FormValue("add")
    nation := req.FormValue("nationality")
    status := req.FormValue("status")
    contactname := req.FormValue("contactname")
    emercontact := req.FormValue("emergencyphone")
    relationship := req.FormValue("relationship")
    email := req.FormValue("email")
    _, err = db.Exec(
    "INSERT INTO personal_details (fathersname, dob, gender, permanentaddress,nationality,maritalstatus,emergencycontactname,emergencyphone,relationship,email) VALUES (?, ?, ?, ?)",
    fname,
    dob,
    gender,
    phone,
    addr,
    nation,
    status,
    contactname,
    emercontact,
    relationship,
    email,
    )
    if err != nil {
    http.Error(res, err.Error(), http.StatusInternalServerError)
    return
    }
    http.Redirect(res, req, "/", http.StatusSeeOther)
    return
    }
    http.Error(res, "Method Not Supported", http.StatusMethodNotAllowed)
    }
    func signupPage(res http.ResponseWriter, req *http.Request) {
    if req.Method != "POST" {
    http.ServeFile(res, req, "signup.html")
    return
    }
    username := req.FormValue("username")
    password := req.FormValue("password")
    var user string
    err := db.QueryRow("SELECT username FROM users WHERE username=?", username).Scan(&user)
    switch {
    case err == sql.ErrNoRows:
    hashedPassword, err := bcrypt.GenerateFromPassword([]byte(password), bcrypt.DefaultCost)
    if err != nil {
    http.Error(res, "Server error, unable to create your account.", 500)
    return
    }
    _, err = db.Exec("INSERT INTO users(username, password) VALUES(?, ?)", username, hashedPassword)
    if err != nil {
    http.Error(res, "Server error, unable to create your account.", 500)
    return
    }
    res.Write([]byte("User created!"))
    return
    case err != nil:
    http.Error(res, "Server error, unable to create your account.", 500)
    return
    default:
    http.Redirect(res, req, "/", 301)
    }
    }
    func homePage(res http.ResponseWriter, req *http.Request) {
    http.ServeFile(res, req, "index.js")
    }
    func main() {
    defer db.Close()
    err = db.Ping()
    if err != nil {
    panic(err.Error())
    }

    http.HandleFunc("/personalDetails", personalDetails)
    http.HandleFunc("/Home", homePage)
    http.ListenAndServe(":8080", nil)
    }

this is my PersonalDetails.js

    import React from "react";
    import { Button, Form, FormGroup, Label, Input, FormText,Row,Col } from 'reactstrap';
    import {DatePicker,TextField,Slider} from 'material-ui';
    import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
    import Icon from 'react-icons-kit';
    import { plus,arrowRight2 } from 'react-icons-kit/icomoon';
    import {Link} from "react-router-dom";
    import {displayContainer,floatRight,arrowIcon,hrStyle,pageHeading,orange} from "../Layout.css";
    import {inputstyle,formStyle,skipstyle,inputstyletextarea,
    labelStyle1,hyperLinkEmployee,slideremp,sliderline,sliderlineorange,slidertext} from "./LayoutEmployee.css";
    import {Header} from "../Header";
    import {Footer} from "../Footer";
    export class PersonalDetails extends React.Component{
    render() {
    return(
    <div>
    <Header/>
    <div className={displayContainer}>
    <p className={pageHeading}>Personal Details</p>
    <hr className={hrStyle}/>
    <Row>
    <Col xs="10">
    <Form className={formStyle} method="post" action="/personalDetails">
    <div class="form-row">
    <div class="col-md-5 mb-3">
    <label className={labelStyle1}>Fathers Name</label>
    <input type="text" class="form-control" name= "fathersname" id={inputstyle} placeholder="" required/>
    </div>
    <div class="col-md-5 mb-3" style={{marginRight:'3vw'}}>
    <label className={labelStyle1}>DOB</label>
    <input type="text" class="form-control" name="dob" id={inputstyle} placeholder="" />
    </div>
    </div>
    <div class="form-row">
    <div class="col-md-5 mb-3">
    <label className={labelStyle1}>Gender</label>
    <input type="text" class="form-control" name="gender"id={inputstyle} placeholder="" />
    </div>
    <div class="col-md-5 mb-3">
    <label className={labelStyle1}>Phone</label>
    <input type="text" class="form-control" name="phone"id={inputstyle} placeholder="" />
    </div>
    </div>
    <div class="form-group">
    <label className={labelStyle1}>Permannet Address</label>
    <textarea class="form-control" id={inputstyletextarea} name="add"rows="3"></textarea>
    </div>
    <div class="form-row">
    <div class="col-md-5 mb-3">
    <label className={labelStyle1}>Nationality</label>
    <input type="text" class="form-control" name="nationality" id={inputstyle} placeholder=""/>
    </div>
    <div class="col-md-5 mb-3">
    <label className={labelStyle1}>Marital Status</label>
    <input type="text" class="form-control" name="status" id={inputstyle} placeholder="" />
    </div>
    </div>
    </Form>
    <p className={pageHeading}>Emergency Contact Details</p>
    <Form className={formStyle} method="post" action="/personalDetails">
    <div class="form-row">
    <div class="col-md-5 mb-3">
    <label className={labelStyle1}>Contact Person Name</label>
    <input type="text" class="form-control" name="contactname" id={inputstyle} placeholder=""/>
    </div>
    <div class="col-md-5 mb-3">
    <label className={labelStyle1}>Phone</label>
    <input type="text" class="form-control" name="emergencyphone"id={inputstyle} placeholder="" />
    </div>
    </div>
    <div class="form-row">
    <div class="col-md-5 mb-3">
    <label className={labelStyle1}>Relationship</label>
    <input type="text" class="form-control" name="relationship"id={inputstyle} placeholder=""/>
    </div>
    <div class="col-md-5 mb-3">
    <label className={labelStyle1}>Email ID</label>
    <input type="text" class="form-control" name="email" id={inputstyle} placeholder="" />
    </div>
    </div>
    </Form>
    </Col>
    <Col xs="2"> <div style={{fontSize:'0.9vw',position:'relative',bottom:'-2.5vw'}} id={slidertext}>
    <p >
    <Link to="/PersonalDetails" className={orange} >
    Personal Details
    </Link></p>
    <p>
    <Link to="/ProfessionalDetails" className={hyperLinkEmployee}>
    Professional Details
    </Link>
    </p>
    <p><Link to="/BankDetails" className={hyperLinkEmployee}>
    Bank Details</Link></p>
    <p><Link to="/LoginInfo" className={hyperLinkEmployee}>Login Information</Link></p>
    <p><Link to="/JobHistory" className={hyperLinkEmployee}>Job History</Link></p>
    <p><Link to="/EmpDocs" className={hyperLinkEmployee}>Employee Documents</Link></p>
    </div>
    </Col>
    </Row>
    <Link to="/ProfessionalDetails" > <button type="submit" class="btn btn-outline-warning" >
    Save</button></Link>
    <Link to="/ProfessionalDetails" id={skipstyle}>Skip</Link>
    <span className={floatRight}>
    <Link to="/ProfessionalDetails" className={hyperLinkEmployee}>
    <button type="submit" class="btn btn-light">Next <Icon icon={arrowRight2} size={14} className={arrowIcon} /></button>
    </Link>
    </span>
    <div>
    </div>
    </div>
    <Footer/>
    </div>
    );
    }
    }

The front end works fine without running go

If i run go then it prompts me an error Error loading templates:html/template: pattern matches no files: src/app/*.js

Can you please edit your post and use proper annotation of code?

There are some ways to do so:

  1. Select your code and hit the </> button in the top-bar of the text-editor
  2. Indent your code by 4 spaces (this is what the button does)
  3. Begin you codeblock with at least 3 backticks (```) or 3 tilde (~~~) followed by a newline and end your code with the same number of the same characters followed by a newline.

1 and 2 will finally look like this:

    package main

    import "fmt"

    func main() {
    	fmt.Println("Hello, playground")
    }

Option 3 like this:

```
package main

import "fmt"

func main() {
	fmt.Println("Hello, playground")
}
```

It will make your post much easier to read and follow as nothing of the code will be mangled by the markdown formatter then. Some of your asterisks (*) are gulped by the markdown processor and understood as emphasis markers. Your doublequotes are also mangled by the markdown processor, from codewise straight quote (") to those we are used from prose texts (“”) which mark beginning and end of a citation.

There might be other code-pieces which are re-interpreted and mangled by the markdown processor.

Others already told you why that didn’t work.

There’s a number of ways in which you can make Go work with React. Personally, while developing I just npm start a development server for React, which proxies to my Go application for requests. For example, if I’m listening on port 8080 in my Go service, I’ll just add "proxy": "http://localhost:8080/" to package.json, run each separately and my web requests will be served by the Go backend.

On the other hand, in production I don’t want a React development server running, and I want to have one sole binary that I can easilly move, deploy and run as a service or whatever. That’s why I build the React project so it’ll package all css and js in a couple of minified files, then embed those at the Go end using go-bindata and serve them directly from Go. Building the Go project then will give you a nice self-contained binary with everything you need. That’s what my previous answer showed an example of.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.