How to route from one nx app to another nx app on a different localhost port with react router dom

Question

I have a login page in an NX app called admin, when the login is successful I want to redirect the user to my other NX app terminal running on a different port. Admin is running on localhost:4200 and terminal on localhost:4100.

I already tried to achieve this with useNavigate(/terminal) and a reverseproxy that redirects /terminal to localhost:4100. When I login on the loginpage I only get redirected to localhost:4200/terminal but I need to get redirected to just localhost:4100. this is my login page

This is my Login Page:

import { MouseEvent, useState } from 'react';
import styles from './login-form.module.scss';
import { useLogin } from '../../api/use-login';
import classNames from 'classnames';
import { Icon } from '@iconify/react';
import {useNavigate} from "react-router-dom";




/* eslint-disable-next-line */
export interface LoginFormProps {}

export function LoginForm(props: LoginFormProps) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);

  const [loginError, login] = useLogin();

  const navigate = useNavigate();


  const handleSubmit = async (e: MouseEvent) => {
    e.preventDefault();
   try {
     await login({ username, password });
     navigate("/terminal");

   } catch (error: any){
     console.log(error.message);
   }

  };

  return (
    <form className={styles['container']}>
      {/* username */}
      <div className="form-field">
        <Icon icon="carbon:user" className="prefix"></Icon>
        <input
          id="username"
          type="text"
          value={username}
          placeholder="Username"
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>

      {/* password */}
      <div className="form-field form-field-group">
        <Icon icon="carbon:password" className="prefix"></Icon>
        <input
          id="password"
          type={showPassword ? 'text' : 'password'}
          value={password}
          placeholder="Password"
          onChange={(e) => setPassword(e.target.value)}
        />
        <button
          type="button"
          title={showPassword ? 'hide password' : 'reveal password'}
          onClick={() => setShowPassword(!showPassword)}
        >
          <Icon icon={showPassword ? 'carbon:view-off' : 'carbon:view'}></Icon>
        </button>
      </div>

      {/* login error */}
      {loginError && (
        <div className={classNames('error icon', styles['error'])}>
          <Icon icon="carbon:warning"></Icon>
          {loginError}
        </div>
      )}



      {/* login */}
      <button
        type="submit"
        className="secondary fill inline-icon"
        onClick={handleSubmit}
      >
        <Icon icon="carbon:login"></Icon>
        <span>Login</span>
      </button>

    </form>
  );
}

export default LoginForm;

This is my reverse proxy:

{
  "/api/events": {
    "target": "http://localhost:3333",
    "secure": false
  },
  "/api/login": {
    "target": "http://localhost:3334",
    "secure": false
  },
  "/api/verify": {
    "target": "http://localhost:3334",
    "secure": false
  },
  "/api/users": {
    "target": "http://localhost:3334",
    "secure": false
  },
  "/terminal": {
  "target": "http://localhost:4100",
  "secure": false
  },
  "/admin": {
    "target": "http://localhost:4200",
    "secure": false
  }
}

score 0 · Answer 1 · answered May 18 '23 at 05:05

react-router will only navigate within one React app, if you need to imperatively navigate to an external URL you can use window.open or redirect by setting the window.location.href value.

Examples:

const handleSubmit = async (e: MouseEvent) => {
  e.preventDefault();
  try {
    await login({ username, password });
    window.open("http://localhost:4100/terminal", "_self", "noreferrer");
  } catch (error: any){
    console.log(error.message);
  }
};

or

const handleSubmit = async (e: MouseEvent) => {
  e.preventDefault();
  try {
    await login({ username, password });
    window.location.href = "http://localhost:4100/terminal";
  } catch (error: any){
    console.log(error.message);
  }
};

How to route from one nx app to another nx app on a different localhost port with react router dom

1 Answers1