Combining a VueJS frontend with a Express REST backend?

Question

I’m new to Vue and Node, and I’m trying to figure out how to structure my project.

On the one hand I’ve got a “vue init webpack myproject”-based frontend, while on the other hand I’ve got an Express+MongoDB based REST API. The Vue-project uses the REST API for all data-handling etc. Currently I’ve split these two into two separate Git repositories. Developmentwise this makes sense to me, since the frontend and backend should be farly loosely coupled anyway.

However, when it comes to the deployment to test and production I haven’t got a good working process yet. My plan is to host both the frontent and the backend on the same webserver. Initial deployments have been done by doing an ‘npm run build’ on the frontend project, and then manually copying the genereated files over to the \static folder in my backend project, and lastly starting up the backend server with ‘npm run start’.

This doesn’t feel good, and I’m sure there are better ways to deploy the frontend and backend.

Any thoughts or tips on how to improve the deployment process?

JOjohn · Accepted Answer · 2017-11-29 11:12:07Z

If you're building your vue project with webpack you should be able to set a build / dist folder where your bundled app file would be stored.

Then in your express app you can configure an "endpoint" for serving static files that could point to your build / dist folder.

Then when you serve your app the index should go fetch this file.

The webpack doc is quite well done when it comes to take you through the process of creating both dev and prod build

https://webpack.js.org/guides/getting-started/

I recommend that you read it from top to bottom as it has a bunch of useful infos that will save you time along the line

And to set up express to point to your dis folder you can do something like that:

app.use('/static', express.static(path.join(__dirname, 'dist')))

And call the file from your index like that.

<script src="/static/bundle.js"></script>

Let me know if this was the answer you were looking for.

Collectives™ on Stack Overflow

Combining a VueJS frontend with a Express REST backend?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related