C#•2mo ago

Front stack help

I'm doing this exercise to figure out full stack C#. https://learn.microsoft.com/en-us/training/modules/build-web-api-minimal-spa/5-exercise-create-api

Exercise - Create an API - Training

Create an API.

21 Replies

Rice Spice•2mo ago

I'm not sure where I'm suppose to be pasting the proxy property as what I have copied is just localhost:5100

Pobiega•2mo ago

the dev proxy which is what you are looking at is normally configured so your frontend acts as a gateway to your backend during development this fixes the "problem" that the frontend doesnt have its own hosting during production, but it does at dev time so normally you'd do something like api/ -> localhost:5001/api

Rice Spice•2mo ago

im a bit confused but the target is already 'https://localhost:5100', am i missing something?

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,  // Client port
    proxy: {
      '/pizzas': {
        target: 'https://localhost:5100', // Mock server port
        changeOrigin: true,
        secure: false,
        ws: true,
        configure: (proxy, _options) => {
          proxy.on('error', (err, _req, _res) => {
            console.log('proxy error', err);
          });
          proxy.on('proxyReq', (proxyReq, req, _res) => {
            console.log('Sending Request to the Target:', req.method, req.url);
          });
          proxy.on('proxyRes', (proxyRes, req, _res) => {
            console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
          });
        },
      }
    }
  }
})

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,  // Client port
    proxy: {
      '/pizzas': {
        target: 'https://localhost:5100', // Mock server port
        changeOrigin: true,
        secure: false,
        ws: true,
        configure: (proxy, _options) => {
          proxy.on('error', (err, _req, _res) => {
            console.log('proxy error', err);
          });
          proxy.on('proxyReq', (proxyReq, req, _res) => {
            console.log('Sending Request to the Target:', req.method, req.url);
          });
          proxy.on('proxyRes', (proxyRes, req, _res) => {
            console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
          });
        },
      }
    }
  }
})

Pobiega•2mo ago

what is the issue you are having? with that setup, I'd expect a call to localhost:3000/pizzas to hit localhost:5100/ behind the scenes

Rice Spice•2mo ago

it's suppose to load the front end and display properly but it jsut keeps loading a white screen

Pobiega•2mo ago

thats not related to your proxy at all your frontend is being served at localhost:3000

Rice Spice•2mo ago

i meant once i changed

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,  // Client port
    host: true
  }
})

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,  // Client port
    host: true
  }
})

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,  // Client port
    proxy: {
      '/pizzas': {
        target: 'https://localhost:5100', // Mock server port
        changeOrigin: true,
        secure: false,
        ws: true,
        configure: (proxy, _options) => {
          proxy.on('error', (err, _req, _res) => {
            console.log('proxy error', err);
          });
          proxy.on('proxyReq', (proxyReq, req, _res) => {
            console.log('Sending Request to the Target:', req.method, req.url);
          });
          proxy.on('proxyRes', (proxyRes, req, _res) => {
            console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
          });
        },
      }
    }
  }
})

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,  // Client port
    proxy: {
      '/pizzas': {
        target: 'https://localhost:5100', // Mock server port
        changeOrigin: true,
        secure: false,
        ws: true,
        configure: (proxy, _options) => {
          proxy.on('error', (err, _req, _res) => {
            console.log('proxy error', err);
          });
          proxy.on('proxyReq', (proxyReq, req, _res) => {
            console.log('Sending Request to the Target:', req.method, req.url);
          });
          proxy.on('proxyRes', (proxyRes, req, _res) => {
            console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
          });
        },
      }
    }
  }
})

it just keeps loading the white screen

Pobiega•2mo ago

hm can't help but notice it removed the host: true, part

Rice Spice•2mo ago

so i was thinking it's a issue with the proxy server not being set up right

Rice Spice•2mo ago

Pobiega•2mo ago

the documentation for vite says that host: true tells the server to listen to all interfaces instead of just localhost

Rice Spice•2mo ago

this is what the tutorial says but this is also my first time using C#

Pobiega•2mo ago

this is not related to C# at all so far its javascript and vite you are having issues with

Rice Spice•2mo ago

should i include host:true?

Pobiega•2mo ago

give it a try

Rice Spice•2mo ago

i think it worked

Rice Spice•2mo ago

but giving weird errors

Rice Spice•2mo ago

ill give some stuff a try though

Pobiega•2mo ago

well yeah its trying to read some json, but your backend isnt running is my current guess at least I just set up a brand new frontend + backend to test this out

import { defineConfig } from "vite";
import solid from "vite-plugin-solid";

export default defineConfig({
  plugins: [solid()],
  server: {
    host: true,
    proxy: {
      "/api": {
        target: "http://localhost:5217",
        changeOrigin: true,
        secure: false,
      },
    },
  },
});

import { defineConfig } from "vite";
import solid from "vite-plugin-solid";

export default defineConfig({
  plugins: [solid()],
  server: {
    host: true,
    proxy: {
      "/api": {
        target: "http://localhost:5217",
        changeOrigin: true,
        secure: false,
      },
    },
  },
});

thats my vite config (I used solidJS instead of react, but thats the only difference) and in my frontend, I do (await fetch("api/test")).json(); that sends a request to the frontend server that matches the proxy pattern and is routed to my backend here is literally all of my backend code, for reference

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
    app.UseDeveloperExceptionPage();
}

app.MapGet("/api/test", () => new Pizza("Vesuvio", 2))
.WithName("GetPizza")
.WithOpenApi();

app.Run();

record Pizza(string Name, int Toppings);

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
    app.UseDeveloperExceptionPage();
}

app.MapGet("/api/test", () => new Pizza("Vesuvio", 2))
.WithName("GetPizza")
.WithOpenApi();

app.Run();

record Pizza(string Name, int Toppings);

(this a super minimal example, dont actually build backends like this :D) the changeOrigin turned out to be very important. I also ran my backend in http mode, so I disabled secure hope this helps @Rice Spice

Rice Spice•2mo ago

quick question Would you mind going through the tutorial? It hsouldn't take too long since you already work with this @Pobiega I looked through yours but tbh i have no idea what im looking at 😭

Pobiega•2mo ago

I would mind yeah :p

Gaming

Programming

Front stack help