• Главная
  • Игрушки ребенку
  • Навигаторы
  • Мужская обувь
  • Женская обувь
  • Сушилка
  • Брюки
  • Новости

    • Кутняя SEO зроблена правільна з Серверны Rendering [Live Demo]

    1. Навошта з кутняй SEO? Ня Кутні Google спінкі?
    2. Як апрацоўваць вуглавыя пытанні SEO
    3. Тэхнічнае кіраўніцтва: Кутні SEO дружалюбнага SPA прыклад з універсальным
    4. Настройка асяроддзя распрацоўкі
    5. 1. Настройка структуры праекта, выкарыстоўваючы кутнюю CLI
    6. 2. Стварэнне першага кампанента Кутняе
    7. 2,1 Дражніла спіс прадуктаў
    8. 3. Выснова спісу прадуктаў для прыкладання
    9. 4. Даданне да маршрутызацыі вуглавога прыкладання
    10. 5. Стварэнне кампанента прадукту
    11. 6. Інтэграцыя функцыянальных магчымасцяў кошыка пакупак
    12. 7. Выкарыстанне Вуглавая універсальная для SEO
    13. 7.1 Усталёўка Кутні Універсальны
    14. 7.2 Рэдагаванне кліенцкага прыкладання
    15. 7.3 Настройка сервера
    16. 7.4 Зборка і запуск прыкладання
    17. GitHub РЭПО і дэма
    18. закрыццё думкі

    У спешцы? прапусціць тэхнічнае навучальны дапаможнік або дэма ,

    JavaScript Google, поўзае і рэндэрынг яшчэ некалькі незразумелым пытанне.

    Супярэчлівыя заявы і эксперыменты сустракаюцца па ўсім Інтэрнэту.

    Дык што ж гэта азначае?

    Як распрацоўшчык, вы павінны аптымізаваць сайты , створаныя з дапамогай папулярных рамак JS для SEO.

    Маючы гэта на ўвазе, вось трэцяя частка нашага пастаяннага JavaScript Frameworks пытанні SEO серыі:

    1. Пабудова Vue.js прыкладанне папярэдне сфарміравана
    2. Ужываючы Рэагаваць SEO з Next.js ,
    3. Тут я буду вырашаць Кутні SEO.

    Дакладней, мы будзем крафт сервера рендеренных Кутні электроннай камерцыі SPA з выкарыстаннем Universal.

    Вось крокі, якія мы будзем выкарыстоўваць для дасягнення гэтай мэты:

    1. Настройка Кутняе праекта.
    2. Стварэнне кутніх кампанент.
    3. Ўключэнне функцыі электроннай камерцыі на нашым SPA.
    4. Выкарыстанне Універсал, каб зрабіць наша дадатак Кутні SEO дружалюбным

    Гэта павінна быць весела!

    Навошта з кутняй SEO? Ня Кутні Google спінкі?

    вуглаваты з'яўляецца адкрытым зыходным кодам рамкі JS, распрацаваная інжынерамі Google у 2010 годзе.

    Гэта выдатна, каб скончыць ваш безгаловы стэк або любой JAMstack па гэтым пытанні. Але яна па-ранейшаму падзяляе агульныя пытанні SEO вядомых фреймворков.

    JS адну старонку прыкладання дадаць кантэнт на старонкі дынамічна з дапамогай JavaScript. Гэта не з'яўляецца аптымальным для SEO: Шукальнікі, хутчэй за ўсё, не будзе працаваць код JS, такім чынам, не сустракаючы фактычнае ўтрыманне старонкі.

    Па стане на 2018 года, слова ў тым, што Google можа сканаваць і зрабіць JavaScript запоўненых старонак, такім чынам, чытаючы іх як сучасныя браўзэры. хоць цытаты з гіганцкіх сам зрабіць мяне не так аптымістычны:

    «Часы змяніліся. Сёння, да таго часу, пакуль вы не блакуе Googlebot сканаваць вашыя JavaScript або CSS файлы, мы, як правіла, у стане вынесці і зразумець вашыя вэб-старонкі, такія як сучасныя браўзэры.»

    «Часам рэчы не ідуць выдатна падчас рэндэрынгу, што можа негатыўна паўплываць на вынікі пошуку для вашага сайта.»

    «Часам JavaScript можа быць занадта складаным альбо аркан для нас, каб выканаць, у гэтым выпадку мы не можам у поўнай меры і дакладна адлюстраваць старонку.»

    У той час як Google спрабуе зрабіць вашыя JS, ён усё яшчэ б'е ўсе іншы пошук ці сацыяльныя сканеры (Facebook, Twitter, LinkedIn). Аптымізацыя рэндэрынгу вашага прыкладання, такім чынам, прынесці карысць вашай дзейнасці на гэтых каналах таксама!

    Гэта занадта шмат неиндексированного ўтрымання JavaScript, каб пакінуць на стале.

    Як апрацоўваць вуглавыя пытанні SEO

    Для вашага вуглавога сайта, каб знайсці свой шлях у верхняй частцы вынікаў пошуку, вам трэба паставіць у нейкай працы.

    → Fetch , як Google

    Калі ў вас ужо ёсць Кутняе грамадскае прыкладанне, з галавы да Google Search Console і запусціць Fetch , як Google на старонках, якія маюць патрэбу ў індэксацыі. Ён скажа вам, што Googlebots можа ці не можа атрымаць доступ.

    Гэта дасць вам прадстаўленне аб тым, якія вобласці маюць патрэбу некаторыя SEO працы.

    Спосабы зрабіць гэта на самай справе не адрозніваюцца ад таго, што мы ўжо бачылі, з Vue або Рэагаваць, але інструменты робяць.

    → Папярэдняя візуалізацыя

    Гэта адзін даволі проста. JavaScript адлюстроўваецца ў браўзэры; статычны HTML захоўваецца і вяртаецца да сканэра. Гэта рашэнне выдатна падыходзіць для простых прыкладанняў, якія не належаць на любым серверы. Гэта прасцей у ўстаноўцы, чым на боку сервера візуалізацыі, з вялікімі вынікамі SEO, тым не менш.

    Для кутні папярэдняй візуалізацыі, я прапаную глядзець на Prerender.io ,

    → На баку сервера візуалізацыі

    Гэта тое, што я буду тут рабіць.

    Я буду выкарыстоўваць SSR, выкарыстоўваючы кутняя Універсальны ,

    Прасцей кажучы, гэта будзе працаваць Кутняе на ўнутраным інтэрфейсе, так што пры выкананні запыту, ўтрыманне будзе вынесена ў DOM для карыстальніка.

    Хоць гэты метад дадае нагрузку на сервер, ён можа палепшыць прадукцыйнасць на павольных прылад / злучэнняў, як першая старонка будзе загружацца хутчэй, чым калі б кліент павінен быў вынесці саму старонку.

    Мы даследавалі гэтыя два метаду ў гэтым Vue.js відэаўрок , Змест таксама ставіцца і да Кутні!

    Ці ёсць з дапамогай гэтых метадаў азначае, што вы раптам з'яўляюцца на вяршыні SERP ? Ну, можа быць. Хутчэй за ўсё, хоць? Не. Ёсць шмат іншых меркаванняў SEO: вялікі мабільны UX, HTTPS сувязі, карта сайта, вялікае ўтрыманне, зваротныя спасылкі і г.д. гэта паведамленне пералічвае некалькі SEO парады ў сваім заключэнні!

    Тэхнічнае кіраўніцтва: Кутні SEO дружалюбнага SPA прыклад з універсальным

    папярэднія ўмовы

    • Базавую разуменне прымянення адной старонкі (SPA)
    • базавыя веды машынапіс [Апцыянальна]
    • кошт Snipcart (Назаўжды бясплатна ў тэставым рэжыме)

    Настройка асяроддзя распрацоўкі

    Усталюйце кутнюю CLI па ўсім свеце з дапамогай наступнай каманды:

    NPM ўсталяваць -g @ кутні / кліматыч

    Я выкарыстоўваю дзёрзкасць у маім праекце. Калі вы вырашылі зрабіць гэта і не ён усталяваны ўжо, добра:

    Ная ўстаноўка -g дзёрзкасць

    1. Настройка структуры праекта, выкарыстоўваючы кутнюю CLI

    Стварыце свой праект з дапамогай Кутняе CLI.

    НГ новых мае-дадатак --Тип = --routing СКС

    Заўважылі, як я дадаў стыль і аргумент аб маршрутызацыі да каманды?

    Такім чынам, маршрутызацыя і СКС будуць устаўленыя непасрэдна ў ваш праект, які нашмат прасцей, чым спрабаваць дадаць яго пазней.

    Як толькі гэта будзе зроблена, перайдзіце ў каталог праекта і абслугоўваць свой праект.

    кд маё прыкладанне-НГ служыць

    Цяпер праект павінен быць бачны на месцы па адрасе: // лакальны: 4200 /

    2. Стварэнне першага кампанента Кутняе

    Як і ў многіх сучасных бібліятэк у вэб-інтэрфейсе або рамак, Кутняе выкарыстоўвае сістэму кампанентаў.

    У Кутняе, кожны кампанент, акрамя асноўнага прыкладання аднаго дырэкторыя знаходзіцца ў SRC / дадатак / змяшчае тры файла: машынапіс файл, файл стылю, і файл HTML.

    Так як гэта дэма просты магазін электроннай камерцыі, я буду выкарыстоўваць два кампаненты. Кампанент прадуктаў будзе ўтрымліваць спіс, і спасылку на кожнай старонцы прадукту. А кампанент прадукту будзе адлюстроўваць ўсю інфармацыю аб дэталі прадукту.

    Выкарыстанне Кутні CLI убудаванага ў камандзе для стварэння новых кампанентаў:

    НГ генераваць кампанент прадукты НГ генераваць кампанент прадукту

    2,1 Дражніла спіс прадуктаў

    Перад рэдагаваннем кампанентаў, вам неабходна стварыць структуру дадзеных для прадуктаў.

    Генераваць product.ts файл непасрэдна ў SRC / дадатак / тэчку і даць яму ўсе ўласцівасці, якія вы хочаце.

    экспарт клас прадукту {ID: радок; Імя: радок; цана: нумар; вага: лік; Апісанне: радок; }

    Акрамя таго, стварэнне здзекаваліся-product.ts у тым жа месцы. Гэты файл будзе імпартаваць клас прадукту і экспартаваць масіў прадукту.

    Такім чынам, вы будзеце мець магчымасць імпартаваць спіс прадуктаў у любы кампанент.

    імпарт {Product} з './продукта'; экспарт канстантных ПРАДУКТЫ: Прадукт [] = [{ID: «ас-1», назва: «Цэнтральны кандыцыянер», цана: 5000,00, вага: 900000, апісанне: «Трымайце ўвесь офіс прахалоднага з гэтым цэнтральным кандыцыянерам» }, {Ідэнтыфікатар: «ас-2», назва: «Window Кандыцыянер», Кошт: 300,00, вага: 175000, апісанне: «Ідэальна падыходзіць, каб трымаць пакой або невялікую кватэру прахалоднай» }, {Ідэнтыфікатар: «ас-3», назва: «Фанат», цана: 10,00, вага: 2000, апісанне: «Недарагі, але эфектыўны спосаб, каб спыніць сваіх калегаў скардзіцца на спякоту» },]

    3. Выснова спісу прадуктаў для прыкладання

    Добра, прадукт паспяхова здзекаваліся! Зараз давайце пералічым нашы прадукты на хатняй старонцы. Для гэтага адкрыйце products.component.ts і дадайце:

    імпарту {Кампанент, OnInit} ад '@ вуглавога / асяродак'; імпарт {ПРАДУКТЫ} з »../ mocked-products '; @Component ({селектар: 'прыкладанне' прадукты, templateUrl: './products.component.html', styleUrls: [ »./products.component.scss ']}) экспарт клас ProductsComponent рэалізуе OnInit {прадукты = ПРАДУКТЫ; Канструктар () {} ngOnInit () {}}

    Як вы можаце бачыць, кожны з якіх вуглавыя кампаненты імпартуе кампанентны клас ад Angular асноўны бібліятэкі. @Component ({}) уяўляе сабой функцыю дэкаратара, які адзначае клас у якасці вуглавога кампанента і забяспечвае большую частку сваіх метададзеных.

    Значэнне ключа пара селектар з'яўляецца XML-тэг, які можа ўключаць у сябе шаблоны, каб зрабіць гэты кампанент.

    Зрабіце гэта прама зараз, выдаліўшы ўсе генераваны ў шаблоне асноўнага прыкладання (app.component.html) і дадаць у адпаведны тэг:

    <Прыкладанне-прадукты> </ дадатак прадукты>

    Як толькі гэта будзе зроблена, калі вы наведаеце вэб-сайт, вы павінны быць сустрэтыя з:

    Зараз давайце зменім файл products.component.html ў спіс прадуктаў з дапамогай паўторніка дырэктывы ANGULAR ў * ngFor і рулі ({{}}), каб звязаць дадзеныя з класа ў шаблон.

    <H2> </ h2> <уль * ngFor = "хай твор прадуктаў"> <li> {{product.name}} </ li> </ UL>

    4. Даданне да маршрутызацыі вуглавога прыкладання

    Давайце ператварыць гэтую краму ў дадатак адной старонкі з дапамогай убудаванай маршрутызацыі кутніх ст.

    Так як вы дадалі --routing аргумент пры стварэнні праекта, вы можаце перайсці непасрэдна ў дадатак-routing.module.ts і рэарганізаваць яго ў наступны код:

    імпарт {NgModule} ад '@ кутні / ядро'; імпарт {Маршруты, RouterModule} ад '@ кутні / маршрутызатар'; імпарт {ProductComponent} ад './product/product.component'; імпарт {ProductsComponent} ад './products/products.component'; канстантнасцю маршруты: Маршруты = [{шлях: '', кампанент: ProductsComponent}, {шлях: 'Прадукт /: ідэнтыфікатар', кампанент: ProductComponent}]; @NgModule ({імпарт: [RouterModule.forRoot (маршруты)], экспарт: [RouterModule]}) экспарту клас AppRoutingModule {}

    Гэты модуль імпартуе прадукты і кампаненты прадукту, і будуе масіў маршрутаў, якія вядуць у кожны шлях да кампанента.

    Вы можаце бачыць, я дадаў: ID запаўняльнік, які будзе мець магчымасць атрымаць у кампаненце прадукту, каб адлюстраваць патрэбны прадукт.

    Важна таксама, каб ініцыялізаваць маршрутызатар, дадаўшы RouterModule.forRoot (маршрут) у імпарце модуля.

    Як толькі гэта будзе зроблена, вы можаце замяніць тэг кампанента ў шаблоне прыкладання (app.component.html) з <маршрутызатар-выхадам> тэг:

    <Маршрутызатар-разетка> </ маршрутызатар-разетка>

    Маршрутызатар на выхадзе тэг будзе аказваць выгляд для адпаведнага шляху, названага ў масіве маршрутаў. У гэтым выпадку, каранёвай каталог будзе аказваць выгляд для кампанента прадуктаў.

    Цяпер вы можаце дадаць routerLink = «relativePath» замест любога HREF = атрыбуту «шлях» у <a> тэгаў. Напрыклад, вы можаце абнавіць products.component.html файл з чымсьці накшталт гэтага:

    <H2> </ h2> <уль * ngFor = "хай твор прадуктаў"> <li> <a routerLink="/product/{{product.id}}"> {{product.name}} </ а > </ LI> </ UL>

    Такім чынам, кожны элемент у нашым спісе будзе пасылаць карыстачу да прагляду з кампанентам прадукту.

    5. Стварэнне кампанента прадукту

    Зараз давайце створым дэталь прадукту кампанент. У сваім файле машынапіс, product.component.ts, дадайце наступны код:

    імпарту {Кампанент, OnInit} ад '@ вуглавога / асяродак'; імпарт {ActivatedRoute} ад '@ кутні / маршрутызатара; імпарт {Месца} ад «@ кутні / агульны»; імпарт {ПРАДУКТЫ} з »../ mocked-products '; імпарт {Product} з '../product'; @Component ({селектар: 'прыкладанне-прадукт', templateUrl: './product.component.html', styleUrls: [ »./product.component.scss ']}) экспарт клас ProductComponent рэалізуе OnInit {прадукты = ПРАДУКТЫ; URL: String; прадукт: Прадукт; Канструктар (прыватны маршрут: ActivatedRoute, прыватнае месцазнаходжанне: Location) {сопзЬ ID = this.route.snapshot.paramMap.get ( 'ID'); this.product = this.findProductById (ID); this.url = `https://snipcart-angular-universal.herokuapp.com/$ {this.location.path ()}`; } NgOnInit () {} findProductById (PRODUCTID: радок): Прадукт {вярнуць this.products.find (прадукт => product.id === PRODUCTID); }}

    Вышэй я імпартаваў ActivatedRoute і размяшчэнне ад Кутняе. Гэта дазволіць вам атрымаць ProductID з URL і атрымаць бягучы шлях непасрэдна ў канструктару.

    Акрамя таго, мы імпартавалі нашы прадукты высмейваў масіў здабываецца бягучы прадукт, выкарыстоўваючы ідэнтыфікатар з маршруту, выкарыстоўваючы знаходку () і прэфікс URL-адрас з просьбай паходжання сервера.

    Зараз давайце абновім шаблон кампанента (product.component.html) для адлюстравання неабходнай інфармацыі і стварыць кнопку купіць, сумяшчальную з вызначэнне прадукту Snipcart ў ,

    <DIV клас = "прадукт"> <IMG SRC = "../ актывы / малюнка / {{}} product.id. SVG" альт = "{{product.name}}"> <h2> {{product.name }} </ h2> <р> {{product.description}} </ р> кнопка <клас = "snipcart-дадаць-пункт" [attr.data-элемент-ID] = "product.id" [attr.data -item-імя] = "Продукт.Название" [attr.data-рэч-URL] = "URL" [attr.data-тавар-кошт] = "product.price" [attr.data-пункт вага] = » product.weight »[attr.data-рэч-апісанне] =" product.description "> Купляюць ({{product.price}} $) </ Button> </ DIV>

    Звярніце ўвагу на тое, як я не выкарыстоўваць фігурныя дужкі, каб звязаць дадзеныя ў HTML-атрыбутаў?

    Вы можаце выкарыстоўваць толькі фігурныя дужкі для уласцівасцяў, а не атрыбуты. Такім чынам, вы павінны выкарыстоўваць атрыбут сінтаксісу звязвання кутніх як паказана ў кодзе вышэй.

    6. Інтэграцыя функцыянальных магчымасцяў кошыка пакупак

    Зараз давайце інтэграваць Snipcart шляхам дадання неабходных скрыптоў з нашым ключом API ў файл index.html нашага галоўнага прыкладання, якое хост.

    Такім чынам, ён будзе мець магчымасць узаемадзейнічаць з усімі відамі.

    <! DOCTYPE HTML> <HTML LANG = "EN"> <HEAD> <META кадовак = "UTF-8"> <назва> Вуглавая Snipcart </ title> <база HREF = "/"> <META NAME = "вьюпорт" ўтрыманне = "шырыня = шырыня прылады, зыходная шкала = 1"> <спасылка отн = тып "значок" = "малюнак / х-значок" HREF = "favicon.ico"> </ галава> <цела> <app- корань> </ дадатак корань> </ body> <сцэнар SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"> </ скрыпт> <скрыпт SRC = "https://cdn.snipcart.com/scripts/2.0/snipcart.js" дадзеныя-АПА-ключ = "MzMxN2Y0ODMtOWNhMy00YzUzLWFiNTYtZjMwZTRkZDcxYzM4" ID = "snipcart"> </ SCRIPT> <спасылка HREF = "https: // CDN .snipcart.com / тэмы / 2,0 / база / snipcart.min.css »отн =" Табліца стыляў "Тып =" тэкст / CSS "/> </ html>

    У дэма, я таксама рэдагаваць некалькі шаблонаў, каб дапамагчы стыль кожнага кампанента.

    Я пакіну гэтую частку да вас, так як гэта не з'яўляецца асноўным напрамкам дзейнасці кіраўніцтва.

    7. Выкарыстанне Вуглавая універсальная для SEO

    У рэшце рэшт, давайце зробім наша дадатак SEO дружалюбным з дапамогай SSR.

    У гэтай дэманстрацыі я буду выкарыстоўваць Node.js Экспрэс сервер. Майце ў выглядзе, што можна дадаць Кутні Універсал на любым сэрвэры, да таго часу, як ён можа ўзаемадзейнічаць з функцыяй renderModuleFactory кутняй, але канфігурацыя хутчэй за ўсё, будзе адрознівацца ад той, прадэманстраваных на гэтай пасадзе.

    7.1 Усталёўка Кутні Універсальны

    Для пачатку, давайце дадамо неабходны набор інструментаў для вашай асяроддзя распрацоўкі:

    NPM ўсталяваць --save @ кутні / платформы-сервер @ nguniversal / модуль-карта-ngfactory-пагрузчык TS-пагрузчык @ nguniversal / экспрэс-рухавік

    7.2 Рэдагаванне кліенцкага прыкладання

    Цяпер, калі ў нас ёсць усе інструменты, неабходныя давайце рэдагаваць код на баку кліента, каб пераход паміж аказанай старонкі на боку сервера і на баку кліента прыкладання. У app.module.ts замяніць імпарт BrowserModule ў @NgModule () дэкаратара са наступным кодам:

    BrowserModule.withServerTransition ({APPID: 'мая-дадатак'}),

    Бо прыкладанне ўбудаваны ў код на боку сервера і на баку кліента кода, вам трэба два выходных шляху. Давайце пачнем з вызначэннем выхаднога шляху для браўзэра. Для гэтага адрэдагуйце OutputPath ў angular.json.

    "Архітэктар": { "пабудаваць": { "будаўнік": "@ кутні DevKit / убудаваны кутняй: браўзэр", "варыянты": { "OutputPath": "р-н / браўзэр", ...

    7.3 Настройка сервера

    Зараз, калі вы зрабілі неабходныя змены ў кліенце давайце рэдагаваць код для сервера.

    Стварэнне app.server.module.ts ў каталогу SRC / прыкладання.

    імпарт {NgModule} ад '@ кутні / ядро'; імпарт {ServerModule} ад '@ кутні / платформы-сервер'; імпарт {ModuleMapLoaderModule} ад '@ nguniversal / модуль-карта-ngfactory-пагрузчык'; імпарт {AppModule} ад './app.module'; імпарт {AppComponent} ад './app.component'; @NgModule ({імпарт: [AppModule, ServerModule, ModuleMapLoaderModule], самазагрузкі: [AppComponent],}) экспарту клас AppServerModule {}

    Сфармаваць main.server.ts файл у каталогу / Src, які экспартуе AppServerModule, які будзе выступаць у якасці кропкі ўваходу вашага сервера.

    экспарт {AppServerModule} ад './app/app.server.module';

    Акрамя таго, зрабіць server.ts файл у каранёвым каталогу прыкладання. Гэты файл утрымлівае код сервера Express. Ён будзе слухаць які ўваходзіць запыт, абслугоўваць патрабаваны рэсурс і візуалізаваць HTML-старонкі з дапамогай выкліку renderModuleFactory (абгорнуты ngExpressEngine).

    // Гэта важна і трэба, перш чым што-небудзь яшчэ імпартаваць «zone.js / двуверш / зону-вузел»; імпарт «адлюстроўвае-метададзеныя»; імпарт {enableProdMode} ад '@ кутні / ядро'; імпарт * у якасці экспрэса ад «экспрэса»; імпарт {далучыцца} ад «шляху»; // Faster сервер прадастаўляе ж / рэжым Prod (рэжым распрацоўніка не патрабуецца) enableProdMode (); // Экспрэс-сервер Const прыкладанне = экспрэс (); Const ПОРТ = process.env.PORT || 4000; Const DIST_FOLDER = Join (process.cwd (), 'Dist'); // * Заўвага :: пакінуць гэта як патрабуецца (), так як гэты файл пабудаваны Дынамічна ад WebPack сопзЬ {AppServerModuleNgFactory, LAZY_MODULE_MAP} = патрабуецца ( "./ адлегласць / сервер / асноўным); // Экспрэс імпарт Engine {ngExpressEngine} ад '@ nguniversal / экспрэс-рухавік'; // Імпарт карта модуля для гультаяватай загрузкі імпарту {provideModuleMap} з @ nguniversal / модуль-карта-ngfactory-пагрузчык '; app.engine ( 'HTML', ngExpressEngine ({самазагрузкі: AppServerModuleNgFactory, правайдэры: [provideModuleMap (LAZY_MODULE_MAP)]})); app.set ( 'выгляд рухавіка', 'HTML'); app.set ( 'выгляд', далучыцца (DIST_FOLDER, 'браўзэр')); // TODO: рэалізаваць запыты дадзеных надзейна app.get ( '/ API / *', (REQ, дазваляе в) => {res.status (404) Пашліце ( 'запыты дадзеных не падтрымліваюцца');}); // Сервер статычныя файлы з / браўзэра app.get ( '* *', express.static (далучыцца (DIST_FOLDER, 'браўзэр'))); // Усе рэгулярныя маршруты выкарыстоўваюць універсальны рухавік app.get ( '*', (REQ, Рэз) => {res.render ( 'індэкс', {REQ});}); // Запуск app.listen сервера Вузел (PORT, () => {console.log ( `сервера Node праслухоўвае HTTP: // лакальны: $ {PORT}`);});

    Зараз, калі вы наладзілі сервер, вам трэба дадаваць і абнаўляць файлы канфігурацыі. Стварыць файл tsconfig.server.json ў каталогу Src.

    { "Праходзіць": "../tsconfig.json", "compilerOptions": { "OutDir": "../out-tsc/app", "BaseUrl": "./", "модуль": "CommonJS" , "тыпы": []}, "выключыць": [ "test.ts", "** / * spec.ts."], "angularCompilerOptions": { "entryModule": «дадатак / app.server.module # AppServerModule »}}

    Наладжаны файл webpack.server.config.js ў каранёвым каталогу прыкладання з дапамогай наступнага кода:

    Const = шлях патрабуе ( 'шлях'); Const WebPack = патрабуецца ( 'WebPack'); module.exports = {запіс: {Сервер: './server.ts'}, вырашаюць: {пашырэньні: [ '.js', ». ts ']}, мэта:' вузел ', рэжым:' ні ', / / гэта робіць, што мы ўключаем node_modules і іншыя трэція іншыя бібліятэкі: знешнія [/ node_modules /], выхад: {шлях: path.join (__ имя_директории, 'адлегласць'), імя файла: '[імя] .js'}, модуль: { правілы: [{тэст: /\.ts$/, пагрузчык: 'TS-пагрузчык'}]}, убудовы: [// Часовы Фікс для выдачы: https://github.com/angular/angular/issues/11580 / / для «ПЕРАСЦЯРОГА Крытычнай залежнасці: запыт аб залежнасці з'яўляецца выразам» новы webpack.ContextReplacementPlugin (/(.+)?angular(\\|\/)core(.+)?/, path.join (__ имя_директории " ЦСІ '), // месцазнаходжанне вашага ЦСІ {} // карту вашых маршрутаў), новы webpack.ContextReplacementPlugin (/(.+)?express(\\|\/)(.+)?/, path.join (__dirname, 'SRC'), {})]};

    Цяпер абнавіць канфігурацыю Кутняе CLI і ўсталяваць выхадны шлях зборкі сервера, дадаўшы наступны код angular.json:

    "Архітэктар": {... "сервер": { "будаўнік": "@ кутні DevKit / убудаваны кутняй: сервер", "варыянты": { "OutputPath": "Dist / сервер", "галоўны": " SRC / main.server.ts »," TSconfig ":" SRC / tsconfig.server.json "}}}

    Нарэшце, дадайце зборку і служаць каманды ў раздзел скрыптоў package.json.

    Такім чынам, вы будзеце ў стане трымаць НГ служыць для нармальнай боку кліента візуалізацыі і выкарыстоўваць ную зборку запуску: SSR && НПМ запуску служыць: SSR выкарыстоўваць на бок сервера візуалізацыі з Universal.

    "Скрыпты": {... "зборка: SSR": "NPM запуск зборка: кліент-і-Server-джгуты && НПХ запусціць WebPack: сервер", "служыць: SSR": "вузел р-н / сервер", «зборка: кліент-і-Server-звязка ":" НГ пабудаваць --prod && НГ запусціць свой-дадатак: сервер "," WebPack: сервер ":" WebPack --config webpack.server.config.js --progress --colors " }

    7.4 Зборка і запуск прыкладання

    Цяпер, калі усё наладжана, вы павінны быць добра ісці! Пабудаваць прыкладанне і запусціць сервер.

    NPM прабег зборкі: SSR && НПМ бег служыць: SSR

    GitHub РЭПО і дэма

    См GitHub РЭПО тут

    паглядзець дэма тут

    закрыццё думкі

    У цэлым, будаўніцтва гэтай дэманстрацыі з кутнім быў прыемны вопыт. Стварэнне праекта і захопліваючы агульную ідэю і канцэпцыю кутняму было прасцей, чым я думаў, што гэта быў мой першы раз з гэтай рамкі! Я магу канчаткова ўбачыць, як гэты падыход можа быць карысным для вялікай каманды.

    Тым не менш, уключэнне Універсал ў мой праект быў больш складаным, чым я чакаў; гэта вельмі лёгка заблудзіцца ва ўсіх файлах канфігурацыі!

    У мяне сышло крыху менш, чым за два дні, каб пабудаваць гэтую дэманстрацыю, у тым ліку пачатковага чытання і выпраўлення памылак. дакументацыя ANGULAR была завершана і лёгка прытрымлівацца, як кожны кавалак кода старанна патлумачыў.

    Калі б я хацеў, каб падштурхнуць гэты прыклад далей, я мог бы выкарыстаць прадукты з API, а не насьміхаючыся іх у дадатак і скарысталіся паслугамі і ін'екцыі залежнасцяў, як апісана ў афіцыйная дакументацыя каб імітаваць больш рэальны сцэнар.

    Спадзяюся, што гэта дапаможа вам атрымаць вашу Вуглавая SEO правільна! :)

    Калі вам спадабалася гэтая пасада, калі ласка , заняць другое месца падзяліцца на Twitter , Ёсць каментары, пытанні? Хіт раздзел ніжэй!

    Навошта з кутняй SEO?
    Ня Кутні Google спінкі?
    Дык што ж гэта азначае?
    Навошта з кутняй SEO?
    Ня Кутні Google спінкі?
    Хутчэй за ўсё, хоць?
    ContextReplacementPlugin (/(.+)?
    Angular(\\|\/)core(.+)?
    ContextReplacementPlugin (/(.+)?
    Express(\\|\/)(.+)?
    Последние новости:

    Все права защищены © 2013 Интернет-магазин SHOP-MODA. Мужская и женская обувь, сумки и аксессуары