Setup Angular frontend application with backend side

Developers
1

Hi everyone,
I would like to create a dApp complete with frontend and backend, using Angular and Motoko.
I started by creating the project with the command
dfx new project_name
npm install
dfx deploy

All works fine also with npm start.

Now I have to do angular setup, so:
npm install -g @angular/cli
cd src/
here I delete the current project frontend folder, then
ng new project_name_frontend the same as the old one.
running ng serve all works correctly.
Now, I need to do dfx deploy wich does not work because it is looking for the index.js file into frontend folder. I create an empty index.js file in this folder.
Then, I modify the dfx.json file like this. I share with you also the project structure.

image
image292×805 29.1 KB

image
image751×641 37.5 KB

Using this configuration and running dfx deploy the result opening the canister is a white page.

I’m sure, I’m loosing some important steps. I can’t understand where.

I saw in previous forum questions, and can’t find hint.
I also share my code GitHub - looganxx/LandRegistry: Dfinity Project - deploy on Internet Computer Blockchain on the branch features/setupAngular
Thank you for your attention.

2 Likes
2

check out my repro, is a little bit outdated but should still work

by the way working on an updated version.

2 Likes
3

I found it after a long search. After some hacks, it works. Thank you!

4

Here’s my project for Motoko Bootcamp 2023 I did 2 weeks ago. I used Angular 15, maybe you will find something interesting there

3 Likes