Localhost 8080
Last Updated :
09 Feb, 2024
Localhost:8080 is a port used by the web servers. It is a local development server that runs on port 8080. It is used in cases when the localhost:3000 and localhost:5000 are busy running some other applications. Developers use localhost:8080 to see the preview of the developed application and test it according to the requirements for responsiveness and other parameters before deploying it to production.
Let us understand localhost:8080 by breaking it down:
- localhost:Â It refers to the hostname or the current device you are using for development purposes.
- 8080:Â It is the port number on which the created development server is configured to listen.
Let us dive deeper into the concept of localhost:8080 by understanding the below points one by one:
How to start the localhost:8080 server on your machine?
To start the localhost:8080 server you need to have a service that operates on the localhost:8080 port like ReactJS, NodeJS, VueJS, AngularJS, etc. If you are working with any of the mentioned services, then you need to type a command inside the terminal of your IDE or command prompt based on the service you are using.
Commands for different services are listed below:
- Node.js: If you have node.js installed on your machine with Node Package Manager(npm). You can use the tools like http-server or live-server to start the localhost:8080 development server with the help of below commands:
// Install tools globally
npm install -g http-server/liver-server
// Navigate to your project
cd pathOfYourProject
// Start the server at port:8080
http-server/live-server -p 8080
- ReactJS: In the case of ReactJS, you don’t need to install the server externally. If you are creating a react app using create-react-app it automatically creates a development server. You just need to run the below commands to start the server at 8080 port.
// Navigate to your project directory
cd pathOfYourProject
// By default, the port will be 3000, use below command to
// run server at port 8080
$env:PORT=8080 ; npm start
- AngularJS:Â The angular app also comes with development server, you just need to create angular app using the Angular CLI and run the below commands.
// Navigate to your project directory
cd pathOfYourProject
// Start the server
ng serve
//By default, angular app run on port 4200 use below command to change it
ng serve --port 8080
How to create development server in ReactJS?
Follow the below steps to create and start development server in ReactJS:
- Step 1: Create react app using the npm create-react-app command by specifying the name of the project after it.
npm create-react-app projectName
- Step 2:Â Navigate to your current project folder.
cd pathToYourProject
- Step 3: Create files inside the src folder and run the server using below command.
$env:PORT=8080 ; npm start
Example:Â The below code can be used as a template code for your file.
Javascript
import React, { useState } from 'react' ;
const App = ({ prop }) => {
const [isHidden, setIsHidden] = useState( false )
function btnClickHandler() {
setIsHidden((prev) => !prev);
}
return (
<div style={{ textAlign: 'center' }}>
<h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
<h1>Hey {prop}!</h1>
<h2>Welcome to GeeksforGeeks</h2>
{
isHidden &&
<h3>A Computer Science Portal.</h3>
}
<button onClick={btnClickHandler}
style={
{
backgroundColor: "green" ,
color: '#fff' ,
padding: '15px' ,
cursor: 'pointer' ,
border: 'none' ,
borderRadius: '10px'
}}>
Click to toggle more page content
</button>
{
isHidden &&
<p>
This content is toggled dynamically using
click event with button.
</p>
}
</div>
);
};
export default App;
|
Output:
Share your thoughts in the comments
Please Login to comment...