#Need help to set up a small website using a module

1 messages · Page 1 of 1 (latest)

cunning wyvern
#

I am completely new to web development (coming from C#).
My current goal is to set up a very basic website to play around with Typescript.

My current attempt has the same structure as described in this Tutorial: https://youtu.be/H91aqUHn8sE

In addition I cloned this repository into my src folder and hit npm install to get all the dependencies: https://github.com/mharj/minecraft-ping

I have set up an express server to serve the dist folder:

const express = require('express');
const path = require("path");

const app = express(); 
app.use(express.static(path.join(__dirname, "./Test-With-Modules/dist")));
app.listen(3000, () => { console.log("App listening on port 3000"); })

That seems to be working fine. (serving all files from the dist folder)

I created a small index.html in my dist folder:

<head>
    <head>
        <script type="module" src="index.js"></script>
    </head>
    <body>
        Hello World.
    </body>
</head>

With my index.js consisting of:

import { ping } from "./minecraft-ping/src/index.js";
const data = await ping('eu.mineplex.com');
console.log(data);
//# sourceMappingURL=index.js.map

If I open the website on my browser, I get this error:
Uncaught SyntaxError: import not found: ping
despite the other index.js exporting it.

I am currently a bit confused about the module system... So any help is apreciated. <3

YouTube
Beyond Fireship
How to Setup Node.js with TypeScript in 2023

Learn how to setup Node.js with TypeScript while supporting native ES modules. Use the new NodeNext option to easily interop between CommonJS and ES modules in the same project.

Full Lesson and Source Code https://fireship.io/lessons/typescript-nodejs-setup/

▶ Play video
GitHub
GitHub - mharj/minecraft-ping: Minecraft server ping

Minecraft server ping. Contribute to mharj/minecraft-ping development by creating an account on GitHub.

wraith urchin
#

I don't use Express so I'm a bit shaky. But from my understading the dist folder should not contain anything you write. Instead dist should contain JS that has been compiled from sources in your src folder. Not sure if this would create issues for you, but generally speaking you never want to write anything in the dist folder. The only thing you do with that folder is to delete it's content for debugging when you are desperate.

Generally I would just write ts-files and let them generate the HTML I need.

With that said express is (in my view) generally not used to create front end code any more. It's more used to create API-endpoints and by frameworks. Although of course you can create full websites with express.

If you just want to learn some JS/TS I recommend starting with something simpler like NextJS. it uses express under the hood but you don't have to care about it or configure it.
If you want to try out nextjs all you have to do to start a next project is to write
npx create-next-app@latest

When I use Express by itself it is as an API for a seperate React-project

supple imp
#

@cunning wyvern what are you tryingto achieve with this small project?

#

It looks like you are mixing frontend and backend development

#

express is a web server framework, kinda like ASP.NET

#

it's something that runs on the backend, handling incoming HTTP requests and providing responses

#

you most likely don't need an express backend if you are just serving some static files

#

(an Apache or Nginx server would be more than enough and work out of the box)

#

but it would be a good tool to write an API with for example

#

same for all the packages you are importing, those are most likely made to run on NodeJs, not in the browser

#

being written in JavaScript doesn't mean code can run anwyere, since the browser environment is very different from the server environment

cunning wyvern
supple imp
#

but thing is, you have in reality 2 different projects

#
  • backend, that ping servers and provides the timing via an API
#
  • frontend, that fetches the info from your backend and display is
#

you'll need express for the backend, to create your API
you won't need anything special for the frontend (you can use a UI framework, but that's optional)

cunning wyvern
#

Okay, so the whole ping module is not intended to run in the browser, but to run on my own server, which then provides an API which again is called by a frontend web interface?

supple imp
#

right

cunning wyvern
# supple imp right

Hmmm.
Is there a specific reason why it was not written for web browsers?
How can I determine wether something is written to run in a browser?

supple imp
#

they don't offer the same features, APIs, etc.

#

they don't work in the same way when using modules/packages

#

How can I determine wether something is written to run in a browser?
2 main ways:

  • check the README on NPM; by default, consider all the packages are made for NodeJs, except when stated it also works on the browser; if a package is CommonJS (the module system used on NodeJs) only then it won't work;if the package supports ESM (used by node and browser), then there is a chance it wsill work
  • use your brain; some things can only be done on the server; if it might sound too complicated for a browser (like opening a TCP connection and exchanging raw packets with a Minecraft server), then it's probably not made for a browser
cunning wyvern
spark flameBOT
#
ascor8522#0
Playground Link

Preview:```ts
//////////// BACKEND
import express from "express";
import { pingPromise } from "minecraft-pinger";

const app = express();
app.get("/api", async (req, res, next) => {
// list of all the servers to ping
const servers = [{
name: "Mineplex EU",
...```

You can choose specific lines to embed by selecting them before copying the link.
supple imp
# spark flame

should be about what you want to do, using an existing package

cunning wyvern
supple imp
wraith urchin
# cunning wyvern Hmm.. a tcp connection sounded reasonably for a browser for me... Seems like I n...

Remember that Express is a framwork built on top of NodeJS

The whole point of NodeJS is to run JS in a server enviourment (without a browser). That is why it is used as a back end (and to compile some frameworks)

Any packages that call anything found in a browser but not on a server will not work. Typically things like window(), browser() etc. Node is also more difficult to host than many other things because it must have a server to work.

You can use Vercel to make your life simpler, it's where I host my NextJS-projects (again your life would be easier with NextJS). But on Vercel Express code runs in Lambda-functions. So your whole site would have to cold start every time it is called, making it slower than it should be.

as Ascor said you are essentially doing the equivilant of using an ASP.NET api to return all the HTML for a normal web page. Sure it works but it's a hassle.

cunning wyvern
wraith urchin
#

What kind of resources?
If your goal is to get some data from an API (and URL) you can use just about anything. You don't need any packages to pull data from an API, JS can already do this.
To get data from an API you can use fetch
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
If you end up using "front end react" you'll have to use hooks like useState and useEffect to store the data.

If you decide to try NextJS instead you can use "server side react" something like this would work

async function getData() {
  const res = await fetch('https://eu.mc-api.net/v3/server/ping/mc.hypixel.net')
  if (!res.ok) {
    // handle error, you may want to handle errors based on HTTP-codesa too 
    throw new Error('Failed to fetch data')
  }
 //returns the data
  return res.json()
}
 
export default async function Page() {
  const data = await getData()
  // shows the data on the page
  return <main>{JSON.stringify(data)}</main>
}
Using the Fetch API - Web APIs | MDN

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the protocol, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.

cunning wyvern
#

Such as NextJS or Svelte or Tailwind...

wraith urchin
#

For JS you really just need to learn actual JS. But nobody writes pure JS any more. So a framework will do.
I recommend learning whatever has the most open jobs around you. For me (I am Norwegian) that is NextJS, NextJS has the added benefit of also teaching you React.
As for CSS frameworks you'll have to pry Tailwind from my cold dead hands, for me there is nothing else usable out there.

Take a step back, start a new project and go through the NextJS foundations course
https://nextjs.org/learn/foundations/about-nextjs

Learn | Next.js

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.

tidal trout
#

IMO the first thing you'd want to figure out is server-side-render (SSR) or static site - the advantage of SSR is that it can directly talk to your backend stuff and is fairly efficient... the downside is that you actually need to keep a server running and have it able to deal with your web traffic without going down.

#

A static site is simpler in that it's just static files deployed somewhere (and a lot of the work happens on the browser), but you'd have to expose whatever backend you need as an API. (Unless it already exists as some external API you can use)

wraith urchin
#

if you use NextJS with the /app folder that becomes less of a problem. run everything as back end react unless you really need hooks. Just host with vercel while you learn, unless you also want to learn hosting.

tidal trout
#

I'd still intentionally decide if SSR is right for you before going down the NextJS path, personally. If SSR isn't the right path the app, I wouldn't use NextJS (even if maybe you technically can)

cunning wyvern
wraith urchin
tidal trout
#

That bit of advice is pretty recent and pretty highly controversial in the React space.

wraith urchin
#

of using NextJS instead of pure React? That is not controversial, it just makes sense to have what you need to do your project instead of having to install a bunch of packages.

"Back end react" vs front end react is a different story

tidal trout
#

Using NextJS instead of pure recact is controversial.

wraith urchin
#

I'ma go ahead and listen to the people who make React🤷‍♀️

cunning wyvern
#

Uhhh... can we try to not make this a discussion over Frameworks. I know how controversial this is, but I do not think that this thread is the right place for it...

tidal trout
#

Yeah, don't need to argue that point here.

wraith urchin
supple imp