Additional features, deploying to cpanel server, conversion to mobile app

hello,

First of all, I am new to react development. I like bolt.diy that builds me quickly what i need but is in react and don’t know how to deploy a script to my provider that uses cpanel and linux.
Those are instructions i fill in bold.diy:

  1. I want to build a modern, stylish look mobile web app with three fold hamburger menu and when the options are clicked it should bring forth the full page overlay window with x icon at the top right acting as close button and at the bottom in footer of overlay on the right button saying close with the same function
  2. use bootstrap library, in overlays main content part use nice sliders at the right when text flows over y-axis
  3. for fetching data from database use “export function fetchData(url, contentDiv) {
    const corsProxyUrl = ‘https://corsproxy.io/?’;
    return fetch(corsProxyUrl + encodeURIComponent(url))
    .then(response => response.text())
    .then(data => {
    //contentDiv.textContent = data;
    return data;
    })
    .catch(error => {
    console.error(‘Error fetching data:’, error);
    contentDiv.textContent = ‘Error fetching data.’;
    throw error;
    });
    }“
  4. in the first overlay window text with image form that link https://cista-zavest.si/hp/article_mapp.php?id=1529&def=ajaxArticle&title=ikone&promo=gzs&diskont=&promoSifra=xxx&coockies=1&zdravilniPark=1should be opened, content you receive is first divided by |||. use first part content for the overlay

page works as you can see in the images that are enclosed to that post, but:

  1. I then get a web app with a hamburger menu when the first option article opens from a link from the page on my server. The problem is that even though there is an image inside it is not shown in the article.
    Why is the image not shown and how to do it?
    I suspect it is not shown only in the bolt.diy container, but as I can not test the script, I actually don’t know.
    can you help?

** SOLVED: i used image from encripted/blocked source, now it the image is shown :slight_smile: image should not be in webp format, it works with jpg

  1. I want to use that script when the second option is chosen qr code scanner. and this is where i get stuck as well.
    If I put into bolt.diy instructions for using that library @yudiel/react-qr-scanner library framework it hangs and shows nothing.
    I managed to install it through the terminal, but it does not work either. i overlay there is just and no cam window which shows only frame for the cam
    can you help?

  2. i want to put on third option of the hamburger menu the youtube video list fetching library.
    Don’t know how to do it as well.
    Can you help

  3. I need to deploy my project to the server that uses cpanel and linux
    I come from a javascript environment, and don’t know much about deploying react scripts. i just need simple steps on how to do it.
    i’ve read somewhere it should be done with babel as jsx is present
    i don’t want to lose lots of time to do it, so i would ask if there is a simple way as script already works in bolt.diy environment

  4. will that script when deployed to server usable to convert it to mobile app via https://volt.build/

thanks for your kind replay

Despite the long description, its still hard for me to understand what you actual doing there.
Can you please provide the project as ZIP or export the chat history, so I can see in my boltl how it looks like and what it does.

Also do a few simple bullet points, what is not working, e.g.:

  • QR Code not showing on XYZ
  • Image not showing on XYZ


my mistake, the images are not shown. the app was javascript not react.

just put these Prompts in bolt.diy window and it will built react app where the problem cour be cleary seen:

  1. I want to build a modern, stylish look mobile web app in react with three fold hamburger menu and when the options are clicked it should bring forth the full page overlay window with x icon at the top right acting as close button and at the bottom in footer of overlay on the right button saying close with the same function
  2. use bootstrap library, in overlays main content part use nice sliders at the right when text flows over y-axis
  3. for fetching data from database use “export function fetchData(url, contentDiv) {
    const corsProxyUrl = ‘https://corsproxy.io/?’;
    return fetch(corsProxyUrl + encodeURIComponent(url))
    .then(response => response.text())
    .then(data => {
    //contentDiv.textContent = data;
    return data;
    })
    .catch(error => {
    console.error(‘Error fetching data:’, error);
    contentDiv.textContent = ‘Error fetching data.’;
    throw error;
    });
    }“
  4. in the first overlay window text with image form that link https://cista-zavest.si/hp/article_mapp.php?id=1495&def=ajaxArticle&title=ikone&promo=gzs&diskont=&promoSifra=xxx&coockies=1&zdravilniPark=1 should be opened, content you receive is first divided by |||. use first part content for the overlay
  5. in second overlay window qrcode scanner from html5-qrcode@2.2.7 library is opened; when qr code is scanned the result should be popup in alert window