Unable to establish a connection to localhost at port 3000 within the web application

I'm currently working on setting up a VueJS frontend with a Go-powered backend using gorilla/mux as the router. So far, everything seems to be functioning well. I have a static HTML file served through Go and Vue components bundled with webpack (webpack-dev-server for now). However, an odd issue has arisen:

While my Vue components auto-refresh in the browser when saved, Firefox keeps displaying this message: 

Firefox can’t establish a connection to the server at http://localhost:3000/__webpack_hmr.

I've attempted changing the port for the Go server, but the connection always fails at 

http://localhost:<Go Server Port>/__webpack_hmr
.

Do you think I need to incorporate an Express server and use webpack-based Middleware to resolve this error? It feels counterintuitive to run two servers when I am utilizing Go for the backend. Am I overlooking something?

On the Go side of things, I've experimented with different ports for the servers, yet the connection issue persists at 

http://localhost:<Go Server Port>/__webpack_hmr
. Is this setup more complex than anticipated, or is it safe to disregard the error since everything else appears to be operating correctly?

javascriptgowebpackvue.jsmux

Answer №1

Get rid of the line 'webpack-hot-middleware/client' in your webpack settings and remove any instances of it in your codebase. This is specifically for hot reloading, so feel free to delete it.

If you require hot reloading, consider using: https://github.com/go-webpack/webpack

This package enables seamless integration with webpack, providing support for assets reloading during development and asset hashes for optimized production caching.

However, their examples only feature Gin and Iris, so you may need to reach out to them for guidance on implementing solely with net/http (if that's what you're working with).

Answer №2

It seems like your client and server are using different ports, which may be causing a CORS (Cross-Origin Resource Sharing) issue in your communication. Here are some helpful links that might assist you in resolving the CORS problem:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating bcryptjs alongside MongoDB

I am currently developing a feature to securely encrypt user passwords using Bcrypt for my Angular application, which is integrated with MongoDB for the backend operations. Here is the implemented code snippet: Data Model var mongoose = require('mo ...

javascriptangularjsmongodbencryptionbcrypt

The issue of underscorejs being undefined arises when trying to load it using both XMLHttpRequest and

I am attempting to dynamically load underscorejs using XMLHttpRequest and eval function function includeScriptSync(scriptUrl) { var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", scriptUrl, false); xmlhttp.onreadystatechange = function() ...

javascriptjqueryunderscore.js

How can I create a timed slideshow of images?

Is there a way to make a series of images slide automatically after closing or stopping a video? To see the specific website in question, click here: Upon visiting the site, a video pops up. How can I program the image slides to transition every 7 secon ...

javascriptcss

Attempting to retrieve JSON information based on a matching product attribute using PHP

I am currently working on integrating data from a json file into my Wordpress website. Specifically, I am trying to retrieve the price of a product by matching its name with the product attribute I have set in WordPress. However, when testing th ...

javascriptphpjsonwordpresswoocommerce

Creating a unique directive specifically designed to be used within an ng

I have a unique custom directive that I implemented in AngularJS. The directive is called within an ng-repeat loop, as shown below: The array of objects, selectedMealCalc.calculated_foods, is aliased as 'items' <!-- CUSTOM DIRECTIVE --&g ...

javascriptangularjsangularjs-directive

Selector that targets an attribute in the beginning of its value [name^=value]

When trying to match input fields by name, I encountered a challenge. The names consist of a base name plus square brackets, which the PHP interpreter converts into arrays. According to the jQuery API, the suggested selector is as follows: ":input[name^=f ...

javascriptjquery

A guide to displaying a PDF preview using React Dropzone

I am struggling to find a way to display previews of PDF files that I'm uploading using react-dropzone. Although PNG and JPG files are working correctly, I would like to be able to show the user either the actual PDF or an image representation of it. ...

javascriptreactjspdfdropzonereact-dropzone

Update elements dynamically using JSX

I have an array called data.info that gets updated over time, and my goal is to replace placeholder rendered elements with another set of elements. The default state of app.js is as follows: return ( <Fragment> {data.info.map((index) =&g ...

javascriptreactjsmaterial-uireact-hooksjsx

Capture individual frames from angular video footage

Trying to extract frames from a video using Angular has been quite challenging for me. While browsing through Stack Overflow, I came across this helpful post here. I attempted to implement the first solution suggested in the post, but unfortunately, I was ...

javascriptangulartypescript

eliminate the gap in the MUI Accordion when it is expanded

How can I prevent the Accordion MUI component from moving and applying top and bottom margins to summary elements in expanded mode? I added the following code to the summary element but it doesn't seem to be working. Any suggestions on how to fix this ...

javascriptmaterial-ui

Is it possible to establish multiple connections simultaneously using Stomp?

I have been utilizing the ng2-stomp-service in my Angular application. Is it advisable to set up multiple connections (not just multiple subscriptions)? In the past, I have always seen a single connection being established, with several subscriptions made ...

javascriptangularstomp

Version 5.3 of Laravel combined with Vue 2

Working with Vue 2 in a fresh Laravel 5.3 project, I'm faced with a challenge regarding binding a URL in the Laravel format. I've extracted some configuration rows from a database and my goal is to iterate over them to display the data, followed ...

javascriptphplaravelvue.js

The React Callservice script is failing to fetch the required data from the Node.js script responsible for making the API call

Recently, I decided to create a basic webpage using React.js to display data fetched from an API. Although the project is intended to be straightforward, my lack of recent development experience has led to a perplexing issue that I can't seem to resol ...

javascriptnode.jsreactjsrest

The callback function in AngularJS filters

I'm currently using an AngularJS filter to sort through a list of items. Here is the Jade markup I am using: li(ng-repeat="parcel in parcels | filter : filterActiveAreaParcels") After the filter function runs and the elements are displayed in the DO ...

javascriptjqueryhtmldomangularjs

Determine if two instances are within the same week, where each week starts on Friday and ends on Thursday, using moment.js

Currently, I'm in the process of developing a Discord bot using node.js and discord.js. One of the features allows users to vote through a command, but I want to restrict them to voting only once per week. The challenge lies in the fact that in this ...

javascriptnode.jsdatemomentjsdiscord

Can we leverage protractor's by.cssContainingText for dynamic text conditions?

I am looking for a way to conditionally change text content in my web project, but I'm facing a challenge since the conventional methods seem limited. The cssContainingText function typically accepts string or regular expression values. Is there a wor ...

javascriptangularjsprotractore2e-testing

Automatically unset session variable 'unsetted' using a simple line of code

Why does the session information not get saved? When I reload the page, the session variable 'mucciusersess' disappears. What could be causing this issue? Thanks... I have a cookie on the client-side with a value like 'mucciuserid' se ...

javascriptphpsessioncookiessession-variables

Guide on retrieving the value of "form" from a select using jQuery in a Ruby on Rails application

I am struggling to figure out how to use jQuery to pass the value of the form attribute from the select tag. I have been trying different ways, but so far haven't been successful. When using simple_form_for, the input statement looks like this: < ...

javascriptjqueryruby-on-railsrubyajax

Exploring the power of Node.js and EJS through the art of

Recently delving into the world of node.js, I encountered a puzzling issue with my EJS template. It seems that my for loop is not executing properly within the EJS template while attempting to create a basic todo app. Below is the structure of the project ...

javascriptnode.jsloopsexpressejs

Retrieve the information from the API and populate the tables with the data

I'm currently working on fetching API data and displaying it in tables, using mock data for now. Successfully implemented actions and reducers. Managed to call the API but encountered an issue with network calls where I see a blocked response content ...

javascripthtmlreactjsreduxmaterial-ui