Vue deployment with Dokku - docker

Question

My project is working and build correctly in local, in development or production, but when I try to push to my DigitalOcean Ubuntu server through Dokku it crashes
# server.js at the root
const express = require('express');
const path = require('path');
const serveStatic = require('serve-static');
let app = express();
app.use(serveStatic(__dirname + "/dist"));
const port = process.env.PORT || 5000;
app.listen(port, () => {
console.log('Listening on port ' + port)
});
# current vue.config.js
# note that it had no option originally but changing it didn't solve the problem
const path = require('path')
module.exports = {
publicPath: '/',
configureWebpack: {
resolve: {
alias: {
'#': path.resolve(__dirname, 'src/')
}
}
},
css: {
loaderOptions: {
sass: {
data: `#import "src/assets/styles/helpers.scss";`
}
}
},
pluginOptions: {}
}
And here's the crash
- Building for production...
ERROR Failed to compile with 24 errors2:31:56 PM
These dependencies were not found:
* #/components/Errors/DefaultError in ./src/main.js
* #/components/Layouts/ChatLayout in ./src/main.js
* #/components/Layouts/DashboardLayout in ./src/main.js
* #/components/Layouts/DefaultLayout in ./src/main.js
* #/mixins/CurrentIdentityMixin in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ConnectRouting.vue?vue&type=script&lang=js&, ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Chat/Events/File.vue?vue&type=script&lang=js& and 16 others
* #/mixins/LayoutMixin in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&, ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ConnectRouting.vue?vue&type=script&lang=js&
This is very strange, it's as # wasn't recognised as shortcut in Vue, but I don't really know how to fix it. I think setting everything with relative path manually would solve the issue (it worked at least for the layouts when I tried); it's not really a fix though, just a bad workaround.
I also changed a few times the node / npm version, without success. Here's the package.json
{
"name": "askalfred-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"generate": "graphql-codegen",
"postinstall": "npm run build",
"start": "node server.js"
},
"dependencies": {
"#sentry/browser": "^5.4.0",
"#sentry/integrations": "^5.4.0",
"actioncable": "^5.2.2-1",
"apollo-boost": "^0.1.20",
"apollo-cache-inmemory": "^1.3.5",
"apollo-client": "^2.4.2",
"apollo-link": "^1.2.3",
"apollo-link-http": "^1.5.5",
"apollo-upload-client": "^10.0.1",
"autosize": "^4.0.2",
"epic-spinners": "^1.1.0",
"flexboxgrid": "^6.3.1",
"graphql": "^14.1",
"graphql-ruby-client": "^1.6.3",
"lowdb": "^1.0.0",
"mkdirp": "^0.5.1",
"moment": "^2.24.0",
"shortid": "^2.2.8",
"showdown": "^1.9.0",
"tingle.js": "^0.14.0",
"typescript": "^3.4.5",
"v-mask": "^1.3.3",
"vue": "^2.6.10",
"vue-analytics": "^5.17.0",
"vue-apollo": "3.0.0-beta.25",
"vue-notification": "^1.3.16",
"vue-router": "^3.0.1",
"vuelidate": "^0.7.4",
"vuex": "^3.0.1"
},
"devDependencies": {
"#graphql-codegen/cli": "^1.2.0",
"#graphql-codegen/fragment-matcher": "^1.2.0",
"#graphql-codegen/typescript": "^1.2.0",
"#vue/cli-plugin-babel": "^3.4.0",
"#vue/cli-plugin-eslint": "^3.5.1",
"#vue/cli-service": "^3.4.0",
"eslint": "^5.15.3",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.2.2",
"express": "^4.17.1",
"graphql-tag": "^2.9.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"serve-static": "^1.14.1",
"vue-cli-plugin-apollo": "^0.20.0",
"vue-template-compiler": "^2.5.21"
},
"engines": {
"node": "v11.11.0",
"npm": "6.7.0"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Any idea what I could be doing wrong?

Answer 1

Somewhat working solution
For anyone which would end up in the same situation, I believe most tutorial about Dokku / VueJS are out of date, and lead to stupid mistakes, or at the very least does not tackle the deployment correctly with the newer versions. After several hours I figured:
"postinstall": "npm run build",
I removed this from the package.json and now it deploys without problem. I'm unsure if the success was due to removing the /dist from .gitignore in my project and building it locally, or if the something happens while it's deployed, but it's enough in my case.

Answer 2

Better way imo.
Just create an empty file called exactly ".static" on the root folder of the project.
Then on the dokku server run:
dokku config:set yourappname NGINX_ROOT=dist BUILDPACK_URL=https://github.com/dokku/buildpack-nginx
The dist folder needs to be commited (remove it from .gitignore).
Then run "git push dokku master".