Rider Pro Prod dist Does Not Serve
Hi
I've built and published my Rider Pro theme:
yarn build
serve -s dist
When I go to the same root context I use for local dev I observe many errors in the devtools console and the dashboard is not displayed:
https://dsc.cloud/bb2198/Screen-Shot-2022-08-23-at-13.19.15.png
What is the correct process for building a prod build for Rider Pro?
Thanks
Ben
Replies (10)
Note local URL for published prod build is:
http:/localhost:3000/#/dashboard
the #/dashboard root context works fine when yarn serve(d).
Note I am seeing the same behaviour on my s3 bucket too when I publish prod build there.
Thanks
Ben
So I just downloaded theme again and did:
$ cd theme
$ yarn install
$ yarn build
$ serve - s dist
http://localhost:3000/#/dashboard does not load and has console errors:
https://dsc.cloud/bb2198/Screen-Shot-2022-08-23-at-15.55.19.png
This is blocking me. Please advise.
Hi Ben,
In vue.config.js you should have publicPath property, by default for the production it is /rider-vue-pro/, you need to update it up to the path on your server. For example, if you want to deploy a project to the root folder on your server then you can set publicPath to / if it has any folder you should specify them as /folder1/folder2.
Please check Vue 3 official deployment guide for more info:
https://cli.vuejs.org/guide/deployment.html
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Have you tried it yourself?
For the downloaded zip, locally I cannot access either http://localhost:3000/rider-vue-pro or http://localhost:3000/rider-vue-pro/#/dashboard when serving the built dist directory.
Please advise.
Yes, we test a build before a release, also as you can see on our preview page built rider pro is deployed without errors.
https://preview.keenthemes.com/rider-vue-pro/#/dashboard
In vue.config.js we have a condition and in a development environment, you do not need an additional path before the vue-router route.
publicPath: process.env.NODE_ENV === "production" ? "/rider-vue-pro/" : "/",Regards,
Lauris Stepanovs,
Keenthemes Support Team
I'm glad it works for you. Unfortunately, that doesn't help me.
Try doing this:
1. Download the latest release of rider pro
2. yarn install; yarn build
3. yarn global add serve; serve -s dist
4. Access http://localhost:3000/rider-vue-pro/#/dashboard
I don't see the page and have console errors. What do you see?
Can you please provide the detailed steps, pertinent to your product (not generic vuejs instructions), that result in your downloaded theme displaying the dashboard page in a browser, with the theme source code installed and built in production mode - ie served from dist directory.
Thanks
Hi Ben,
We reproduced your issue, the problem is with publicPath in vue.config.js.
By following the steps you described above we are getting errors in the console and a blank page.
To fix this you need to update publicPath in vue.config.js, command serve -s dist will make a dist folder as a server root folder and there will not be a rider-vue-pro folder inside so the public path must be "/", just update publicPath property and it should resolve the issue.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Great thanks Lauris!
I'm back on track.
Thanks very much for your help.
Glad to hear that. All the best with your project!
