如何将 express.js 与您的网站集成

Question

I built a simple web portfolio page with html, css and javascript. I did it with no framework like angular or react. I used bootstrap for my footer alone.

I used webpack as my bundler and everything is working just perfect but my problem right now is that I want to integrate express.js with my app and I have no idea how to do that, I'm about finishing Server side programming with Nodejs and Express course from Coursera. I have searched through google but couldn't find what I want.

Answer 1

Install in your backend project folder, in console: npm install express --save

 var express = require('express'); var app = express(); // Configure headers y cors app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method'); res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE'); res.header('Allow', 'GET, POST, OPTIONS, PUT, DELETE'); next(); }); app.use('/api', project_routes);

Answer 2

If you want to expose your back-end API to your front-end in a simple way, can I suggest using api-mount which is based on express under the hood.

Should you need to customize express , introduce additional middlewares or similar - api-mount allows that.

The downside is that your back-end would not be RESTfull and you would learn less about express itself. Still, try it out - you might like it:)

Answer 3

There are different ways to integrate your backend with your frontend. You said you were finishing up a course on Node JS and Express on Coursera so I'll assume you already know how to set up your server and whatnot.

If you're starting out and just want to have your data coming from a database and have it populated in the actual HTML I would take a look at EJS . It allows you to embed data into an HTML page, that way you can generate a finished HTML page with all the data you need. This is great for things like SEO.

Another way is to have some client-side Javascript that queries your backend via a REST API in some way like:

In Express:

async function getSomethingFromDB(req, res) {
   const data = await getDataFromDb()

   res.send(data)
}

app.get("/something", getSomethingFromDB)

In your frontend JS:

async function fetchDataFromBackend() {
   const res = await fetch(`/something`)
   const data = await res.json()

   return data
}

You can call fetchDataFromBackend however you want and do whatever you need with data , such as populating your website with this data. This approach is great to make interactive applications but has its own problems regarding SEO and I would advise the first method, using this technique once you require AJAX in your website.

I hope this helps!