CODEWITHSUNDEEP
angularjs
Pham Minh Tan
Pham Minh Tan

Reputation: 2096

How to create a localhost server to run an AngularJS project

I have used XAMPP and JetBrains WebStorm to run an AngularJS project. But it's complicated and has low performance. Is there any other way to run an AngularJS project?

Upvotes: 106

Views: 267925

Answers (13)

lyjackal
lyjackal

Reputation: 3984

If you're running node.js http-server is a super easy way to serve local files.

cd into your project folder and

npx http-server -o 

# or, install it separately so you don't need npx
npm install -g http-server
http-server -o

-o is to open browser to the page. Run http-server --help to view other options such as changing the port number

Don't have node?

these other one-liners might be easier if you don't have node/npm installed.

For example python comes preinstalled on most systems, so John Doe's python servers below would be quicker.

MacOS comes installed with ruby, so this is another easy option if you're running a Mac: ruby -run -ehttpd . -p8000 and open your browser to http://localhost:8000.

Upvotes: 235

Chetan Laddha
Chetan Laddha

Reputation: 1007

An angular application can be deployed using any Web server on localhost. The options below outline the deployment instructions for several possible webserver deployments depending on your deployment requirements.

Microsofts Internet Information Services (IIS)

  1. Windows IIS must be enabled

    1.1. In Windows, access the Control Panel and click Add or Remove Programs.

    1.2. In the Add or Remove Programs window, click Add/Remove Windows Components.

    1.3. Select the Internet Information Services (IIS) check box, click Next, then click Finish.

    1.4. Copy and extract the Angular Application Zip file to the webserver root directory: C:\inetpub\wwwroot

  2. The Angular application can now be accessed using the following URL: http://localhost:8080

NPMs Lightweight Web Server

  1. Installing a lightweight web server 1.1. Download and install npm from: https://www.npmjs.com/get-npm 1.2. Once, npm has been installed open a command prompt and type: npm install -g http-server 1.3. Extract the Angular Zip file
  2. To run the web server, open a command prompt, and navigate to the directory where you extracted the Angular previously and type: http-server
  3. The Angular Application application can now be accessed using the following URL: http://localhost:8080

Apache Tomcat Web Server

  1. Installing Apache Tomcat version 8 1.1. Download and install Apache Tomcat from: https://tomcat.apache.org/ 1.2. Copy and extract the Angular Application Zip file to the webserver root directory C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps
  2. The Angular Application can now be accessed using the following URL: http://localhost:8080

Upvotes: 3

arupjbasu
arupjbasu

Reputation: 391

If you have used Visual Studio Community or any other edition for your angular project , then go to the project folder , first type

C:\Project Folder>npm install -g http-server You will see as follows: + [email protected] added 25 packages in 4.213s

Then type C:\Project Folder>http-server –o

You will see that your application automatically comes up at http://127.0.0.1:8080/

Upvotes: 1

user70585
user70585

Reputation: 1417

Python has a built-in command specifically for spinning up a webserver:

Python3.x:

python -m http.server 8000

Other versions:

python -m SimpleHTTPServer 8000

Would start a webserver on port 8000

(Python is a prerequisite to this; if you don't have python installed, the other answers may be easier)

Upvotes: 37

Ricardo Cayetano
Ricardo Cayetano

Reputation: 446

I use:

  • express and
  • morgan

Install Node.js. and npm. npm is installed with Node.js

Placed inside the root project directory

$ cd <your_angularjs_project>

The next command creates package.json

$ npm init

Install express ==> Fast, unopinionated, minimalist for node:

$ npm install express --save

Install morgan ==> HTTP request logger middleware for node.js

$ npm install morgan --save

create file server.js

add the following code in server.js file

// Required Modules
var express    = require("express");
var morgan     = require("morgan");
var app        = express();

var port = process.env.PORT || 3002;

app.use(morgan("dev"));
app.use(express.static("./"));

app.get("/", function(req, res) {
    res.sendFile("./index.html"); //index.html file of your angularjs application
});

// Start Server
app.listen(port, function () {
    console.log( "Express server listening on port " + port);
});

Finally run your AngularJS project in localhost server:

$ node server.js

Upvotes: 5

Anandkumar
Anandkumar

Reputation: 1512

cd <your project folder> (where your angularjs's deployable code is there)

sudo npm install serve -g

serve

You can hit your page at

localhost:3000 or IPaddress:3000

Upvotes: 6

Lakshmana Rao Kuna
Lakshmana Rao Kuna

Reputation: 45

  • Run
ng serve

This command run in your terminal after your in project folder location like ~/my-app$

  • Then run the command - it will show the URl NG Live Development Server is listening on localhost:4200

  • Open your browser on http://localhost:4200

Upvotes: 2

Leonardo Lima
Leonardo Lima

Reputation: 140

Use local-web-server npm package.

https://www.npmjs.com/package/local-web-server

$ npm install -g local-web-server
$ cd <your-app-folder>
$ ws

Also, you can run 

$ ws -p 8181

-p defines the port you want to use

After that, just go to your browser and access http:localhost:8181/

Upvotes: 4

Chinedu Etoh
Chinedu Etoh

Reputation: 153

You can also setup the environment in visual studio code. Run Ctrl + Shift + P, Then type ctr in the box that appears and select tasks:Configure Task Runner, Then change the task.json file to this: { "version": "0.1.0", "command": "explorer", "windows": { "command": "explorer.exe" }, "args": ["index.html"] }, save your changes, Then select your index.html file and type Ctrl + Shift + B. This will open the project with your default browser.

Upvotes: 0

Shabbir Haider
Shabbir Haider

Reputation: 168

Assuming you already have node.js installed, you can use browser sync for synchronized browser testing.

Upvotes: 2

Suyash Tilhari
Suyash Tilhari

Reputation: 123

If you are a java guy simple place your angular folder in web content folder of your web application and deploy to your tomcat server. Super easy !

Upvotes: 2

Abdelmenem Mohamed
Abdelmenem Mohamed

Reputation: 21

"Assuming that you have nodejs installed",

mini-http is a pretty easy command-line tool to create http server,
install the package globally npm install mini-http -g
then using your cmd (terminal) run mini-http -p=3000 in your project directory And boom! you created a server on port 3000 now go check http://localhost:3000

Note: specifying a port is not required you can simply run mini-http or mh to start the server

Upvotes: 2

Amar Syla
Amar Syla

Reputation: 3653

You can begin by installing Node.js from terminal or cmd:

apt-get install nodejs-legacy npm

Then install the dependencies:

npm install

Then, start the server:

npm start

Upvotes: 21

Related Questions