Loco with Angular

[LimpidCrypto]

Loco with Angular

Overview

1. Edit .devcontainer/Dockerfile
2. Reopen the project in the Dev Container
3. Delete frontend directory
4. Generate new Angular frontend
5. Build frontend
6. Edit config
7. Start Loco

Edit .devcontainer/Dockerfile

FROM mcr.microsoft.com/vscode/devcontainers/rust:0-1

RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
     && apt-get -y install --no-install-recommends postgresql-client \
     && cargo install sea-orm-cli \
     && chown -R vscode /usr/local/cargo

+ # Install Node.js and npm
+ RUN curl -fsSL https://deb.nodesource.com/setup_lts.x | bash - \
+      && apt-get install -y nodejs
+
+ # Install Angular CLI
+ RUN npm install -g @angular/cli

COPY .env /.env

Reopen the project in the Dev Container

With VSCode it is super easy to reopen and run the project in a Dev Container.

1. Crtl + Shift + P
2. "Dev Containers: Repopen in Container"
   VSCode will open the project in the Docker container. This can take a while when it is built for the first time.

Delete frontend directory

Loco come with a Vite React frontend. We can delete the whole directory because the Angular CLI will set up everything we need

Generate new Angular frontend

From the project root execute ng new frontend and follow the instructions

Build frontend

Run ng build to build the Angular frontend

Edit config

As you may have noticed Angular has built the frontend into frontend/dist/frontend/browser. We need to set that path for Loco config. Navigate to config/development.yml and set the following config:

• server.middlewares.static.folder.path: "frontend/dist/frontend/browser"
• server.middlewares.static.fallback: "frontend/dist/frontend/browser/index.html"

Start Loco

Run cargo loco start and open http://localhost:3000/

---

You should now see the Angular starter Website :)

[LimpidCrypto]

This is more of a tutorial on how I set up an Angular frontend with the Loco backend. I hope this can help someone :)

[jondot]

@LimpidCrypto thanks! would you like to create a post on your blog (if you have any?) and we can publish a link to it in the official docs?

[LimpidCrypto]

I don't have a blog yet. @kaplanelad suggested publishing a post for the loco blog. I want to open a PR in the next days.

[kaplanelad]

Hello, @LimpidCrypto! This is fantastic! I'm confident we can find a valuable use for it.

Why did you close the discussions i think we have a lot to talk :)

1. how was it to work with Loco the first time? do you have any feedback on how we can improve the work?
2. Did you use SaaS starter?
3. Did you see this repo https://github.com/loco-rs/todo-list

[LimpidCrypto]

Hello, @LimpidCrypto! This is fantastic! I'm confident we can find a valuable use for it.

Why did you close the discussions i think we have a lot to talk :)

1. how was it to work with Loco the first time? do you have any feedback on how we can improve the work?
2. Did you use SaaS starter?
3. Did you see this repo https://github.com/loco-rs/todo-list

Hey @kaplanelad this was just meant to be a short tutorial. I'm happy to discuss about it :)

This is the first time I use Loco. I was just about to start a similar project, as I couldn't find anything similar, which is to Rust what Laravel is to PHP. So yesterday I discovered this awesome framework.
I'm using the SaaS starter as I wanted to build my website with it. I already started building my frontend a while ago and wanted to integrate it with a Loco backend.

I haven't seen the todo-list repo yet. Thanks for pointing it out to me :)

[kaplanelad]

Sounds great! I appreciate your contributing us. Additionally, you can go over the blog post I've written, which you can find at this link: https://loco.rs/blog/frontend-website. I believe it's closely related to the topic of what you wrote.

Would you mind reviewing the documentation and sharing your feedback on areas that may need improvement?

[LimpidCrypto]

Sure! I will look over it next week.

[ronlobo]

Awesome, thanks for putting this together!

Cannot wait to see this for Flutter ;)