react core boilerplate



説明

React Coreボイラープレートは、 ASP.NETコア3およびサーバー側のレンダリングを備えたユニバーサル/同型React Webアプリケーションを構築するための出発点です。すべてが箱から出して正常に動作します。また、初心者にも役立ちます。このプロジェクトには、偽の承認システムが含まれています。したがって、それをアイデンティティまたは他の人に変更することができます。
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ストアは、Reduxで開発を促進するためにRedux Toolkitに移住しました。削減コード。
• ロギングと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コアボイラープレートのJavaScriptバージョンを追加しました。 ？
• 安定性の修正。
• 重要な依存関係を更新しました。

v。1.6.3（2019-03-19）

• 不安定性のためにimage-webpack-loaderを削除しました。

v。1.6.2（2019-03-15）

• 安定したTerserプラグインをインストールしました。
• Reactおよびその他のパッケージを更新しました（タイプを含む）。
• WebPackを更新しました。
• 開発モードのWebpack設定を更新しました。

v。1.6.0（2019-03-13）

• v. 2.2への.NET Core依存関係を更新しました。
• 重要な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）

• 例にフルテキストライブ検索を追加しました。
• 追加されたWebpackプラグイン： case-sensitive-paths-webpack-plugin 、 react-dev-utils
• 例を備えたプラグインを追加：ライブ検索で頻繁にクエリを行うことを防ぐためのawesome-debounce-promise 、 formik涙なしでフォームを作成します。
• いくつかの機能エラーとテキストエラーを修正しました。

v。1.5.0（1）（2018-11-07）

• ホスティング設定を含み、生産ビルドで使用されるhosting.jsonを追加しました。
• bind-decoratorパッケージとそれに例を追加しました。
• Webパックバンドルビルのスピードアップ。
• 更新されたDomain-Waitパッケージ。この更新により、Isomorphic Fetchリクエストを2回呼び出すのを防ぐことができます（サーバープレレンダーでは、クライアント側で）。
• Redux-Thunkパッケージを更新しました。
• Webアプリケーションを構築するときに頭痛を防ぐための新しいReactコンポーネントを追加しました： ModalComponent 、 Input 、 MultiSelect 、 Form 。これらのコンポーネントは例で使用されています。

v。1.4.5（2018-11-02）

• 追加された新機能により、WebアプリケーションはブラウザのCookieをNodeServicesと共有できます。これで、SSRは認証されたユーザー用のHTMLコードを生成し、認証された同型リクエストを作成します。
• 追加のメソッドsendFormData ServiceBase.tsに追加されたため、ファイルをサーバーにアップロードできます。

v。1.3.5（2018-10-26）

• 更新されたNPMパッケージ： react 、 redux 、 react-router 。
• 新しいconnected-react-routerによってreact-router-redux非推奨のために置き換えます。
• 場合によっては問題があった固定Loaderコンポーネント。

v。1.3.2（2018-10-25）

• 未使用のNPMパッケージを削除しました。
• Package-lock.jsonを追加しました。
• 固定プロジェクト。

v。1.3.0（2018-10-22）

• 更新されたReactパッケージ。
• AppComponentコンポーネントを追加して、「詰まった」コンポーネントの「強制的な更新」を実行できます（ LoginPageのLoaderコンポーネント用）。
• ファイル（ logs/ディレクトリ）にログインし、AzureクラウドプロバイダーにログインするSerilog Loggerを追加しました。

v。1.2.1（2018-10-20）

• 場合によってはSSRと正しくなかった固定Loaderコンポーネント。

v。1.2.0（2018-10-18）

• 脆弱性による「ASP.NETコア」パッケージの依存関係を更新しました。
• Getおよび削除メソッドのために、JSONオブジェクトをURLクエリに渡すことができる追加機能。

v。1.1.0（2018-10-16）

• AppRouteコンポーネントを修正しました。 Reactルーターからのコンポーネントにパラマを渡すことで問題を解決しました。手動で修正したい場合は、こちらのコミットをご覧ください。

使用法

インストール

1. リンクごとに最新の.NETコアSDKとランタイムをインストールします。
2. 最新のstable node.jsのインストール
3. 最初の実行では、Visual Studioまたは別のIDEで実行されている場合は、プロジェクトを閉じる必要があります。コンソールおよび実行コマンドnpm installでプロジェクトのフォルダーを開きます。
4. プロジェクトのディレクトリで開発のために次のコマンドを実行します。メインバンドルとベンダーバンドルをコンパイルします。

npm run build:dev

5. Visual Studio 20XXを使用している場合、 IIS Express代わりに、 YourProjectNameまたはReactCoreBoilerplateを選択します。IISExpress IIS Express近くのダウン矢印をクリックして、Dockerまたはその他のオプションを選択します。
6. プロジェクトを構築して実行します。 Windowsコンソールで開始されます。

Webpackベンダーの構成を変更します

WebPackベンダーの構成を変更する場合は、ベンダーバンドルを手動で再コンパイルする必要があります。これを行うには、プロジェクトのディレクトリで次のコマンドを実行します。

npm run build:dev

Dockerで実行します

ビジュアルスタジオ20xx

ツールバーのDockerオプションを選択するだけです。

コンテナを構築します

プロジェクトのディレクトリで次のコマンドを実行します。

docker build -t [my image name] . 

ここで、 [my image name]はあなたのDocker画像名です。

HTTPSサポートを使用して、Windowsで生産コンテナを実行する（テスト用）

1. WindowsおよびMacOSのASP.NETコア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] - 証明書パスワード（1番目のステップから）、 [my image name] - Docker画像名。

要素

サードパーティライブラリ：

• TypeScript-タイプスクリプトに基づくすべてのフロントエンド。
• Fork-TS-Checker-Webpack-Plugin-別のプロセスでタイプスクリプトタイプチェッカーを実行するWebpackプラグイン。
• React-同型として機能したメインライブラリ。
• React Router -Reactのルーター。
• React -bootstrap -React用ブートストラップ4。
• React -Helmet-同型SEOヘルパー。
• Redux-ストア。
• Redux Toolkit -Reduxによる開発を強化するためのライブラリ。
• Formik-反応のためのフォームを構築するためのライブラリ。
• 接続Reactルーター - ReactルーターのReduxバインディング。
• SASS -CSSプリプロセッサ。
• Webpack 4-バンドラー。
• axios-同型フェッチUtil。
• TS-Nameof-フォームで入力のタイプセーフ名を使用できます。
• JSON-to-url-Getおよび削除メソッドのためにJSONオブジェクトをURLクエリに渡すことができます。
• Serilog-ファイル（ logs/ディレクトリ）にログインして、Azureクラウドプロバイダーにログインできます。

独自のライブラリ /固定フォーク：

• Domain-Wait-Async/Await Support and New機能を備えたドメインタスクの交換。
• NVAL-jQuery-validation-like vanilla js valibator。
• nval -tippy-素晴らしいツールチップを使用したバニラJS検証。
• NSERIALIZEJSON-バニラJSに基づくJSON Serializerへの柔軟なフォーム。

問題

既知の問題

• ./clientapp/styles/loaders/xxx.scss（./node_modules/css-loader/dist/cjs.js！[...]）：エラー：enoent：ensoent：scandir 'xxx node_modules node-sass vendor'
  プロジェクトのディレクトリでnpm iとnpm rebuild node-sass実行します。

• Webパックホットモジュールの交換[HMR]はIISでは動作しません
  修正されます。代わりに開発にはケストレルを使用してください。

• HTTPエラー500
  おそらく、node.jsの最新バージョンはありません。

• HTTPエラー502.5
  このリンクを使用して、最新の「ASP.NETコアSDK」と「ランタイムとホスティングバンドル」をインストールする必要があります：https：//www.microsoft.com/net/download/dotnet-core/2.1

• Azureでホストされている場合、HTTPエラー500
  azureの「アプリ設定」で「website_node_default_version」を6.11.2に設定します。

• 公開後に開発モードで実行するときのエラー
  npm run build:devコマンドをプロジェクトのdirで実行します。

その他の問題

• プロジェクトの開始に問題がある場合は、ログ（ "/logs"ディレクトリ）にエラーが表示されます。 Githubで問題を開く前にこれを行います。 Reactコアボイラープレートのバージョン（ JavaScriptまたはTypeScript ）に言及することを忘れないでください

ライセンス

mit