Customize the frontend errors

Developers Getting Started
1

I tried to follow the tutorial at Customize the frontend, with dfx 0.13.1 and node.js v18.15.0, but got errors with local “dfx deploy”.

I figured out the problem. The name of the background canister changed from custom_greeting to custom_greeting_backend. Need to change it in index.jsx.

1 Like
2

Thanks for the report! I made this PR to fix it

3

Thanks for the fix. Instead of fixing the instructions, why not fix dfx to create correct source code with dfx new?

4

Fair question. We changed from the model of having canisters project and project_assets to project_backend and project_frontend because people (especially newcomers) kept getting confused about which canister has what function, and how to map that to the well-known frontend/backend. Since making this change in the dfx new project structure, we got far less questions, so I’d like to keep the current structure and adapt documentation instead.

5

When I add my custom css file and a png file to the dist directory, they automat get erased when I deploy them with the message doesn’t exist at build time, it will remain unchanged to be resolved at runtime.
How do I retain my stylesheet and other stuffs after deployment? The default html can be edited by me and those changes are retained. But whatever extra file like css or png I keep in the same directory are getting revoked.

6

Is the dist folder updated after each build?

The dist folder contains the minimized version of the source code and typically, is re-built after each build. A dfx deploy also includes a re-build of the application and therefore, any files not included where the source code is located will be replaced.

I would recommend moving the stylesheet and photo to a separate public folder.

Feel free to post your frontend framework and any directory structure.

2 Likes
7

Thank you so much. I shouldn’t have copied the files in the dist. The dist is meant for files in public folder to be copied to in each deployment. Listening to your advice, I had my css and png files in public but got them linked in html as if they exist in the same directory. After I deployed, the respective html, css and png file copies were created in dist folder and the html copy in that folder was actually run. It went all good.

1 Like