How to fake local domain?

Overview

Sometimes you need to fake domain on your local dev server. There are various of reasons to do it.

One of them is the situation when your deployed backend can receive requests only from specific domain.
But you need to test your frontend before deploying. Instead of changing security rules on your backend, you can fake local domain to production one. Let’s see how to do it.

Solution for Vite

In the vite.config.ts file, add the following code:

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  server: {
    host: "fakedomain.com", // <---- here is your domain
  },
});

But if you try to run the dev server now, it will not work. You need to edit your hosts file.

Add into your hosts file 127.0.0.1 fakedomain.com.
If you are a Mac user, you can find it in /etc/hosts.

Of course, instead of fakedomain.com, you need to add your domain which you want to fake.

That’s it, now if you try to run server with npm run dev, it will work.

Sometimes you need to fake domain on your local dev server. There are various of reasons to do it.

Bonus level

You can also use mkcert from vite-plugin-mkcert plugin to fake https connection.

Install dependency:

npm install -D vite-plugin-mkcert

Add dependency to your vite.config.ts:

import path from "path";

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import mkcert from "vite-plugin-mkcert";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), mkcert()], // <---- add the plugin
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  server: {
    host: "editor.crev.ai",
  },
});

That’s it, now if you try to run server with npm run dev, it will run the server with https.