react core boilerplate



وصف

React Core Boilerplate هي نقطة انطلاق لبناء تطبيقات الويب العالمية/المتسوية مع ASP.NET Core 3 وتقديم جانب الخادم. كل شيء يعمل بشكل جيد خارج الصندوق. كما أنه مفيد للمبتدئين. يحتوي المشروع على نظام تفويض مزيف. لذلك يمكنك تغييره إلى الهوية أو الأخرى.
تتوفر إصدارات TypeScript و JavaScript.

Visual Studio Marketplace

لقطات الشاشة

التغييرات

v. 2.0.3 (2020-07-03)

• وأضاف دعم Docker. ؟
• وأضاف الوقاية من الهجوم XSS ، وذلك بفضل Xuhaojun.
• تبعيات محدثة ، وإزالة مساحات الأسماء غير المستخدمة.

v. 2.0.0 (2020-05-08)

• هاجر إلى .NET Core 3.1 . ؟
• انتقلت إلى Bootstrap 4 باستخدام رد الفعل-bootstrap.
• هاجر إلى فورميك.
• تم ترحيل متاجر Redux إلى مجموعة أدوات Redux لتعزيز التطوير مع Redux. كود مخفض.
• تسجيلات التسجيل والتكوين Serilog .
• تمت إضافة دعم HTTPS لتقديم server-side rendering .
• تمت إضافة رمز الحالة القابل للتحرير في طرق كبار المسئولين الاقتصاديين.
• تم تحديث بعض التبعيات.
• إصلاحات الاستقرار.
• إزالة التبعيات NPM غير ضرورية.

v. 1.7.1 (2019-06-02)

• React المحدث ، Redux ، React-Router وحزم NPM الأخرى المتصلة بها.
• تحديث تبعيات NPM الحرجة.
• إزالة التبعيات NPM غير ضرورية.

v. 1.7.0 (2019-05-05)

• إعادة هيكلة المستودع.
• تمت إضافة إصدار JavaScript من Boilerplate Core React. ؟
• إصلاحات الاستقرار.
• تحديث التبعيات الحرجة.

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)

• تم تحديث .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 Live Search إلى مثال.
• مكونات 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 والأمثلة معها.
• تسريع من بناء حزمة webpack.
• تحديث حزمة نقل المجال. يتيح لك هذا التحديث منع طلب طلبات الجلب المتماثل مرتين (في Prerender الخادم وبعد ذلك - على جانب العميل).
• تحديث حزمة Redux-thunk.
• تمت إضافة مكونات React الجديدة لمنع الصداع عند إنشاء تطبيقات الويب: ModalComponent ، Input ، MultiSelect ، Form . يتم استخدام هذه المكونات في أمثلة.

v. 1.4.5 (2018-11-02)

• تتيح ميزة جديدة إضافة لتطبيق الويب مشاركة ملف تعريف الارتباط للمتصفح باستخدام خدمات العقد. الآن تقوم SSR بإنشاء رمز HTML للمستخدمين المصادق عليه ويقوم بتقديم طلبات متماثلة متماثلة.
• تمت إضافة Method sendFormData إلى ServiceBase.ts التي تتيح لك تحميل الملفات على الخادم.

v. 1.3.5 (2018-10-26)

• تحديث حزم NPM: react ، redux ، react-router .
• تم استبداله بسبب إهمال 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 الذي يسمح لك بالقيام بـ "تحديث القوة" للمكونات "المعلقة" (لمكون Loader على سبيل المثال في LoginPage ).
• تمت إضافة Logger Serilog التي تسجل ملفات ( logs/ دليل) وأيضًا في مزود Azure Cloud.

v. 1.2.1 (2018-10-20)

• مكون Loader ثابت يعمل غير صحيح مع SSR في بعض الحالات.

v. 1.2.0 (2018-10-18)

• تحديث التبعية لحزمة "ASP.NET Core" بسبب الضعف.
• تمت إضافة ميزة تتيح لك تمرير كائنات JSON إلى استعلام عناوين URL لطرق الحصول على وحذفها.

v. 1.1.0 (2018-10-16)

• مكون ثابت AppRoute . تم حل المشكلة مع تمرير المعلمات إلى مكونات من جهاز توجيه React. إذا كنت ترغب في إصلاحه يدويًا ، راجع الالتزام هنا.

الاستخدام

تثبيت

1. تثبيت أحدث .NET Core SDK ووقت التشغيل بواسطة Link.
2. تثبيت أحدث node.js.
3. في المدى الأول ، يجب عليك إغلاق المشروع إذا تم تشغيله في Visual Studio أو IDE آخر. افتح مجلد المشروع في وحدة التحكم وتثبيت npm install .
4. قم بتنفيذ الأمر التالي للتطوير في دليل مشروعك. وسوف تجمع حزمة البائع الرئيسية والبائع.

npm run build:dev

5. إذا كنت تستخدم Visual Studio 20xx ، فبدلاً من IIS Express ، حدد اسم YourProjectName أو ReactCoreBoilerplate : انقر فوق السهم لأسفل بالقرب من IIS Express واختر Docker أو خيار آخر.
6. بناء وتشغيل المشروع. سيبدأ في وحدة التحكم في Windows.

تعديل تكوين بائع WebPack

إذا قمت بتعديل تكوين بائع WebPack ، فيجب عليك إعادة ترجمة حزمة البائع يدويًا. قم بتنفيذ الأمر التالي في دليل مشروعك للقيام بذلك:

npm run build:dev

تشغيل مع Docker

Visual Studio 20xx

فقط حدد خيار Docker في شريط الأدوات.

بناء حاوية

قم بتنفيذ الأمر التالي في دليل مشروعك:

docker build -t [my image name] . 

حيث [my image name] هو اسم صورة Docker الخاص بك.

قم بتشغيل حاوية إنتاج على Windows مع دعم HTTPS (للاختبار)

1. الثقة في شهادة تطوير HTTPS Core ASP.NET على Windows و MacOS:

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-WebPack Plugin يقوم بتشغيل مدقق نوع TypeScript في عملية منفصلة.
• React - المكتبة الرئيسية التي عملت كـ isomorphic.
• رد الفعل - جهاز التوجيه للرد.
• React -Bootstrap - Bootstrap 4 للتفاعل.
• رد الفعل - هيلميت - مساعدين كبار المسئولين الاقتصاديين المتماثل.
• Redux - متجر.
• Redux Toolkit - مكتبة لتعزيز التطوير مع Redux.
• Formik - مكتبة لبناء نماذج للتفاعل.
• ROUTER Connection React - REDUX RINDING لجهاز التوجيه React.
• Sass - CSS Preprocessor.
• WebPack 4 - Bundler.
• axios - isomorphic fetch atil.
• TS-NAMEOF-يتيح لك استخدام أسماء آمنة للمدخلات في النموذج.
• JSON-TO-URL-يتيح لك تمرير كائنات JSON إلى استعلام عناوين URL للطرق والحذف.
• Serilog - يتيح لك تسجيل الدخول إلى الملفات ( logs/ دليل) وأيضًا في مزود Azure Cloud.

المكتبات الخاصة / الشوكات الثابتة:

• نقل المجال-استبدال المهام المجال بدعم Async/Await والميزات الجديدة.
• NVAL-JQUERY-VINECTIVE-EACH-VANILLA JS Validator.
• NVAL -TIPPY - التحقق من صحة الفانيليا JS مع تلميحات أدوات رهيبة.
• nserializejson - شكل مرن لـ JSON Serializer على أساس الفانيليا JS.

مشاكل

القضايا المعروفة

• خطأ في ./clientapp/styles/loaders/xxx.scss (./node_modules/css-loader/dist/cjs.js!
  تنفيذ npm i و npm rebuild node-sass في دليل مشروعك.

• استبدال وحدة WebPack Hot Module [HMR] لا يعمل مع IIS
  سيتم إصلاحه. استخدم Kestrel للتنمية بدلاً من ذلك.

• HTTP خطأ 500
  ربما ليس لديك أحدث إصدار من Node.js.

• خطأ HTTP 502.5
  يجب عليك تثبيت أحدث "ASP.NET Core SDK" و "Runtime and Hosting Bundle" باستخدام هذا الرابط: https://www.microsoft.com/net/download/dotnet-core/2.1

• HTTP Error 500 عند استضافته في Azure
  قم بتعيين "website_node_default_version" إلى 6.11.2 في "إعدادات التطبيق" في Azure.

• الأخطاء عند التشغيل في وضع التطوير بعد النشر
  تنفيذ npm run build:dev Command in the Project's Dir.

قضايا أخرى

• إذا كان لديك أي مشكلة في بدء المشروع ، فيمكنك رؤية أخطاء في السجلات (دليل "/سجلات"). من فضلك ، افعل هذا قبل فتح مشكلة على جيثب. لا تنس أن تذكر إصدار Boilerplate React Core ( JavaScript أو TypeScript )

رخصة

معهد ماساتشوستس للتكنولوجيا