#Help getting started Node backend Next front end.

18 messages · Page 1 of 1 (latest)

craggy stump
#

I was following a simple tutorial for react that transitions to next. Everything worked while doing react but the conversion over the Next has broken and I am not sure where, though I believe it has to do with needed require statements. I'm still unclear about the initial service of a next app while using node on the back end.

Node Code:
'const http = require('http');
const express = require('express');
const app = express();
const mariadb = require('mariadb');
const fs = require('fs');
const date = require('date-and-time');

...
app.get('/', (req, res) => {
fs.readFile('WEBSITE/pages/index.js', (err, data) => {
if (err) {
res.status(404).send('File not found!');
console.log('404 Sent!');
} else {
console.log('Website Served.');
res.status(200).type('text/html').send(data);
...
});'

Front End Code:
'import { useState } from 'react';

function Header({ title }) {
return <h1>{title ? title : 'Default title'}</h1>;
}

export default function HomePage() {
const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
...
}'
So the rendering is not happening before the index.js is sent. That may also have to do with my app.get function just sending the index.js. How do I fix the rendering issue. Here are my installed packages just to be clear:
' "scripts": {
"dev": "next dev"
},

{
"dependencies": {
"date-and-time": "^2.4.3",
"express": "^4.18.2",
"mariadb": "^3.1.1",
"next": "^12.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}'

keen thistle
#

can you link this tutorial that you are following? it looks like this is missing a lot of steps

#

you can't serve the .js code from next directly from a web server, these files are meant to be built by next into something else

#

if you already have a node.js server, you usually would have two separate projects:

  1. your Node.js API project
  2. the Next.js front-end project
#

you deploy them separately

#

this will generate an output similar to create-react-app in the out folder

#

you can then serve this folder from the Node.js server

craggy stump
#

What you say makes sense. But if I want server side rendering, in the past I just used node and my own DOM modifying functions, I need to run a second server for the front end project or does Next just serve a completely self contained file that does everything for the site/app?

craggy stump
#

Going back through the tutorial and decided to just start here: https://nextjs.org/learn/basics/create-nextjs-app/setup and even that doesn't work. "user@Ubuntu-22-04-Fresh-VM:~/Nextapp$ ls
nextjs-blog
user@Ubuntu-22-04-Fresh-VM:~/Nextapp$ cd nextjs-blog/
user@Ubuntu-22-04-Fresh-VM:~/Nextapp/nextjs-blog$ npm run dev
node:internal/modules/cjs/loader:1075
const err = new Error(message);
^

Error: Cannot find module 'semver'
Require stack:

  • /usr/share/nodejs/npm/lib/utils/unsupported.js
  • /usr/share/nodejs/npm/lib/cli.js
  • /usr/share/nodejs/npm/bin/npm-cli.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at Module._load (node:internal/modules/cjs/loader:920:27)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/usr/share/nodejs/npm/lib/utils/unsupported.js:2:16)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19) {
    code: 'MODULE_NOT_FOUND',
    requireStack: [
    '/usr/share/nodejs/npm/lib/utils/unsupported.js',
    '/usr/share/nodejs/npm/lib/cli.js',
    '/usr/share/nodejs/npm/bin/npm-cli.js'
    ]
    }

Node.js v18.15.0
user@Ubuntu-22-04-Fresh-VM:~/Nextapp/nextjs-blog$ ls
node_modules package.json package-lock.json pages public README.md styles
user@Ubuntu-22-04-Fresh-VM:~/Nextapp/nextjs-blog$ ^C
user@Ubuntu-22-04-Fresh-VM:~/Nextapp/nextjs-blog$
"

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.

keen thistle
#

it is meant for self-hosting

craggy stump
#

As we talk I have gained a few insights and it looks like yes, I would need two server processes running, one Node and one Next and then use reverse proxies so they can properly talk. Any ideas on that next tutorial though... I followed the instructions on that page linked just above, no other process other than trying to start that app using npm start dev from its installed directory. Figured I would spend some time just learning Next before I determine if it is appropriate for what I want it for and how to meld it in.

keen thistle
#

what is your npm version?

craggy stump
#

well that's intresting, get the same error with npm -v ... somehow my npm got borked it looks like

#

found that issue, it was a change of location for node commands during an upgrade for that tutorial.

keen thistle
#

ah great 🙌