CODEWITHSUNDEEP
node.jswebbackendvue.js
mnordber
mnordber

Reputation: 1183

Can I serve static files while providing an API for the server?

So I'm pretty new to web development and now that me and my much more web oriented friend started a project, he threw all kind of frameworks on me. We're doing Vuejs, jade, stylus, and jeet. For a newcomer, this is of course very confusing as no Vuejs examples uses jade, no jade examples uses vuejs, etc.

However, for this project we need a backend which can handle api calls to Google maps, saving stuff, etc. Neither of us have experience doing this and I tried to build it in Rust and got it all working with the api part but I couldn't manage to serve the files, leading to us trying a http-server serving the files and then making api calls to the Rust backend from the client. This led to problems as we had to do CORS requests (?) which I didn't get to work.

Sorry for the long background, it all boils down to the question: How do I serve static files while having the possibility to make api calls to Google Maps and store stuff in a database? All examples I find seems to assume that you're using templates to generate the files served to the end user?

How do I attack this problem? My friend has finished most of the frontend and it works simply by using the npm package "http-server"

Upvotes: 4

Views: 11063

Answers (2)

shailesh gavathe
shailesh gavathe

Reputation: 362

Important part is inside app.js file make sure yours server routes are defined up top and then client build static files afterwards like below.

var express = require('express');
var bodyParser = require('body-parser');
const path = require('path');

// put server express routes at the beginning //
var app = express();
var router = require('./routes')(); 
app.use('/api', router);
// put server express routes at the beginning //

//Serve the static files from the React app
app.use(express.static(path.join(__dirname, '/../build')));
// Handles any requests that don't match the ones above
app.get('*', (req,res) =>{
    console.log(res);
    res.sendFile(path.join(__dirname+'/../build/index.html'));
});

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

var port = process.env.port || 3300

app.listen(port, () => {
    console.log("Hi This port is running");
});

app.get('/', function(req, res){
    if(req.session){
        console.log(req.session);
    }
    console.log('ok');

});

Also inside package.json file,

Add proxy to route it 

"proxy": "http://localhost:3300",

Upvotes: 7

Nidhin David
Nidhin David

Reputation: 2474

You can use express framework in Node.js

It can server api requests as well as static files

Static files can be server using express.static middleware

You can refer this answer for a quick reference: https://stackoverflow.com/a/36639721/3359432

Read this link for info on creating api server using express: http://expressjs.com/en/guide/routing.html

Read this link to know more about serving static files using express: http://expressjs.com/en/starter/static-files.html

Upvotes: 1

Related Questions