Setting up a Nostr and Express web app (Part 1) ...

Setting up a Nostr and Express web app (Part 1)

quoting
naddr1qq…6qtp

We’ll go through a few easy steps to get a web app up and running with Node, Express and Nostr Dev Kit.

There are lots of ways to do this. This is just a simple one, but it a highlights a couple simple changes you’ll need to get started talking to the Nostr world. Let’s set up a node project. Search install NodeJS if you need to do that first.

Jump into the terminal and create a node project:
$ mkdir mynostr
$ cd mynostr
$ npm init
You can accept all the defaults from the last command for now or add your own values.

We want to use ES modules so we’ll need to make a quick change to the package.json file that was created. add this line to it below the description:
"type": "module",
We’ll also need a way to bundle the js we need for the browser so let’s install webpack.
 npm install --save-dev webpack webpack-cli
As the title suggests we’ll leverage Express as web framework:
npm install --save express
I’m going to use Handlebars here as a template engine. I’ll probably replace it in the future with something reactive but that’s another topic.
npm install express-handlebars --save
Make a directory called views and add a file called home.handlebars to it. Add some basic HTML :
<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8">
<title>Nostr Express</title>
</head>
<body>
{{{body}}}
</body>
</html>
And add a file to the root directory called app.js
import  express  from  'express'
import { engine } from  'express-handlebars';
const app  =  express();
app.engine('handlebars', engine({ defaultLayout:  false }));
app.set('view engine', 'handlebars');
app.set('views', './views');

app.get('/', (req, res) => {
  res.render('home');
});

app.listen(3000, () => {
  console.log('listening on port 3000')
});
Let’s see how things are looking. If you are on a Mac or Linux this will do. If not you’ll have to adjust accordingly.
$ node app.js
In a browser checkout http://localhost:3000/.

We need to install he wonderful NDK (Nostr Development Kit) .
$ npm add @nostr-dev-kit/ndk
Ok, next we’ll need a way to bundle the the wonderful NDK (Nostr Development Kit) so we can access it from the browser. We already have webpack installed for that.

Create a webpack.config.js file in the root directory and add the following:
import  path  from  'path';
import { fileURLToPath } from  'url';
const  __filename  =  fileURLToPath(import.meta.url);
const  __dirname  =  path.dirname(__filename);

const  config  = {
  target:  'web',
  mode:  'production',
  entry:  './src/index.js',
  output: {
    path:  path.resolve(__dirname, 'dist'),
    filename:  'bundle.js'
  }
};

export  default  config;
We’ve used ./src/index.js as an entry point so create a directory src and a file in it called index.js containing the following:
import  NDK, { NDKNip07Signer, NDKEvent } from  "@nostr-dev-kit/ndk";
window.nip07signer  =  new  NDKNip07Signer();
window.NDK  =  NDK;
Then run:
$ npm run build
If it compiles successfully you should see a new file and directory in the project called dist/bundle.js.

We need to make this bundle available to be served to the browser so in app.js add the following lines after
import  path  from  'path';
import { fileURLToPath } from  'url';
const  __filename  =  fileURLToPath(import.meta.url);
const  __dirname  =  path.dirname(__filename);
app.use('/dist/bundle.js', express.static(__dirname  +  '/dist/bundle.js'));
Now back in your home HTML template we can verify this is all set up properly by trying to fetch a user profile from a Nostr relay by adding some JS to the head.
<script  type="module"  src="dist/bundle.js"></script>
<script type="module">
const  ndk  =  new  NDK({
  explicitRelayUrls: ["wss://relay.damus.io"],
});
await  ndk.connect();
const  user  =  await  ndk.getUser({
  npub:  "npub1l2vyh47mk2p0qlsku7hg0vn29faehy9hy34ygaclpn66ukqp3afqutajft",
});
user.fetchProfile().then((profile) => {
  console.log("Profile:", profile);
});
</script>
Now if you start the server again and load the page with dev tools console open you should see the JSON of the profile data was successfully fetched.

That’s it!

In Part 2 we’ll look into how we log users in, and explore some modern ways to do HMR with Vite!

librenews on Nostr: Setting up a Nostr and Express web app (Part 1) ...