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

Static Files in App Builder

  • May 5, 2021
  • 1 reply
  • 1860 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
Adobe Employee
StephanAdobeAdobe EmployeeAccepted solution
Adobe 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
Level 2
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.