10

Just gonna leave this here because I am too lazy to write a proper article for my website:
If anyone is trying to create a Vue.js website with Node.js backend do NOT use express-vue, it is unnecessarily complicated and broken. Instead use this method I found.
You will need:
- IntelliJ IDEA / WebStorm / other IDE supporting multiple modules per project and tasks
- Nodejs and npm
- vue-cli

Step by step:
1. Create new empty project
2. Add your frontend module using vue-cli generator
3. Add your backend module using Express generator
4. Run npm build in your frontend module once
5. Move or remove public folder in your backend module
6. Create a symlink from your backend module root called public pointing to dist folder in your frontend module root
7. Make sure to add "Run npm build" from frontend module to your "bin/www" task (default task for Express module)
8. Enjoy developing your REST API in Node/Express and your frontend in Vue.js with single-file components and it being served by the same server that is providing the backend.
(Since they are separate modules and you are not mixing webpack and Node/Express you can add ts-loader, stylus-loader, pug-loader or any other loaders without screwing anything up)

For deployment you just need to copy the contents of dist into public on the server. (and not upload the symlink)

Comments
  • 0
    Here is a screenshot showing it working
  • 1
    And for anyone who would like to ask, I am writing a program for managing multiple game "servers" running on the same dedicated server. (namely Factorio and Minecraft) The program will be able to start, stop, restart(using systemd), backup and restore(using a combination of mods and cron tasks for short-term backup and bacula for long-term backup) the game servers
  • 1
    You can also avoid symlinks if you use the outputDir option of the config

    https://cli.vuejs.org/config/...
  • 0
    Check out pterodactyl panel for ideas/encouragement. I suggest using docker like they do it's really reliable.
  • 0
    @FetzenNET Thanks for the suggestion but I still prefer using the symlink while developing because I can maintain separation and I also like to run the backend and frontend separately so that hot-reloading still works for both of them.
  • 0
    @n3xus Thanks for the suggestion but we are forbidden from using Docker by the main server administrator/manager of the server group. There is some other technology used in place of Docker but this is supposed to run on the dedicated server running the game servers so the less resources it uses the better... Besides, I have no idea how to use Docker or the other thing we are using and running git clone, npm install, npm start is not that hard while installing it.
Add Comment