I'm really new to html, css, javascript and all kind of web development. After I coded my first own website, I'd like to play a little with communcation between the browser and a server.
I'd like to be able to access a website hosted on my PC (using my PC as "Web" server) over my home network (my router) so that I can load and use it for example on my smartphone. There's no need for it being accessible over the internet, I only want to use it at home when being connected to my WiFi.
Is that possible?
You can very simply build your own server using Node.js and Express.js.
Here is a simple snippet to create a server on port 8001 on your PC.
const express = require("express");
const app = express();
app.listen(8001, () => {
console.log("Listening on port 8001");
});
After that, you start building routes, middleware, and static files for your server. More info can be found here and here.
Related
I am (very) new to node.js and I am trying to get a development environment started with React.
const express = require('express')
const mongoose = require('mongoose')
const app = express()
// this displays the index.html file
app.use(express.static(__dirname + '/public'));
// trying to see the app.js
app.get('/', (req, res) => {
res.render('app')
})
app.listen(process.env.PORT || 5000);
Right now I am simply trying to be able to view my app.js when I run nodemon. But right now it is only showing the index.html file in the public folder. and when I run npm start it renders both the index.html and the app.js.
I am 100% doing something wrong and am not in my element here. Any help/advice would be appreciated.
My full repo is here for viewing here
Thank you in advance.
Your code is simply serving a static HTML file located in the public directory everytime the user make a GET request to the root (in your case, localhost:5000). It is not interacting with React yet.
Usually when starting a project with React (frontend) and Node (backend), you would create them as separate projects, in separate repositories.
So you could create a React application using a bootstrap such as create-react-app running on PORT 3000 and in another terminal tab, start your NodeJS application in PORT 5000 like in your example. Then, you can call your backend endpoint from your frontend React application, by referencing http://localhost:5000
By doing this, your backend code don't need to serve static files anymore, it can return data such as JSON and make connections to a database for example.
Since your question is not specific enough, you could be talking about server side render. In server side render apps using Node and React, you have a frontend built with React and a Node server that will return the same React code as a string, using the react-dom/server package to help. This is more complex, but basically you will have the same React code on the client AND on the server. There are performance benefits, because the user can see some content rendered right when he enters the page, without having to wait the React bundle (javascript file) to load. If you want to know more about creating a server side render app with React and Node, there is a nice digital ocean tutorial here
If you want to connect your react js project to the node js
In Development
you simply run their server and start it
In Production
You can use sendFile function coming from express.js to run the frontend
https://dev.to/loujaybee/using-create-react-app-with-express
I am running an express app in node.js on Azure Linux VM, and I want to connect this website from my personal computer.
const express = require('express');
const app = express();
app.listen(3000, () =>
{
console.log("Server is running..");
})
And for ex. in my computer, I can just run localhost:3000 but on VM, I cant reach.
The public ip adress of VM is 40.XXX.XX.252 and I try to connect on my browser like this : http://40.XXX.XX.252:3000 but it doesn't work either..
I know it is really common question but i tried everything that is suggested and I couldnt fix.
ps: I tried to run this app on my computer and again, I could connect through localhost:3000 but not from another computer with my computer's public ip.
Problem causes:
It must be that port 3000 is not open. You can open port 3000 through commands to set it. (The settings in the firewall also need to be checked)
But I personally think this is not safe.
I recommend using an intranet penetration tool, which is the safest way to access through the generated link, because sometimes the public ip assigned by the operator is not fixed. Here I recommend using ngrok linux version.
You also can refer to my answer in another post.
sending http request from azure web app to my machine
I don't really have experience with backend and how things work together. I have created a simple live message sending app with node.js and socket.io. When I host a static web server on my machine (http-server which runs on local port using node.js) my app works perfectly fine but when I upload it on my host or github pages just for test, the backend doesn't seem to work. I uploaded all my files with an FTP program and the frontend loads fine but the backend doesn't. Do I have to know something like Django or ASP.NET to make these work on my host?
EDIT: One more thing, first line in my server.js is const io = require('socket.io')(3000)and in my script.js - const socket = io('http://localhost:3000')where 3000 and localhost:3000 stands for local host in my machine. What do i need to put instead of these?
You probably need to install and setup Node.js on your server, contact yout hosting provider for node installation if the option isn't available in yout cPanel.
I'm using Vue.js and the vue-router and would like to server the static files via Node.JS.
So I've create server.js with the following code:
// server.js
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);
It seems to work, but only when I click around.
If I visit ex. my-url.com/some-path/another-path it fails.
Am I missing something?
Ex. I'm getting:
Cannot GET /cars with I type www.my-domain.com/cars into the address bar in the browser, but visiting www.my-domain.com and clicking on cars does work.
You need to setup your server to redirect users to the appropriate server location. Please read the Vue Router - HTML5 History Mode docs.
When using history mode, the URL will look "normal," e.g.
http://oursite.com/user/id. Beautiful!
Here comes a problem, though: Since our app is a single page client
side app, without a proper server configuration, the users will get a
404 error if they access http://oursite.com/user/id directly in
their browser. Now that's ugly.
Not to worry: To fix the issue, all you need to do is add a simple
catch-all fallback route to your server. If the URL doesn't match any
static assets, it should serve the same index.html page that your
app lives in. Beautiful, again!
The main thing that you need to do is have all routes lead to the root route. Alternatively, since you are using Express, you can leverage the connect-history-api-fallback which the Vue Router docs recommend.
I have a node app that I am trying to deploy on my server. I have an index.html file in a public folder and an app.js file. If I navigate to the project in the command line and run node app.js it runs the app on localhost:8888 and shows the index.html file.
Now that I have uploaded this to my server I am wondering what I need to do, and change (if anything) in my app.js file so that i can visit the site without visiting localhost:8888, but instead the actual url.
I have tried http://162.xx.xxx.xxx/folderName/app/public:8888, but this doesn't work.
var express = require('express')
var app = express();
app.use(express.static(__dirname + '/public'))
app.get('/', function (req, res) {
res.send('Hello World!')
})
app.listen(8888, function () {
console.log('Example app listening on port 8888!')
});
"Server" is a word with two primary meanings in software development.
It can mean either "A piece of software that listens on a network" or "A computer running that kind of software".
So having uploaded the JavaScript program to the remote computer that is your server you need to do exactly the same as you did on your own computer.
i.e. you need to get a terminal on the server and run node app.js
It will then be available at http://your.example.com:8888/
(More advanced uses would involve using software like forever or system.d to run it automatically as a background process).
If you were using the term server with the other meaning (i.e. you mean "Apache HTTP" or "IIS" or similar), then you are out of luck.
Using Node for server side code means running a server written in JavaScript.
To use this in combination with something like Apache, you would either:
Run the Node server instead of Apache
Run the Node server on a different port and point some services at that port explicitly
Run the Node server on a different port and use something like ProxyPass to have Apache relay requests to it
Change the port number from 8888 to 80 and then use the address of your server in the browser. For example, "mysite.com" for a domain name or "123.45.678" for an IP address.
If there are other sites on that server, you can't run it on port 80. (Port 80 is the default port websites use.) You'd need to use a different port. So, say you kept 8888 -- the address would be yoursite.com:8888