Custom Files Getting Erased After dfx deploy : main.css doesn't exist at build time it will remain unchanged to be resolved at runtime

Developers
1

I had edited the html file that is provided in the assets after I newly create a dfx project. I had also added a .css file that was linked with the html structure and a .png file that was linked in the html. BUT After I deploy, the css and png files are automatically removed and the frontend link leads me to everything the html file was about (Only the changes I made in the html is reflected) but without the styles. What could be a possible solution?

2

By default dfx removes everything starting with a “.”(DOT) , so if your directory’s name that contains your css files or png files starts with a Dot try to rename them.
this might help you, if its not the case please provide more information.

3

The file names were main.css and logo.png
The files were created by me all fresh and placed in the assets directory where I have a default html file. I update that file with my own boiler plate. That went cool. In that html I linked the image and styles using the respective tags img and link. The files were all saved and links were running fine. But when run I dfx deploy, the files that I had created ie the css and png file got removed. I get a message: main.css doesn’t exist at build time, it will remain unchanged to be resolved at runtime. This message appears during the deployment process.

4

Do you use any js farmework or library that has webpack config or you just have a HTML file with some images and a css file?

5

Right now I have only html and css file. I happily copy my html code into the default html file created at the dfx new project command. But it didn’t generate a css or js file. Tomorrow, I may try js files also. Here is a screenshot of the message and all the files that are present

file vanish
file vanish1920Ă—1080 299 KB

What should I do to attach my frontend files and the motoko file I coded will serve as a backend to it?

6

What should I do to attach my frontend files and the motoko file I coded will serve as a backend to it?

In order to bring the functionality from your backend to frontend there are couple of ways that you can do, but in your case the easiest one would be to import the Actor created in the declarations directory and call that actor.

An example would be like

import { project_backend } from "../../declarations/project_backend";
  let actor = project_backend;

async function call_backend_function(){
    const result = await actor.functionYouWantToCall();
}
7

The answer lies in here.
[Customize the frontend errors - #6 by jennifertran](https://Listen to what jennifertran has to say)

You have to create files in a public folder. But link them through your html as though they are in the same directory. Because they will be. Their copies will be made in the dist folder… After deployment

1 Like