To create a Node.js server that serves Klingon jokes and a front$-$end HTML page with a button to fetch and display a new joke, follow these steps:

$1.**$Set up the project$**$: Make sure you have Node.js and npm installed.

$2.**$Create the project directory and initialize$**$:

$```$bash

mkdir klingon$-$jokes$-$app

cd klingon$-$jokes$-$app

npm init $-$y

npm install $-$g express body$-$parser

$```$

$3.**$Create the main application file $(`$app$.$js$`)**$:

$```$javascript

const express $=$ require$(\text{'}$express$\text{'})$;

const app $=$ express$()$;

const port $=3000$;

$//$ List of Klingon jokes

const jokes $=[$

"A Klingon, a Ferengi, and a Betazoid woman were sitting around in Quark's bar...",

$"$Q: How many Klingons does it take to change a light bulb? A: None. Klingons aren't afraid of the dark.",

"Klingons do not make software bugs. Their software is perfect from the first compile.",

"Klingon programming does not tolerate error messages."

$]$;

$//$ Middleware to serve static files $($HTML$,$ CSS$,$ JS$)$

app.use$($express$.$static$(\text{'}$public$\text{'}))$;

$//$ API endpoint to get a random joke

app.get$(\text{'}/$joke$\text{'},($req$,$ res$)=>\{$

const randomIndex $=$ Math.floor$($Math$.$random$()*$ jokes.length$)$;

const joke $=$ jokes$[$randomIndex$]$;

res.json$(\{$ joke $\})$;

$\})$;

app.listen$($port$,()=>\{$

console.log$(`$App listening at http:$//$localhost:$$\{$port$\}`)$;

$\})$;

$```$

$4.**$Create the public directory and HTML file$**$:

$```$bash

mkdir public

cd public

$```$

$5.**$Create the HTML file $(`$index$.$html$`)**$:

$```$html