How can I integrate Helia to incorporate IPFS (InterPlanetary File System) as a cloud storage solution for a website?

We are a team of developers working on a data decentralization project. We developed a Helia-based IPFS node and are running it on our desktop. We uploaded files. I have some basic questions. 

My node won't change; I just upload files. How will it be accessible to another user, let's say I want to use the Brave browser to access a file? 

I know we have to use an IPFS gateway like Pinata to pin the file. Let's say I am running my node and I am connected to the internet. Will it still be accessible to another user over the internet? Do I need to open ports in my router?

Hi, I'm sorry if this is a trivial issue, I am very new to IPFS and I'm using the new library called Helia with my Javascript app (specifically with react).

I have tried many ways of making a helia node like the ones mentioned here and the ones here. I have been trying for weeks to upload my data to the IPFS and be able to access it from a public gateway like ipfs.io/ipfs. I do get a CID returned to me using these methods but it doesn't show when I go to ipfs.io/ipfs/${cid}.

Please help me out and let me know where I must specify the public gateway to upload the data so I can see it when I use the gateway and CID. Thanks a lot 🙏

EDIT

Thanks for everyone who tried to help. I found this amazing tool and it seems to be working for me. You can check out this video for a short demo on using this. This library is called ThirdWeb and it does EXACTLY what I needed. Although it requires you to have a Web3 wallet and an API_key/client_ID (for your environment variables) which you can get from here.

Currently trying to figure out how it works and recreate some of the functionality myself. It's strange because this @thirdweb-dev/storage mentions neither IPFS-JS nor Helia in its dependencies so I have no idea how it is even accessing the IPFS network... yet.

For those who want to check out my code, here is the repo: https://github.com/Electromorphous/DeNotes

This is the code that came from helia which is from the helia webpack. originally, the code is programmed for uploading text (not txt file) and we are trying to change the code to accept any file format instead of just text. when uploading to helia, it only sets as a RAW file and we want it to change as a DAG-PB file in
IPFS.thank you so much for the help! 

import React, { useState, useRef } from 'react';
import { createHelia } from 'helia';
import { unixfs } from '@helia/unixfs'; 

function App() {
const [output, setOutput] = useState([]);
const [helia, setHelia] = useState(null);
const [fileContent, setFileContent] = useState('');
const [fileName, setFileName] = useState('');
const [uploadedFile, setUploadedFile] = useState(null);
const [uploadedCID, setUploadedCID] = useState('');
const [ipfsDesktopURL, setIpfsDesktopURL] = useState(''); 

const terminalEl = useRef(null); 

const COLORS = {
active: '#357edd',
success: '#0cb892',
error: '#ea5037'
}; 

const showStatus = (text, color, id) => {
setOutput(prev => [
...prev,
{
content: text,
color,
id
}
]); 

terminalEl.current.scroll({
top: window.terminal.scrollHeight,
behavior: 'smooth'
});
}; 

const store = async (name, content) => {
try {
let node = helia; 

if (!helia) {
showStatus('Creating Helia node...', COLORS.active);
node = await createHelia();
setHelia(node);
} 

showStatus(Connecting to ${node.libp2p.peerId}..., COLORS.active, node.libp2p.peerId); 

const encoder = new TextEncoder(); 

// Include a random nonce in the file content
const nonce = Math.random().toString(36).substring(2);
const contentWithNonce = ${nonce}\n${content}; 

const fileToAdd = {
path: name,
content: encoder.encode(contentWithNonce)
}; 

const fs = unixfs(node); 

showStatus(Adding file ${fileToAdd.path}..., COLORS.active); 

const cid = await fs.addFile(fileToAdd); 

setUploadedCID(cid.toString());
showStatus(Added to ${cid}, COLORS.success, cid);
showStatus('Reading file...', COLORS.active); 

const desktopURL = http://127.0.0.1:5001/webui/#/files/${cid};
setIpfsDesktopURL(desktopURL.toLowerCase()); 

showStatus(Uploaded CID: ${cid}, COLORS.success);
showStatus(Preview in IPFS Desktop: ${desktopURL}, COLORS.success);
} catch (error) {
showStatus('Error adding file to Helia', COLORS.error);
console.error(error);
}
}; 

const handleSubmit = async e => {
e.preventDefault(); 

try {
if (!uploadedFile) {
throw new Error('No file uploaded...');
} 

await store(uploadedFile.name, fileContent);
} catch (err) {
showStatus(err.message, COLORS.error);
}
}; 

const handleFileUpload = async e => {
const file = e.target.files[0];
setUploadedFile(file);
setFileName(file.name);
setFileContent('');
}; 

const handleUploadButtonClick = () => {
document.getElementById('file-upload').click();
}; 

return (
<>
<header className="flex items-center pa3 bg-navy">
<a href="[https://github.com/ipfs/helia](https://github.com/ipfs/helia)" title="home">
<img
alt="Helia logo"
src="https://unpkg.com/@helia/[email protected]/logos/outlined/helia-wordmark.svg"
style={{ height: 60 }}
className="v-top"
/>
</a>
</header> 

<main className="pa4-l bg-snow mw7 mv5 center pa4"> <h1 className="pa0 f2 ma0 mb4 navy tc">Add data to Helia</h1> 

<form id="add-file" onSubmit={handleSubmit}> {uploadedFile ? ( <> <label className="f5 ma0 pb2 navy fw4 db">Upload File:</label> <div>{fileName}</div> </> ) : ( <label htmlFor="file-upload" className="f5 ma0 pb2 navy fw4 db"> Upload File </label> )} <input className="input-reset bn black-80 bg-white pa3 w-100 mb3" id="file-upload" name="file-upload" type="file" onChange={handleFileUpload} required style={{ display: 'none' }} /> 

<label htmlFor="file-content" className="f5 ma0 pb2 navy fw4 db"> Content </label> <input className="input-reset bn black-80 bg-white pa3 w-100 mb3 ft" id="file-content" name="file-content" type="text" placeholder="Upload File" required value={fileContent} onChange={e => setFileContent(e.target.value)} readOnly /> {!uploadedFile && ( <button type="button" className="button-reset pv3 tc bn bg-animate bg-black-80 hover-bg-aqua white pointer w-100" onClick={handleUploadButtonClick} > Upload File </button> )} 

<button
className="button-reset pv3 tc bn bg-animate bg-black-80 hover-bg-aqua white pointer w-100"
id="add-submit"
type="submit"

Add file
</button> 

</form> 

{uploadedCID && ( 

<div> <h3>Uploaded CID:</h3> <p>{uploadedCID}</p> </div> )} 

{ipfsDesktopURL && ( 

<div> <h3>Preview in IPFS Desktop:</h3> <a href={ipfsDesktopURL} target="\_blank" rel="noopener noreferrer">{ipfsDesktopURL}</a> </div> )} 

<h3>Output</h3> 

<div className="window"> <div className="header"></div> <div id="terminal" className="terminal" ref={terminalEl}> {output.length > 0 && ( <div id="output"> {[output.map](http://output.map/)((log, index) => ( <p key={index} style={{ color: log.color }} id={[log.id](http://log.id/)}> {log.content} </p> ))} </div> )} </div> </div> </main> </> ); } 

export default App;
127.0.0.1