How can I show a website to other people if it's hosted locally?-CodePudding

I'm just starting on backend learning and I managed to write some simple stuff with nodejs, but I also would like to test my stuff on other computers and show it to other people - even if it is for a little while, just for learning purposes.

For example, I have this code

//server.js
const mongoose = require('mongoose');
const Msg = require('./models/messages')
const io = require('socket.io')(3000, {
    cors: {
        origin: "*"
    }
})

const mongoDB = 'mongodb srv://12345678:[email protected]/message-database?retryWrites=true&w=majority'

mongoose.connect(mongoDB).then(() => console.log('connected'))

const users = {};

io.on('connection', (socket) => {
    console.log('new user');
    Msg.find().then(result => {
        socket.emit('output-message', result);
    })
    
    socket.on('username', myname => {
        users[socket.id] = myname;
        socket.broadcast.emit('user-connected', myname)
    })
    socket.on('send-chat-message', message => {
        const msg = new Msg({message:message, user:users[socket.id]});
        msg.save().then(() => {
            socket.broadcast.emit('chat-message', {message:message, name:users[socket.id]})
        })

    })
})

//script.js
const socket = io('http://localhost:3000');

var messageContainer = document.getElementById('message-container')
var messageForm = document.getElementById('send-container')

var myname = prompt('Qual é o seu nome?');
appendMessage('You joined')
socket.emit('username', myname);

socket.on('chat-message', data => {
    appendMessage(`${data.name}: ${data.message}`);
})

socket.on('output-message', data => {
    for(let i = 0; i < data.length; i  ) appendMessage(`${data[i].user}: ${data[i].message}`);
    console.log(data)
    
})

socket.on('user-connected', myname =>
{appendMessage(`${myname} connected`)}
)

messageForm.addEventListener('submit', e => {

    e.preventDefault();
    const message = document.getElementById('message-input').value;
    socket.emit("send-chat-message", message);
    appendOwnMessage(`You: ${message}`);
    document.getElementById('message-input').value = '';
})

function appendMessage(message) {
    const  a = document.createElement('div');
    const b = a.appendChild(document.createElement('p'))
    b.innerText = message;
    b.setAttribute("class", "received")
    messageContainer.append(a)
}

function appendOwnMessage(message) {
    const  a = document.createElement('div');
    const b = a.appendChild(document.createElement('p'));
    b.innerText = message;
    b.setAttribute("class", "sent")
    messageContainer.append(a)
}

<script defer src='http://localhost:3000/socket.io/socket.io.js'></script>
    <script defer src='script.js'></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id='test'></div>
    <div id= 'message-container'></div>
    <div id='test'></div>
    <form id='send-container'>
        <input id="message-input" type='text'>
        <button type='submit' id='send-button'>Send</button>
    </form>

(I'm sorry for being so long) Is it possible to generate an URL accessible to people on other computers? What can I learn to achieve that?

CodePudding user response：

You can configure your home router to redirect connections to your personal machine for connections on specific ports (3000 in your case).

This is normally done via a WebApp located at your network gateway (most commonly 192.168.0.1).

This feature is mostly called something like Port Forwarding. Then you can find your public IP address easily by googling it.

However, this is not really recommended unless you know what you're doing because exposing your computer to the internet can be insecure.

I'd rather recommend using a tool like ngrok which creates a tunnel to a port of your choosing on your local machine through their network. This is not only faster, but also more secure.

If you are looking for a more permanent solution, maybe with a custom domain, then you should be looking for website hosting solutions. It's never recommended to run a production website on your home machine.

CodePudding user response：

Hey i am not sure if that is what you are looking for, but you could create an acount on https://replit.com/ and put your code there. you can also import it to replit from for example github :) I hope that this might help you :) the uploaded projects you can also share with other people.

here is a screenshot on how your project would look there:

enter image description here