I came across an interesting blog post today that discusses a method for deploying React applications. The author begins with a Node project and then creates a React project within a subfolder, along with some proxy configuration.
About 10 days ago, I didn't have such a clever approach when working with Vue.
- I started by creating a Vue project.
- After building it for production, I added a package.json and a server.js file in the
distfolder created by the Vue build process. - The package.json includes these two lines:
and"postinstall": "npm install express""start": "node server.js".
As a result, Express listens on port 8081 internally (but is translated to ports 80/443 by Heroku), allowing communication between the Vue frontend and the Node backend. While it technically works, I find this solution somewhat messy and like desperate hacking.
The primary goal is to avoid using two separate Heroku instances for a small personal project that consists of both frontend and backend components.
If you have any suggestions for a cleaner approach, I would greatly appreciate it!