Static Files in App Builder | Community
Skip to main content
New Participant
May 5, 2021
Solved

Static Files in App Builder

  • May 5, 2021
  • 1 reply
  • 1859 views

Hi - I have customers-dashboard sample App Builder project. I want to add some custom HTML and PNG files in the project. I have added in "web-src/src" folder but I cannot access the file.
I tried to use different paths like xxx.adobeio-static.net/src/ws.html etc.
Is it even possible to have these extra static HTML etc. files in the project and how I can get to those (HTML) files?

Thank you!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by StephanAdobe

Images are imported automatically when referenced from the web-src/index.html file. You can also import them manually using JS e.g. from the web-src/index.js file: 

 

import myImage from '../image.png';

console.log(myImage); // returns image src path

 

Same for html files: 

 

import myHTML from '../file.html';

console.log(myHTML); // returns file.html content

 

If you want to simply copy static files to the dist folder, you can install the plugin https://www.npmjs.com/package/parcel-plugin-static-files-copy, then create a static folder at the root of your project and put all static files in there. They will be automatically copied to the dist folder. 

 

1 reply

StephanAdobe
StephanAdobeAccepted solution
Employee
May 5, 2021

Images are imported automatically when referenced from the web-src/index.html file. You can also import them manually using JS e.g. from the web-src/index.js file: 

 

import myImage from '../image.png';

console.log(myImage); // returns image src path

 

Same for html files: 

 

import myHTML from '../file.html';

console.log(myHTML); // returns file.html content

 

If you want to simply copy static files to the dist folder, you can install the plugin https://www.npmjs.com/package/parcel-plugin-static-files-copy, then create a static folder at the root of your project and put all static files in there. They will be automatically copied to the dist folder. 

 

wikiAuthor
New Participant
May 5, 2021

Thank you very much. I could not make it work using manual "import image from.." but reference from the web-src/index.html and using the parcel-plugin-static-files-copy; both options worked.