The client server is unreachable when running the npm run dev command

Having recently ventured into the world of npm and JavaScript, I find myself in a situation where I am attempting to utilize an existing npm project for local testing. Upon entering the command npm run dev, both the server and client scripts are activated simultaneously. To access the server URL, I utilized http://localhost:5200/ as advised by the command output, which presented me with the message "{"hi":"there"}" on the browser. My expectation was to be directed to the website constructed for this project, but instead, I encountered warnings without any errors. Could these warnings potentially lead to connectivity issues? How can I resolve this and successfully connect to the client server?

Your assistance or guidance in resolving this matter would be greatly appreciated.

The following is the console output upon executing the command:

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7311121018161d1700160105160133425d435d43">[email protected]</a> dev
> concurrently "npm run server" "npm run client"
 
[1]
[1] > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4d6d5d7dfd1dafadac4def0d8c2ddd096cbc584b3c9dada95cbdcd85edd96dedcd"}>[email protected]</a> client
[1] > npm run start --prefix client
[1]
[0]
...

Answer №1

When setting up your application, it's crucial to have the backend running on port 5200 while ensuring that the frontend operates on a separate port.

The typical choice for the frontend port is 3000, but this can be configured in the .env file to suit your project requirements.

To verify the operation of the frontend, consider running npm run client.

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

I am currently developing a program that is displaying a blank page despite my efforts to write

I've been trying to write the code below but it only shows a blank page. var greeting = React.createClass({ render: function() { return ( <div> <h1>Hello</h1> </div> ...

Efficient method of delivering cohesive information from database to user without the need for continuous querying

Within the database, there is stored data about each user that typically remains constant. However, occasionally a user may update their information, such as changing their name. This data includes the user's name, username, and company details. The ...

JQuery range events failing to trigger

Whenever a user adjusts the JQuery range control, I want to update a value. Despite my attempts to follow an example provided here, I have not been successful. $(document).ready(function () { alert('ready1'); //This alert appears when t ...

Change the class of <body> when the button is clicked

One of my tasks involves adding a button that, when clicked, should give the body the class "open-menu". Implementing this using jQuery was quite straightforward - I just needed to add the following line of code: $('.burger').click(function() ...

Creating a state in React may lead to an endless loop

Currently, I am working on retrieving data from a Firebase real-time database and storing it in an array named 'users'. The goal is to use this array to set the "post" state. However, there seems to be an issue with the line "setPost(users);" as ...

Building interactive forms in Angular 6

I want to design a dynamic form that creates a new form when the AddNew button is clicked. In my TypeScript (ts) file, I have the following code: addinfoForm: FormGroup; infoNameList: FormArray; infoModel: Productdetail; constructor(private fb ...

Trouble with triggering HTML5 FileReader() functions

I'm having trouble determining why neither readSuccess() nor readFailure() are being executed in the code snippet below: function readMyFile(){ var reader = new FileReader(); reader.onload = readSuccess; reader.onerror = readFailure; ...

Troubleshoot: Unable to Change CSS on Click Using Javascript/jQuery

Having trouble creating three different buttons that toggle between various images using the CSS display property? Check out my code on https://jsfiddle.net/agt559e8/. function USradarChange1() { //document.getElementById("usradar1").src="weather/curr ...

Using JavaScript or TypeScript to locate the key and add the value to an array

My dilemma involves an object structured as follows: [{ Date: 01/11/2022, Questionnaire: [ {Title: 'Rating', Ans: '5' }, {Title: 'Comment', Ans: 'Awesome' } ] }, { Date: 01/11/2022, Questionnaire ...

Tips for dynamically assigning unique IDs to HTML form elements created within a JavaScript loop

let count = 0; while (count < 4) { $('#container').append("<div><input type='textbox' class ='left' id='left-${count}'/><input type='textbox' class ='right' id=' ...

"Encountering an Unexpected Error with Nodester Node

I always encounter an error whenever I attempt to install a module or list the installed modules using nodester npm. nodester Error: npm is incompatible with node v0.8.1 nodester Required: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data ...

Connecting the Node.js and npm Phoenix client package with a Kerberized Apache Phoenix database

Currently, I am facing difficulties connecting kerberized Apache phoenix with the npm jdbc package on node.js. Despite encountering numerous challenges, I am exploring alternative solutions. The npm phoenix-client package appears to be a viable option for ...

Enhance your Angular component by integrating property bindings and events with transcluded elements

I have an Angular component that includes an <input/> element with property bindings and an event listener. I am exploring the option of allowing users of the component to define a custom input field, potentially with parent elements, through transcl ...

The click event in an Angular 6 loop is not being activated

When the Test is clicked, the function should be invoked. However, nothing happens when I click on it. Here is the HTML component code: <div class="row m-0 justify-content-between" *ngFor="let i of k[currentk]?.details | keys"> <div (click ...

Contrasting React Context and the JavaScript window object

React introduces a feature known as Context, which provides a method for storing globally accessible values without the need to pass them down as props. I am curious about the benefits of using React's Context compared to simply storing values on the ...

Tips on how to resize, position, and scale an object effectively using three.js

Recently delving into the world of three.js, I decided to experiment with importing models using the gltf loader. Upon loading a specific 3D model, my scene transformed to showcase a mesmerizing view, as depicted https://i.sstatic.net/l4jNy.png. However, ...

Having difficulty initializing jQuery DataTables upon button click with an Ajax request

I have a piece of HTML code that represents a partial view: <table id="table_id" class="table table-inverse"> <thead class="thead-inverse"> <tr> <th>Select</th> ...

Having trouble compiling Vue.js for Internet Explorer 11

After seeking help on Stack Overflow and conducting extensive research, I have finally configured my babel.rc file as follows: { "presets": [["env", { "modules": false, "uglify": true, "targets": { "browsers": ["> 1%", "last 2 versi ...

Enhance your SVG progress circle by simply selecting checkboxes

I have a unique system with 5 checkboxes that act as a To-Do list. When I click on each checkbox, the circle's diameter should progressively fill up in increments of 1/5 until all 5 checkboxes are completed. The order in which the checkboxes are click ...

We were unable to locate the module '@reactflow/core' or its associated type declarations

After forking reactflow, I attempted to make some modifications but encountered a type error even without making any changes. https://i.sstatic.net/EyTZE.jpg My next step was to try "pnpm i @types/reactflow," but it did not resolve the issue. ...