Building a front-end-only version of an angular project

[late wren]

We got a rather complex mobile app built with angular. We would like to do a visual overhaul.
The current build, test, and deployment processes are complicated, with strict security protocols in place.

I wonder if it is feasible to build a lighter copy of the app—essentially a front-end only version without service connections. This would allow designers and front-end developers to iterate on visual changes more efficiently. It could also help set up automated visual regression tests.

Has anyone implemented something similar and had success?

[echo shore]

It's highly dependent on your application and how it's reacting to your data from a server. Therefore, it's probably impossible to do it automatically.

Things that come to my mind:

1. Create pages filled with mock data and build with only those mock pages
2. Create mock services and use them instead of real ones
3. Create a mock backend or staging/test backend environment
4. Create a mock service worker

Usually, people just create a mock backend or use a staging/test environment.

[icy ferry]

At my organization we are big on automation so much so to add it to our library.You can use the WMLEndpoint https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/intro/wml-components-base/#wmlendpoint class from our library, where based on the automate flag would call the api or send a mock version. Thing is you have to update http calls accordingly or make an encapuslation function

[late wren]

Thank you for your considerations. We got (3) a whole test bankend environment. Thing is, I am searching for something way lighter. Something that allows several quick front-end adjustments and QA checks (e.g. with browser web inspector by a designer) during a sprint.
Currently front-end devs show what they got to the designer at the very end of the sprint - usually via screen sharing only. This leads to a lot of stress and poor outcomes.

I wonder if I can do something with Static Site Generation and mock data to get something that can be shared easily.

[echo shore]

Hard to say without knowing the specifics of your app. If you have CORS set up, I'd just deploy the frontend with changes into a separate environment (deploying just a frontend is usually simple, e.g. via firebase static hosting) and connect with one of the test environments' backend. For new backend endpoints, you could utilize e.g. https://mswjs.io/, which will mock responses into Service Worker (assuming you don't use one already) - this way your app code would stay the same as the test/prod code.

[late wren]

Interesting. Thanks. I will discuss this with colleagues.

[light adder]

Are you looking for somethign like Storybook perhaps?

You can show off individual UI components and organize them. You can also add full pages and mock out APIs / data

it's mostly aimed at component based dev workflow not so much say an end to end wizard flow (although possible)

You can also combine it with something like mswjs