How to deploy frontend canister with ready to use HTML

Developers
1

I would like deploy a ready to use Angular application within the frontend canister.

How can I deploy the frontend canister with ready to use HTML - it is already in the dist folder - but without building the frontend canister, like the default project does?

Any hints how I can do that ?
Thanks.

1 Like
2

Official doc : Smart Contracts on the Internet Computer

sample app with react/vue : GitHub - dfinity/awesome-internet-computer: A curated list of awesome projects and resources relating to the Internet Computer Protocol

the point is to set canister type with “assets” in dfx.json as :

“type”: “assets”,

1 Like
3

Thanks for the links, but I would like to know who I have to adjust the webpack.config file for ready builded Angular application, to be precisely.

4

I think the thing you actually need to look into is Angular app boostrapping along with using Webpack with Angular. Imo this is not relevant to Internet computer itself.

1 Like
5

hmm, I don’t think so, because it is not about Angular. Maybe I expressed myself wrong, let me try again:

  1. I have a ready to use Frontend Application, it makes no difference it is Angular or a pre-build React application.
  2. I copy all pre-build files into the _assets folder
  3. then I want to deploy this frontend canister, this frontend can also be normal static html with some javascript.
  4. the frontend application comes from a different project, both projects are developed independently and the final step is the combine this two projects.
1 Like
6
  1. I copy all pre-build files into the _assets folder

Do you mean that you are using typescript files that need to be compiled to regular js as pre-build files or did you mean that you’re using built files (ie: finished product, once the whole app code is compiled to regular js files) when trying to add them to a frontend canister?

  • If former then you need to build the whole app and only use the output files that the compiler generates for you, not the actual pre compiled typescript / modules.

If you have a code repo somewhere of the frontend app that’s written in Angular that you’re trying to bring fully onto IC, I’d be glad to take a look at it and try to help.

1 Like
7

I wrote my final project for the Motoko Bootcamp with Angular, that is still working, but the problem here is, that it was not possible for me to figure out how I can add Material Design to the Angular application. So I had to write the hole design with a lot of HTML and CSS and include Material Design via CDN. Maybe it is simple a config point to add Material Design, I don’t know.

But in a real case project the frontend and backend application will be divided and developed from different developers, so we have to split it up and find a way to combine it later.

That is the reason why I try spilt the frontend and backend.

Exactly, that is what I mean.

1 Like
8

What was the issue you were facing when you wanted to add material design to your Angular app? I haven’t used material design myself in the past, you mean this ? Angular Material

It should be as easy as running npm install of the required packages and then just using imports in your typescript files where you need the functionality?

Man… I wanted to participate in the bootcamp myself but when I wanted to register a few weeks ago their discord invite link was completely broken so I forgot about it and did not register…

9

Does this example help?

10

oh, is this site new ? And yes this site guide me to the right point. The only think I had to do, was to set the build value in the package.json to an empty string.

The result is when dfx deploy runs, the build command from package.json file is called but without the webpack command.

After that the static angular application can be deployed into the frontend canister.

Problem solved.

2 Likes
11

I summarized my findings on this topic in an article on medium.

4 Likes