Best way to integrate an API?

[emcniece]

I'm starting a project that requires an API and have been doing lots of reading for common practices, and your feedback would be valuable too. Please feel free to close if this is off-topic.

1. I'd like to bundle the API within the app and have them start at the same time. Files can be kept in a directory other than /client/, sort of like this. Is this a bad idea?
2. Currently aiming to use Express for routing calls down to /routes/ - is there an easier way?
3. Where is the best entry point for adding an API - Gulpfile, Webpack, app.js, or a new server.js file that spools Gulp?

Thanks for your thoughts!

[fesor]

iles can be kept in a directory other than /client/

/client directory contains client-side scripts. express-stuff should not be considered as "client-side". So /server is more appropriate directory name :)

sort of like this. Is this a bad idea?

You can use whatever structure that fits for you and your team. Remember about LIFT.

Currently aiming to use Express for routing calls down to /routes/ - is there an easier way?

Not sure if I understand you correctly... are you talking about server-side routing? What are your concerns about express?

Where is the best entry point for adding an API

this should definitely not gulpfile or webpack. server/app.js or server/index.js is pretty much explicit.

[emcniece]

Thank you so much for your input! I did a lot more reading and testing today. I'm pretty close to getting this up - just stuck on serving the API through BrowserSync (which may not be a good idea).

I have created a new /server/ directory to house the API's app.js. I'd like to build the API with ES6/Webpack as well, so it would be nice to spool the API at the same time as the frontend. Express will be fine for the API.

Here's my current gulpfile. I am now trying to figure out how to serve a Node/Express app from /server/app.js/. Here's webpack.backend.config.js just in case.

File structure:

client
 - app
 -- app.js
 -- ...
 - index.html
generator
node_modules
server
 - app.js
gulpfile.babel.js
webpack.backend.config.js
webpack.config.js
webpack.dev.config.js
webpack.dist.config.js

The next step is trying to get /server/app.js to run in the browser without being interpreted as file request. Currently when I run gulp backend-build it compiles properly, but http://localhost:4000 returns Cannot GET /api and http://localhost:4000/app.js returns the expected /server/app.js file as text.

As it stands, BrowserSync is being used to serve this new /server/app.js file. Is this the best idea, or is there an easier way to provide this API while still using Webpack?

[fesor]

just stuck on serving the API through BrowserSync (which may not be a good idea).

if production - it is really a bad idea ;) But if you don't want to handle CORS for some reason - you can just use proxy middleware.

but please remember that your API is separate application, you don't even need gulp for this.

[emcniece]

I ended up using https://webpack.github.io/docs/webpack-dev-server.html#proxy.