react core boilerplate



설명

React Core BoilerPlate은 ASP.NET Core 3 및 Server-Side 렌더링을 사용하여 Universal/Isomorphic React 웹 응용 프로그램을 구축하기위한 출발점입니다. 모두 상자에서 잘 작동합니다. 또한 초보자에게도 도움이됩니다. 이 프로젝트에는 가짜 인증 시스템이 포함되어 있습니다. 따라서 신원이나 다른 사람으로 변경할 수 있습니다.
TypeScript 및 JavaScript 버전을 사용할 수 있습니다

비주얼 스튜디오 마켓 플레이스

스크린 샷

변화

v. 2.0.3 (2020-07-03)

• Docker 지원이 추가되었습니다. ?
• Xuhaojun 덕분에 XSS 공격 방지를 추가했습니다.
• 업데이트 된 종속성, 미사용 네임 스페이스 제거.

v. 2.0.0 (2020-05-08)

• .NET Core 3.1 로 마이그레이션되었습니다. ?
• React-Bootstrap을 사용하여 Bootstrap 4 로 마이그레이션했습니다.
• Formik으로 마이그레이션되었습니다.
• Redux Stores는 Redux로 개발을 향상시키기 위해 Redux 툴킷으로 마이그레이션했습니다. 감소 된 코드.
• 로깅 및 Serilog 구성 개선.
• server-side rendering 에 HTTPS 지원이 추가되었습니다.
• SEO 경로에 편집 가능한 상태 코드가 추가되었습니다.
• 일부 종속성을 업데이트했습니다.
• 안정성 수정.
• 불필요한 NPM 종속성을 제거했습니다.

v. 1.7.1 (2019-06-02)

• 업데이트 된 React , Redux , React-Router 및 기타 NPM 패키지에 연결되었습니다.
• 중요한 NPM 종속성을 업데이트했습니다.
• 불필요한 NPM 종속성을 제거했습니다.

v. 1.7.0 (2019-05-05)

• 저장소 구조 조정.
• React Core Boilerplate의 JavaScript 버전을 추가했습니다. ?
• 안정성 수정.
• 비판적 종속성을 업데이트했습니다.

v. 1.6.3 (2019-03-19)

• 불안정성으로 인해 image-webpack-loader 제거되었습니다.

v. 1.6.2 (2019-03-15)

• 안정적인 Terser 플러그인이 설치되었습니다.
• React 및 기타 패키지 업데이트 (유형 포함).
• 업데이트 된 WebPack .
• 개발 모드를위한 업데이트 된 웹 팩 구성.

v. 1.6.0 (2019-03-13)

• .NET Core 종속성을 v. 2.2 로 업데이트했습니다.
• 중요한 NPM 패키지를 업데이트했습니다.
• 업데이트 된 WebPack 종속성.
• 개선 된 WebPack 공급 업체 및 번들 구성.
• 시나리오 구축 및 출판을위한 .csproj 파일 향상.
• 개발 모드에서 고정 소스 맵 생성.
• 생산 모드에서 번들 컴파일을 수정했습니다.
• 다른 안정성 수정.

v. 1.5.4 (2019-02-04)

• 사소한 기능을 추가했습니다.
• 버그 수정 : collapsing of the Bootstrap navigation bar , fixed controller and frontend's service in person update case 의 붕괴.
• 업데이트 된 종속성.

v. 1.5.3 (2018-12-04)

• IE9, IE11 : @babel/polyfill , custom-event-polyfill 지원하기위한 폴리 필드를 추가했습니다.
• 업데이트 된 종속성.

v. 1.5.2 (2018-12-01)

• 예제에 FullText 라이브 검색이 추가되었습니다.
• 웹 팩 플러그인 추가 : case-sensitive-paths-webpack-plugin , react-dev-utils
• 예제가 포함 된 플러그인을 추가했습니다 : 라이브 검색에서 빈번한 쿼리를 방지하기 formik awesome-debounce-promise 곤경 검사를 방지합니다.
• 기능 및 텍스트 오류가 수정되었습니다.

v. 1.5.0 (1) (2018-11-07)

• 호스팅 설정이 포함되어 있고 생산 빌드에 사용될 hosting.json 추가됩니다.
• bind-decorator 패키지 및 예제를 추가했습니다.
• 웹 팩 번들 빌딩 속도가 빨라졌습니다.
• 업데이트 된 도메인 웨이트 패키지. 이 업데이트를 사용하면 동형 페치 요청을 두 번 요청하는 것을 방지 할 수 있습니다 (서버 프레젠더에서 및 클라이언트 측에서).
• Redux-Thunk 패키지 업데이트.
• 웹 애플리케이션을 구축 할 때 두통을 방지하기 위해 새로운 React 구성 요소가 추가되었습니다 : ModalComponent , Input , MultiSelect , Form . 이 구성 요소는 예제에 사용됩니다.

v. 1.4.5 (2018-11-02)

• 새로운 기능이 추가되면 웹 애플리케이션이 Browser의 쿠키를 노드 서비스와 공유 할 수 있습니다. 이제 SSR은 인증 된 사용자를위한 HTML 코드를 생성하고 인증 된 동형 요청을 만듭니다.
• 추가 메소드 sendFormData ServiceBase.ts 에 서버에 업로드 할 수 있습니다.

v. 1.3.5 (2018-10-26)

• 업데이트 된 NPM 패키지 : react , redux , react-router .
• 새로운 Connected- react-router-redux connected-react-router 레드로 인해 교체되었습니다.
• 경우에 따라 문제가있는 Loader 구성 요소가 고정되었습니다.

v. 1.3.2 (2018-10-25)

• 사용하지 않은 NPM 패키지를 제거했습니다.
• Package-lock.json이 추가되었습니다.
• 고정 프로젝트.

v. 1.3.0 (2018-10-22)

• 반응 패키지 업데이트.
• "고정 된"구성 요소의 "포스 업데이트"를 수행 할 수있는 AppComponent 구성 요소를 추가했습니다 ( LoginPage 의 Ex. Loader 구성 요소의 경우).
• 파일에 로그인하는 Serilog Logger ( logs/ 디렉토리) 및 Azure Cloud 제공 업체에 추가되었습니다.

v. 1.2.1 (2018-10-20)

• 경우에 따라 SSR로 잘못 작동 한 Loader 구성 요소가 고정되었습니다.

v. 1.2.0 (2018-10-18)

• 취약성으로 인해 "ASP.NET Core"패키지의 종속성을 업데이트했습니다.
• Get and Delete 메소드를 위해 JSON 객체를 URL 쿼리로 전달할 수있는 추가 기능.

v. 1.1.0 (2018-10-16)

• AppRoute 구성 요소를 수정했습니다. 반응 라우터의 구성 요소에 매개 변수를 전달하는 문제 해결 문제. 수동으로 수정하려면 여기에서 커밋을 참조하십시오.

용법

설치

1. Link로 최신 .NET Core SDK 및 런타임을 설치하십시오.
2. 최신 안정 Node.js의 설치
3. 첫 번째 실행에서는 프로젝트가 Visual Studio 또는 다른 IDE에서 실행되면 프로젝트를 닫아야합니다. 콘솔에서 프로젝트 폴더를 열고 명령 npm install 실행하십시오.
4. 프로젝트 디렉토리에서 개발을 위해 다음 명령을 실행하십시오. 메인 및 공급 업체 번들을 컴파일합니다.

npm run build:dev

5. IIS Express 대신 Visual Studio 20XX를 사용하는 경우 YourProjectName 또는 ReactCoreBoilerplate 선택하십시오. IIS Express 근처의 아래쪽 화살표를 클릭하고 Docker 또는 기타 옵션을 선택하십시오.
6. 프로젝트를 구축하고 실행하십시오. Windows 콘솔에서 시작됩니다.

웹 팩 공급 업체 구성을 수정하십시오

Webpack Vendor Config를 수정하면 공급 업체 번들을 수동으로 다시 컴파일해야합니다. 프로젝트 디렉토리에서 다음 명령을 실행하려면 다음을 수행하십시오.

npm run build:dev

Docker와 함께 실행하십시오

Visual Studio 20xx

도구 모음에서 Docker 옵션을 선택하십시오.

컨테이너를 만듭니다

프로젝트 디렉토리에서 다음 명령을 실행하십시오.

docker build -t [my image name] . 

여기서 [my image name] 은 Docker 이미지 이름입니다.

HTTPS 지원 (테스트 용)으로 Windows에서 생산 컨테이너를 실행하십시오.

1. Windows 및 MacOS에서 ASP.NET Core HTTPS 개발 인증서를 신뢰하십시오.

dotnet dev-certs https -ep %USERPROFILE% . aspnet h ttps a spnetapp.pfx -p [my password]

여기서 [my password] 는 당신의 비밀번호입니다.
2. 실행 :

dotnet dev-certs https --trust

3. 컨테이너를 만듭니다.
4. 실행하다:

docker run --rm -it -p 7000:7000 -p 7001:7001 -e ASPNETCORE_URLS= " https://+;http://+ " -e ASPNETCORE_Kestrel__Certificates__Default__Password= " [my password] " -e ASPNETCORE_Kestrel__Certificates__Default__Path=/https/aspnetapp.pfx -v %USERPROFILE% . aspnet h ttps:/https/ [my image name]

여기서 [my password] - 인증서 비밀번호 (첫 번째 단계에서), [my image name] - Docker 이미지 이름.

강요

타사 라이브러리 :

• TypeScript- TypeScript를 기반으로 한 모든 프론트 엔드.
• Fork-Ts-Checker-Webpack-Plugin- 별도의 프로세스에서 TypeScript 유형 검사기를 실행하는 웹 팩 플러그인.
• React- 등방성으로 일한 메인 라이브러리.
• 반응 라우터 - 반응 용 라우터.
• React -Bootstrap -Bootstrap 4 용 React.
• React -Helmet- 동형 SEO 도우미.
• Redux- 상점.
• Redux Toolkit- Redux로 개발을 촉진하기위한 라이브러리.
• Formik- 반응을위한 구축 양식을위한 도서관.
• 연결된 반응 라우터 - React 라우터에 대한 Redux 바인딩.
• SASS -CSS 전 처리기.
• 웹 팩 4 -Bundler.
• axios- 이소성 페치 util.
• TS-NAMEOF- 양식에서 입력 유형 이름 이름을 사용할 수 있습니다.
• JSON-to-url- get and 삭제 메소드를 위해 JSON 객체를 URL 쿼리로 전달할 수 있습니다.
• Serilog- 파일 ( logs/ 디렉토리) 및 Azure Cloud 제공 업체에 로그인 할 수 있습니다.

자체 라이브러리 / 고정 포크 :

• 도메인 사망-Async/Await 지원 및 새로운 기능을 갖춘 도메인 작업 교체.
• NVAL- jQuery-validation-like Vanilla JS Validator.
• NVAL -TIPPY- 멋진 툴팁을 사용한 바닐라 JS 유효성 검사.
• nserializejson- 바닐라 JS를 기반으로 JSON 시리얼 라이저에 유연한 형태.

문제

알려진 문제

• ./clientapp/styles/loaders/xxx.scss (./node_modules/css-loader/dist/cjs.js!
  npm i 및 npm rebuild node-sass .

• Webpack Hot Module Replacement [HMR]는 IIS에서 작동하지 않습니다
  고정됩니다. 대신 개발에 Kestrel을 사용하십시오.

• HTTP 오류 500
  아마도 당신은 node.js의 최신 버전이 없을 것입니다.

• HTTP 오류 502.5
  https://www.microsoft.com/net/download/dotnet-core/2.2.

• Azure에서 호스팅 된 경우 HTTP 오류 500
  Azure의 "앱 설정"에서 "website_node_default_version"을 6.11.2로 설정하십시오.

• 게시 후 개발 모드에서 실행할 때 오류
  npm run build:dev Command를 프로젝트 DIR에서 실행하십시오.

다른 문제

• 프로젝트 시작에 문제가있는 경우 로그 ( "/logs"디렉토리)에서 오류가 표시됩니다. Github에서 열기 전에이 작업을 수행하십시오. React Core Boilerplate ( JavaScript 또는 TypeScript )의 버전을 언급하는 것을 잊지 마십시오.

특허

MIT