Vue App with Node API : project structure

Question

For my first post I would like to ask for your opinion concerning Vue App with an Node using API.

For a small project, I am working on local in two folders : - client (VueJs) - server (Node)

And running them individually using npm : - npm run dev - npm run watch

Until now, everything is fine, as I can develop my application... but concernant deployment, I am a little bit lost.

For the VueJs side, i build my application for production using : npm run build My application has been created in client/dist

And for my server, I can use Forever, Nodemon or anything...

But, this is my question : How may I deploy both in the same instance ?

Until now, I though I could just move my dist folder to the server side while building it.

But I would to separate them, using two different port : one for api, one for client side.

As I am learning alone, I don’t know the best practice, any tips would be thankful.

(By the way, I am trying to deploy it on Google Cloud Instance, but I am lost too )

Thank you for reading

Answer 1

Bottom line up front, you can’t deploy your front end and back end on different ports and expect them to talk to each other. The browser security model will kick in and stop the client from reaching back.

That said, you can deploy separately so long as they wind up on the same domain (though they could be different subdomains like www.example.com and api.example.com).

It depends a bit on what google cloud resources you’re using, but a common version of this would be to have a virtual machine from Google Cloud Compute that you push both client and server to, then setup a web server such as NGINX to both serve the client files on one path or subdomain and act as reverse proxy to your api over a different path or subdomain. This is a very well documented approach / architecture.

Answer 2

You can serve them under the same port. Basically you build your frontend and have your NodeJS server (that's running your API) serve your frontend files from your client/dist folder.

If you're using ExpressJS, you would serve static files like this:

// relative to where you run the node app
app.use(express.static("path/to/client/dist"));

Documentation: https://expressjs.com/en/starter/static-files.html

For development, it gets a little tricky if you're running webpack/VueJS dev server since it runs on a different port as your NodeJS api. If you're using Vue-CLI for your VueJS app, look into using webpack's devServer proxy: https://cli.vuejs.org/config/#devserver-proxy

For production, ideally you'll want to put a web server (like Nginx) in front of your NodeJS to serve the static/dist files - less load on your NodeJS app.

Answer 3

I didn't try google cloud, however, the best practices are: one server for the frontend and another for the backend. This way you can use different frontends using the same API, for example. Another thing you should consider is authentication to do the requests to the api. If you need, I have a Vuejs boilerplate that it's completely deployable on Heroku.