2

I installed node.js, npm and angular-cli.

My intention is to host an angular 8 app on the raspberry-pi which I can view from other devices.

So, I execute ng new test-app, change into the test-app directory and then ng serve to begin serving the simple app.

However, when I visit http:192.*.*.12:4200, I get the following message:

This site can’t be reached

I need help understanding why this isn't working and how I can make it work, please.

Improve this question
3
  • Why don't you use apache2 package to host your Angular web app?
    – Mohi Rostami
    Commented Mar 24, 2020 at 10:45
  • @M.Rostami: could you recommend a tutorial, please?
    – sisko
    Commented Mar 24, 2020 at 12:40
  • This can be an issue with webserver config, but there can be other issues as well. serve as well as apache should be accessible. Is both the devices in same network? If yes, is the IP correct? Can you connect via SSH? If yes, then the webserver might be blocking the request.
    – kiranvj
    Commented Aug 29, 2020 at 17:39

3 Answers 3

Reset to default
2

You can host an Angular web app by apache package. You need to export the project then copy data on the default path of apache.

Installation

Install the apache:

sudo apt-get install apache2

Enable/Start the service:

sudo systemctl start apache2

sudo systemctl enable apache2

Now, you can check the default page of apache by opening 127.0.0.1 or the hostname/IP address of the raspberry pi on the browser.

Default path:

/var/www/html/

Every web page you put will be accessible over your root domain or IP address.

As an example, we made a directory named khar (full path is /var/www/html/khar) create a simple gav.html file (full path is /var/www/html/khar/gav.html). This page would be accessible on 127.0.0.1/khar/gav.html on the browser.

All you need is that getting an export of your Angular page and copy all the files on /var/www/html/.

Configuration

If you want to change the ports, change the Listen section of /etc/apache2/ports.conf config file. Also, there are many more ways to change the configuration and default port.

References:

Improve this answer
3
  • Thanks for this but can you explain what you mean by "export the project"? Do you mean moving the entire angular app into /var/www/html ?
    – sisko
    Commented Mar 24, 2020 at 19:17
  • @sisko Yes, the HTML, JS, CSS, etc files and directory.
    – Mohi Rostami
    Commented Mar 24, 2020 at 20:18
  • @sisko Since you already have Node, I suggest you create a webserver using express. It will take only less than 20 lines of code.
    – kiranvj
    Commented Aug 29, 2020 at 17:45
0

M. Rostami has given all the steps clearly, but for me the deployment had to be /var/www/khar which gave the url as http://localhost/khar/ .

Other than that after after npm run build in the index.html file replace <base href="/"> with <base href="./"> before copying to /var/www/ directory.

Improve this answer
1
  • If you are deploying in a sub folder you can specify that during build with command ng build --base-href=/your-sub-folder-name/
    – kiranvj
    Commented Aug 29, 2020 at 17:42
0

If you are just trying to run the app for testing using ng serve command, you can only view your app in http://localhost:4200/.

If you'd like to view your app using the IP of your server in your network like http://192.168.1.1:4200/, you'll need to run ng serve --host 192.168.1.1

But note that, you may only do so for testing purposes.

Hope that helps!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.