التمرين - البدء - Learn

3 دقائق

تنشر تطبيقات Azure Static Web Apps مواقع ويب على بيئة إنتاج من خلال إنشاء تطبيقات من مستودع GitHub. في هذا التمرين، ستقوم بإنشاء تطبيق ويب باستخدام إطار عمل الواجهة الأمامية المفضل لديك من مستودع GitHub.

إنشاء المستودع

هذه الوحدة تيسر عليك إنشاء مستودع جديد باستخدام مستودع قالب GitHub. تتوفر سلسلة من القوالب حيث يحتوي كل منها على تطبيق بدء تم إنشاؤه باستخدام إطار أمامي مختلف.

انتقل إلى «create from template page» لمستودع القالب. إذا ظهر خطأ 404 Page Not Found، فسجل الدخول إلى GitHub وحاول مرة أخرى.
إذا تمت مطالبتك بدخول المالك «Owner»، فاختر أحد حسابات GitHub لديك.
ضع اسمًا لمستودعك my-static-web-app.
حدد «Create repository from template».

شغل تطبيقك

لقد أنشأت للتو مستودع GitHub اسمه my-static-web-appفي حسابك على GitHub. بعد ذلك، ستنسخ المستودع وتُشغّل التعليمة البرمجية محلياً على جهاز الكمبيوتر الخاص بك.

افتح وحدة طرفية على جهاز الكمبيوتر الخاص بك.
ابدأ بنسخ مستودع GitHub على جهاز الكمبيوتر الخاص بك.
```
git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app
```
انتقل إلى مجلد التعليمات البرمجية المصدر.
```
cd my-static-web-app
```
بعد ذلك، انتقل إلى مجلد إطار عمل الواجهة الأمامية المفضل، كما يلي.
```
cd angular-app
```
```
cd react-app
```
```
cd svelte-app
```
```
cd vue-app
```
الآن، قم بتثبيت تبعيات التطبيق.
```
npm install
```
ملاحظة

إذا ظهر الخطأ «Cannot find path - Make sure you have installed Nodejs from: https://nodejs.org»، فقد يتعين عليك إعداد Custom setup يتضمن تثبيت الخيار «Add to PATH»

.
وأخيراً، شغّل تطبيق عميل الواجهة الأمامية.
```
npm start
```
```
npm start
```
```
npm run dev
```
```
npm run serve
```

استعرض تطبيقك

حان الوقت لتشاهد تطبيقك وهو يعمل محلياً. يتم تشغيل كل تطبيق أمامي على منفذ مختلف.

حدد الارتباط الذي تريد استعراضه للوصول إلى تطبيقك.

انتقل إلى http://localhost:4200.

Screenshot of browsing to your Angular web app. .

انتقل إلى http://localhost:3000.

Screenshot of browsing to your React web app. .

انتقل إلى http://localhost:5000.

Screenshot of browsing to your Svelte web app. .

انتقل إلى http://localhost:8080.

Screenshot of browsing to your Vue web app. .

ملاحظة

في تمارين هذه الوحدة، ستقوم بنشر تطبيق دون واجهة برمجة تطبيقات. راجع قسم Next steps في الوحدة النهائية للحصول على معلومات حول البرنامج التعليمي التالي، حيث ستنشر واجهة برمجة تطبيقات بجانب تطبيقك.

الآن، أوقف تشغيل التطبيق عن طريق الضغط على Ctrl-C في المحطة الطرفية.

الخطوات التالية

لقد قمت بإنشاء التطبيق الخاص بك والآن يعمل محليًا في المتصفح.

بعد ذلك، ستقوم بنشر التطبيق الخاص بك إلى Azure Static Web Apps.

متابعة