#Angular and Asp.Net Core 3: Using a real-fake backend for prototyping and testing.

2019-11-11 12_59_09-Window.png

Real-Fake backend. Yah, I know, it sounds weird.

I’m in a situation where I want my Angular code to post to a real HTTP backend and return some values, but I don’t want to wait/create a real Asp.Net Core 3 backend to test or wire up selenium. I need a really fast turn around in a prototype. In this article that’s what we’ll do.

I’ll use Angular for this post, but React or Vue, etc would work just fine.

I’ll assume you have a little bit of an Angular background, but it’s not needed too much to get the idea.

In my component I have a form submit handler wired up and a data service stub as well:

export class UserSettingsFormComponent implements OnInit {

  constructor(private dataServiceDataService) {}

  onSubmit(form: NgForm) {
    this.dataService.postUserSettingsForm(this.userSettings).subscribe(
      result => console.log('success', result),
      error => console.log('error: ', error)
    );
  }

My data service just returns what is posted:

export class DataService {
  constructor(private httpHttpClient) { }

   postUserSettingsForm(userSettings: UserSettings): Observable<any> {
       return this.http.post('https://putsreq.com/qYVARlIpT0IiOUSAmp0a', userSettings);
  }
}  

What’s the funny-looking URL? Here’s the magic. Go to https://putsreq.com and tap the Create a PutsReq button.

2019-11-11 12_53_58-Window.png

Then in the screen that appears,  add this to the “Response Builder and press Update:

var parsedBody = JSON.parse(request.body);
parsedBody.id='MyIdIsBest';
response.body=parsedBody;

Now when we run our Angular form and post the value, PutsReq will execute our request and return what we indicated.

With this we can quickly edit and experiment with posting and modifying a response from our Angular app.

Here’s what the PutsReq page will show as Requests from your app come in:

2019-11-11 12_57_47-qYVARlIpT0IiOUSAmp0a.png

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s