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

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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!

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(