Remix 프로젝트 생성

프로젝트 생성

Remix도 React, Next.js처럼 간단한 명령줄 하나만 입력하면 프로젝트를 간편하게 생성할 수 있도록 되어있다. 아래 명령어를 입력한다.

	npx creat-remix@latest
	

그러면 어느 폴더에 새로운 프로젝트를 만들것인지 물어보는데 나는 study폴더안에 my-remix-app 이름으로 입력하였다. 프로젝트 위치는 자유롭게 설정해주면 된다.

그 이후에는 git repository를 초기화 할것인지 물어보는데 추천이 yes이므로 yes를 선택한다.

그런 다음 npm을 사용해서 기본 패키지들의 설치유무를 물어보는데 필자는 npm대신 yarn을 사용하기 때문에 No를 선택했다.

그럼 바로 프로젝트가 생성이 된 모습을 확인할 수 있다.

이제 생성된 프로젝트로 이동을 한다음 yarn intall 혹은 yarn으로 패키지 설치를 진행해주자. 두개의 명령어의 동작은 동일하다.

프로젝트 시작

프로젝트를 생성해보았으니 yarn dev명령어를 입력하여 프로젝트를 실행해보자.

짜잔 웹페이지 localhost:5173으로 접속하면 아름다운 Remix의 화면을 확인할 수 있다.

번외

기본 포트 변경하기

Remix에서 기본적으로 Vite를 사용하고 있어서 기본 5173포트를 사용하고 있다. 혹시나 Vite가 궁금하다면 Vite 프로젝트 생성을 확인하면 된다.

포트번호를 변경하고 싶다면, vite.config.ts파일에 한줄만 추가해주면된다.

• vite.config.ts

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

declare module "@remix-run/node" {
  interface Future {
    v3_singleFetch: true;
  }
}

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
        v3_singleFetch: true,
        v3_lazyRouteDiscovery: true,
      },
    }),
    tsconfigPaths(),
  ],
  server: {
    port: 3000, // 포트번호 3000으로 변경
  }
});

Hot Reload 에러

Remix 프로젝트를 실행하고 저장을 하면 바로 반영이 되어야하는데 콘솔창에 다음과 같은 에러가 발생하는 경우가 있다.

Error: No route matches URL "/.well-known/appspecific/com.chrome.devtools.json"
    at getInternalRouterError (C:\Users\song\Desktop\study\my-remix-app\node_modules\@remix-run\router\router.ts:5550:5)
    at Object.query (C:\Users\song\Desktop\study\my-remix-app\node_modules\@remix-run\router\router.ts:3562:19)
    at handleDocumentRequest (C:\Users\song\Desktop\study\my-remix-app\node_modules\@remix-run\server-runtime\dist\server.js:313:35)
    at requestHandler (C:\Users\song\Desktop\study\my-remix-app\node_modules\@remix-run\server-runtime\dist\server.js:170:24)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at nodeHandler (C:\Users\song\Desktop\study\my-remix-app\node_modules\@remix-run\dev\dist\vite\plugin.js:859:27)
    at C:\Users\song\Desktop\study\my-remix-app\node_modules\@remix-run\dev\dist\vite\plugin.js:862:15
No routes matched location "/.well-known/appspecific/com.chrome.devtools.json" 
ErrorResponseImpl {
  status: 404,
  statusText: 'Not Found',
  internal: true,
  data: 'Error: No route matches URL "/.well-known/appspecific/com.chrome.devtools.json"',
  error: Error: No route matches URL "/.well-known/appspecific/com.chrome.devtools.json"
      at getInternalRouterError (C:\Users\song\Desktop\study\my-remix-app\node_modules\@remix-run\router\router.ts:5550:5)
      at Object.query (C:\Users\song\Desktop\study\my-remix-app\node_modules\@remix-run\router\router.ts:3562:19)
      at handleDocumentRequest (C:\Users\song\Desktop\study\my-remix-app\node_modules\@remix-run\server-runtime\dist\server.js:313:35)
      at requestHandler (C:\Users\song\Desktop\study\my-remix-app\node_modules\@remix-run\server-runtime\dist\server.js:170:24)
      at processTicksAndRejections (node:internal/process/task_queues:105:5)
      at nodeHandler (C:\Users\song\Desktop\study\my-remix-app\node_modules\@remix-run\dev\dist\vite\plugin.js:859:27)
      at C:\Users\song\Desktop\study\my-remix-app\node_modules\@remix-run\dev\dist\vite\plugin.js:862:15
}

이는 Chrome DevTools에서 요청하여 만들어졌고 서버측에서 이 요청을 막을 방법은 없다고 한다.

이를 해결하는 방법은 vite-plugin-devtools-json을 사용하거나 직접 파일을 만드는 방법이 있는데 필자는 파일을 만드는 방법으로 해결해 보았다.

• 파일 생성
  아래의 경로에 [.]well-known.appspecific.[com.chrome.devtools.json].tsx 파일의 이름을 생성한다.

app/
├── routes/
│   ├── [.]well-known.appspecific.[com.chrome.devtools.json].tsx
│   ├── _index.tsx
└── root.tsx

• 파일 내용
  [.]well-known.appspecific.[com.chrome.devtools.json].tsx파일 안에 다음과 같은 내용을 넣어준다.

import path from 'path';

export const loader = async () => {
    const jsonData = {
       workspace: {
           root: path.resolve(),
           uuid: 'my-uuid-xxx',
       }
    };
    return Response.json(jsonData);
};

그리고 실행한뒤 파일을 수정하고 저장하면 정상적으로 Hot Reload가 되는것을 확인할 수 있다.

혹시 Chrome DevTools 요청한 내용이 궁금하면 Automatic Workspace Folders를 확인해보자.

참고

https://remix.run/docs/en/main/start/quickstart
https://remix.run/docs/en/main/guides/vite#setup-vite
https://stackoverflow.com/questions/79629915/well-known-appspecific-com-chrome-devtools-json-request