Develop on Live Website

[josodigital]

Hi there,
I am an Enterprise Selldone user and a Partner. My understanding is that the new SDK was meant to make life easier in terms of storefront customizations. When I read your instructions on Github, it was clear I needed to install this on a server. Thankfully, I happen to have my own server. So I did install successfully using npm install, npm setup.

I run into trouble on the "Step 3: Begin Development" . when I run npm serve. It says under Network: Unavailable? When I try to open https://myserveraddress:8080/ I get a an error and a blank page. However when I look at the code on that page, I see selldone data that is not displayed by the browser?

So I have been looking for the location to change the Network address to my server IP address?

This is where I am at and I need help. I understand you might be working on solution?

I think given I have engaged in this, the sooner you can help me the better. I am happy to jump on a zoom call to make this happen?

Looking forward to your reply.

Kind regards,

Fleman

[pajuhaan]

Hi @josodigital
This project is developed using the Vue framework, which is a JavaScript framework for client-side development.

This means the final product will be a web app, includes JavaScript, CSS, and other assets. To get started with this project, you'll need to clone and build it on your PC.

Once built, you can publish it using Selldone CLI, available at https://www.npmjs.com/package/selldone-cli. This tool allows you to deploy the project either on Selldone or on your own server (with server support coming soon through Selldone CLI).

Additionally, the command 'yarn serv' is used to set up a development environment on your PC, enabling real-time development and testing of the project.

Step by step:

1. Clone project on your PC gh repo clone selldone/storefront , run yarn install and yarn setup
2. Start dev server (build and create local server) yarn serve (Open https://localhost:8080 and confirm SSL Warning)
3. Now change codes and refresh the page.

After writing the code and applying changes, once the final project is ready, install the Selldone CLI with npm install -g selldone-cli, and then run selldone in the root directory of the project.

We will publish numerous resources so that anyone, regardless of their technical level, can start coding (even with ChatGPT).

[josodigital]

Hi @pajuhaan
Thanks for your reply.. Most of what you have shared is already on guthub.

Did you look at my message? I said that I made good progress up to the configuration side.

Are you saying that this has to be installed on a local PC instead of a server? I have a Linux Centos server where I am installing the script. I just need help to figure out how to make progress. I would be grateful if you could reply specifically to my query?

Sorry to say it but your reply is a bit generic?

Looking forward to hearing from you.

Many thanks.

Fleman

[pajuhaan]

The SDK and Vue framework are primarily designed for client-side operations.

However, if you need to use them server-side in a non-standard way, you can run the serve command and open a port on your server. Alternatively, you can set up a proxy in Apache to direct your domain to the local server created by serve. For more details on using serve with Vue, check out the Vue CLI documentation (https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-serve). Additionally, look up how to implement a proxy in Apache (or Nginx) for this setup.

[josodigital]

@pajuhaan thanks for your reply. I have managed to deploy to selldone successfully. My only issue is still step 2 described above.
I am still getting a blank page at https://localhost:8080. This is after running yarn serve. I don't get the SSL warning message you mentioned. Please help. A video, will make a difference. Many thanks. Fleman

[josodigital]

@pajuhaan I have just run yarn serve again and here is what I get "INFO Starting development server...
(node:29444) [DEP_WEBPACK_DEV_SERVER_HTTPS] DeprecationWarning: 'https' option is deprecated. Please use the 'server' op
tion." Is this the warning message you were referring to? If so, how do you confirm it as I am not given the option to confirm? Many thanks. Fleman

[pajuhaan]

BLANK PAGE ISSUE! @josodigital The issue stemmed from a missing .env file. I've now uploaded a sample .env file. Plz update your project and give it another try. Additionally, you can find a detailed description of the problem at this link: #5

[pajuhaan]

@josodigital To ensure your issues and questions are promptly addressed, please post them as new posts instead of comments. GitHub doesn't send notifications for comments, so there's a risk your queries might be missed here.

BLANK PAGE ISSUE!

The issue stemmed from a missing .env file. I've now uploaded a sample .env file. Kindly update your project with this and give it another try. Additionally, you can find a detailed description of the problem at this link: #5

[yjmhugues]

Hi I am stuck. I am working on a mac with zsh terminal. I clone the gihub files. yarn install. yarn setup. yarn serve but get errors. Then I tried bun but get same errors (see file attached)
Selldone-bun-run-serve-errors.pdf

I saw you talked about .env file. I tried to modify that too. So shop name is the one at the end of the shop url or is the shop title?
Where do I find this number below (or is always the same?):
#Number: custom landing page number
VUE_APP_SAMPLE_SHOP_CUSTOM_HOME=3001

[pajuhaan]

It's the shop name:

The error was due to invalid relative paths to modules, which I have fixed. Also, the problem may have been caused by the migration from Vue 2 to Vue 3. The project has now been updated. Please clone the new project. It should work (it's Vue 3 + Vite now).

Please see these articles:

https://pajuhaan.medium.com/how-to-develop-a-storefront-for-your-ecommerce-pwa-with-vue-vite-selldone-and-test-it-on-your-7c0510ea33a1

https://pajuhaan.medium.com/how-to-develop-a-storefront-on-a-live-website-with-live-updates-vue-vite-selldone-55099a330911

About VUE_APP_SAMPLE_SHOP_CUSTOM_HOME please see: (It's the landing page ID and change base on your landing pages in the Shop dashboard > Pages)

[yjmhugues]

Ok Thank you