{"id":4601,"date":"2023-01-27T13:30:36","date_gmt":"2023-01-27T10:00:36","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/svelte-without-kit-253l\/"},"modified":"2023-01-27T13:30:36","modified_gmt":"2023-01-27T10:00:36","slug":"svelte-without-kit-253l","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/svelte-without-kit-253l\/","title":{"rendered":"Svelte without Kit &#8211; \u0627\u0646\u062c\u0645\u0646 DEV \ud83d\udc69\u200d\ud83d\udcbb\ud83d\udc68\u200d\ud83d\udcbb"},"content":{"rendered":"<div data-article-id=\"1342950\" id=\"article-body\">\n<p>\u0645\u0646 Svelte \u0631\u0627 \u062e\u06cc\u0644\u06cc \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u0645 \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u0645 \u0627\u0632 \u0622\u0646 \u062f\u0631 \u0647\u0645\u0647 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0645!  \u0627\u063a\u0644\u0628 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0645\u06cc\u06a9\u0631\u0648 \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0628\u0647 \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0627\u0645\u0644 \u0646\u06cc\u0627\u0632 \u0646\u062f\u0627\u0631\u0646\u062f &#8211; \u0622\u0646\u0647\u0627 \u0686\u0646\u062f \u0635\u0641\u062d\u0647 HTML \u0628\u0627 \u0686\u0646\u062f \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc API \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0647\u0633\u062a\u0646\u062f.  SvelteKit \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f \u0627\u0633\u062a\u060c \u0632\u06cc\u0631\u0627 \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc\u060c \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0627\u0648\u0644\u06cc\u0647\u060c \u0631\u0646\u062f\u0631 \u0633\u0641\u0627\u0631\u0634\u06cc \u06cc\u0627 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u062a\u0645\u0627\u0645 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0639\u0627\u0644\u06cc \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 SvelteKit \u0646\u062f\u0627\u0631\u062f.<\/p>\n<p>\u0627\u0633\u0646\u0627\u062f Svelte \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0632\u06cc\u0627\u062f\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u062f\u0648\u0646 SvelteKit \u0627\u0631\u0627\u0626\u0647 \u0646\u0645\u06cc \u062f\u0647\u0646\u062f\u060c \u062f\u0631 \u0648\u0627\u0642\u0639 \u0641\u0642\u0637 \u06cc\u06a9 \u067e\u0627\u0631\u0627\u06af\u0631\u0627\u0641 \u062f\u0631 \u0627\u0633\u0646\u0627\u062f \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u062f\u0631 \u0645\u0648\u0631\u062f \u0646\u062d\u0648\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0635\u062d\u0628\u062a \u0645\u06cc \u06a9\u0646\u062f &#8211;<\/p>\n<blockquote>\n<p>\u0627\u06af\u0631 \u0628\u0647 \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0627\u0645\u0644 \u0646\u06cc\u0627\u0632 \u0646\u062f\u0627\u0631\u06cc\u062f \u0648 \u0628\u0647 \u062c\u0627\u06cc \u0622\u0646 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u06cc\u06a9 \u0633\u0627\u06cc\u062a\/\u0628\u0631\u0646\u0627\u0645\u0647 \u0641\u0642\u0637 frontend \u0633\u0627\u062f\u0647 \u0628\u0633\u0627\u0632\u06cc\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc npm init vite \u0648 \u0627\u0646\u062a\u062e\u0627\u0628 \u06af\u0632\u06cc\u0646\u0647 svelte \u0627\u0632 Svelte (\u0628\u062f\u0648\u0646 \u06a9\u06cc\u062a) \u0628\u0627 Vite \u0646\u06cc\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.  \u0628\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c npm run build \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc HTML\u060c JS \u0648 CSS \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc dist \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/blockquote>\n<p>\u0627\u06cc\u0646 \u067e\u0633\u062a \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Svelte \u0628\u0627 Express\u060c \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0648\u0628 \u0645\u06cc\u0646\u06cc\u0645\u0627\u0644\u06cc\u0633\u062a\u06cc \u0631\u0627 \u0634\u0631\u062d \u0645\u06cc \u062f\u0647\u062f.  \u0627\u06cc\u0646 \u0628\u0647 \u062f\u0648 \u0628\u062e\u0634 \u062a\u0642\u0633\u06cc\u0645 \u0645\u06cc \u0634\u0648\u062f &#8211; \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647 \u0648 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0638\u0631\u0641 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u062a\u0648\u0644\u06cc\u062f\u060c \u0632\u06cc\u0631\u0627 \u0645\u0627 \u0627\u0632 \u0645\u0631\u0627\u062d\u0644 \u0633\u0627\u062e\u062a \u06a9\u0645\u06cc \u0645\u062a\u0641\u0627\u0648\u062a \u0628\u0631\u0627\u06cc \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/svelte-without-kit-253l\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/svelte-without-kit-253l\/#%D8%A7%DA%A9%D8%B3%D9%BE%D8%B1%D8%B3_%D8%A8%D8%A7_html-express-js\" >\u0627\u06a9\u0633\u067e\u0631\u0633 \u0628\u0627 html-express-js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/svelte-without-kit-253l\/#Svelte_%D9%85%D8%B3%D8%AA%D9%82%D9%84\" >Svelte \u0645\u0633\u062a\u0642\u0644<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/svelte-without-kit-253l\/#html-express-js\" >html-express-js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/svelte-without-kit-253l\/#%D8%B3%DB%8C%D9%85_%DA%A9%D8%B4%DB%8C_%D9%87%D9%85%D9%87_%D8%A8%D8%A7_%D9%87%D9%85\" >\u0633\u06cc\u0645 \u06a9\u0634\u06cc \u0647\u0645\u0647 \u0628\u0627 \u0647\u0645<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/svelte-without-kit-253l\/#DevEx\" >DevEx<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/svelte-without-kit-253l\/#%D8%B3%D8%A7%D8%AE%D8%AA_%D8%AA%D9%88%D9%84%DB%8C%D8%AF\" >\u0633\u0627\u062e\u062a \u062a\u0648\u0644\u06cc\u062f<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Express \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0648\u0628 \u0639\u0627\u0644\u06cc \u0627\u0633\u062a\u060c \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0646\u0642\u0627\u0637 \u067e\u0627\u06cc\u0627\u0646\u06cc HTTP \u0648 \u067e\u0631\u062f\u0627\u0632\u0634 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\/\u067e\u0627\u0633\u062e \u0647\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a.  \u0627\u0646\u0648\u0627\u0639 \u067e\u0644\u0627\u06af\u06cc\u0646 \u0647\u0627\u06cc \u0645\u06cc\u0627\u0646 \u0627\u0641\u0632\u0627\u0631\u06cc \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0645\u0648\u0627\u0631\u062f\u06cc \u0645\u0627\u0646\u0646\u062f authnz \u0648 \u0631\u0646\u062f\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.  \u0628\u062f\u0646\u0647 \u0647\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a JSON \u0628\u0647 \u0635\u0648\u0631\u062a \u0628\u0648\u0645\u06cc \u062f\u0631 \u0622\u062e\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 Express \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u0646\u062f.  \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0645\u06cc\u0627\u0646 \u0627\u0641\u0632\u0627\u0631\u0647\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc Express \u0631\u0627 \u0628\u0647 \u0645\u06cc\u0632\u0627\u0646 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u06af\u0633\u062a\u0631\u0634 \u062f\u0647\u0646\u062f\u060c \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u0627 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0645\u06cc\u0646\u06cc\u0645\u0627\u0644\u06cc\u0633\u0645 \u0645\u0637\u0644\u0642 \u0647\u0633\u062a\u06cc\u0645.  \u0645\u0627 \u0628\u0647 \u06cc\u06a9 \u0645\u0648\u062a\u0648\u0631 \u0631\u0646\u062f\u0631 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645 \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0627\u0632 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0631\u0648\u06cc \u0633\u0631\u0648\u0631 \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc Svelte \u062e\u0648\u062f \u062a\u0632\u0631\u06cc\u0642 \u06a9\u0646\u06cc\u0645.  \u0627\u0645\u0627 \u0627\u06cc\u0646 \u062f\u0631 \u0645\u0648\u0631\u062f \u0622\u0646 \u0627\u0633\u062a.<\/p>\n<p>\u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u06a9\u0627\u0631\u060c \u0645\u0631\u062d\u0644\u0647 \u0633\u0627\u062e\u062a \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Svelte \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a.  \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 Svelte \u0627\u0632 \u0642\u0628\u0644 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0627\u0631\u0627\u0626\u0647 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc Svelte \u0628\u0647 \u0637\u0648\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0627\u0632 \u0637\u0631\u06cc\u0642 Express \u0646\u06cc\u0633\u062a.  \u062f\u0631 \u0639\u0648\u0636\u060c \u0627\u06cc\u0646 \u062f\u0627\u0631\u0627\u06cc\u06cc\u200c\u0647\u0627 \u0628\u0627\u06cc\u062f \u062a\u0648\u0633\u0637 Vite \u0633\u0627\u062e\u062a\u0647 \u0634\u0648\u0646\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc \u0645\u0631\u0648\u0631\u06af\u0631 \u0627\u0631\u0627\u0626\u0647 \u0634\u0648\u0646\u062f.  Vite \u062a\u0645\u0627\u0645 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc Svelte \u0645\u0627 \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648 CSS \u06a9\u0648\u0686\u06a9\u200c\u0634\u062f\u0647\u060c \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u200c\u0647\u0627\u06cc JS \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062a\u0648\u0633\u0637 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627 \u0628\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f. <em>\u0647\u0645\u0686\u0646\u06cc\u0646<\/em> \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc CSS \u0645\u0627\u0646\u0646\u062f Tailwindcss \u0628\u0627 Postcss.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u0631\u062d\u0644\u0647 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u0632 \u0645\u0642\u062f\u0627\u0631\u06cc \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0631 \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0645\u062d\u0644\u06cc \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.  \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u06cc\u06a9 \u062f\u0633\u062a\u0648\u0631 \u0633\u0627\u062e\u062a \u0631\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u062f <code>.svelte<\/code> \u0641\u0627\u06cc\u0644 \u0627\u06cc\u062c\u0627\u062f\/\u062a\u063a\u06cc\u06cc\u0631\/\u062d\u0630\u0641 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0634\u062f\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0633\u0631\u0648\u06cc\u0633 Express \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f.  (\u0645\u062a\u0627\u0633\u0641\u0627\u0646\u0647\u060c \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u062c\u062f\u062f \u062f\u0627\u063a \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f).  \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631\u060c \u0645\u0627 Svelte \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06af\u0627\u0645\u06cc \u062f\u0631 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 Docker \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627 \u0628\u0631 \u0631\u0648\u06cc \u06cc\u06a9 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u0645\u06cc\u0632\u0628\u0627\u0646 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DA%A9%D8%B3%D9%BE%D8%B1%D8%B3_%D8%A8%D8%A7_html-express-js\"><\/span>\n<p>  \u0627\u06a9\u0633\u067e\u0631\u0633 \u0628\u0627 html-express-js<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u06cc\u06a9 \u0631\u0628\u0627\u062a \u0686\u062a \u0633\u0627\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u067e\u06cc\u0627\u0645\u06cc \u0631\u0627 \u0627\u0632 \u0628\u062e\u0634 \u062c\u0644\u0648\u06cc\u06cc Svelte \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u06cc\u06a9 \u067e\u0627\u0633\u062e \u062a\u0635\u0627\u062f\u0641\u06cc \u0631\u0627 \u0628\u0627\u0632\u062a\u0627\u0628 \u0645\u06cc \u062f\u0647\u062f.  \u062c\u0644\u0633\u0627\u062a \u0686\u062a \u0631\u0627 \u0628\u0627 \u06cc\u06a9 \u0634\u0646\u0627\u0633\u0647 \u062a\u0635\u0627\u062f\u0641\u06cc \u062f\u0631 \u062d\u0627\u0641\u0638\u0647 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f.  \u0627\u06cc\u0646 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0646\u06cc\u0633\u062a\u060c \u0627\u0645\u0627 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u062c\u0644\u0633\u0647 \u0686\u062a \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u06cc\u06a9 \u0634\u0646\u0627\u0633\u0647 \u062f\u0631 \u0645\u0633\u06cc\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a HTTP \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u06a9\u0646\u06cc\u0645.  \u0627\u06cc\u0646 \u0634\u0646\u0627\u0633\u0647 \u0646\u0645\u0648\u0646\u0647 \u0627\u06cc \u0627\u0632 \u062d\u0627\u0644\u062a \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0627\u0633\u062a \u06a9\u0647 \u062a\u0648\u0633\u0637 Svelte \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0645\u0627 Express \u0631\u0627 \u0628\u0627 \u06a9\u0645\u06cc \u0645\u06cc\u0627\u0646 \u0627\u0641\u0632\u0627\u0631 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 &#8211; <code>express.static<\/code>\u060c <code>express.json<\/code>\u060c <code>cors<\/code> \u0648 <code>html-express-js<\/code>. <code>express.static<\/code> Svelte js\/css \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0634\u062f\u0647 \u0631\u0627 \u0627\u0632 \u0645\u062d\u0644\u06cc \u0627\u0631\u0627\u0626\u0647 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f <code>.\/public\/assets<\/code> \u0641\u0647\u0631\u0633\u062a \u0631\u0627\u0647\u0646\u0645\u0627. <code>json<\/code> \u0648 <code>cors<\/code> \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u0627\u062c\u0632\u0627\u06cc Svelte \u0645\u0627 \u0636\u0631\u0648\u0631\u06cc \u0647\u0633\u062a\u0646\u062f.  \u0648 \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c <code>html-express-js<\/code> \u062d\u062f\u0627\u0642\u0644 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u0642\u0627\u0644\u0628\u200c\u0633\u0627\u0632\u06cc \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0628\u0647 \u0637\u0648\u0631\u06cc \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a HTML \u0628\u0631\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc GET \u0627\u0631\u0627\u0626\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0627\u0637\u0646 \u0627\u0635\u0644\u06cc Express\u060c \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 <code>server.js<\/code> &#8211;<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ .\/server.js<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">express<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">response<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">express<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">cors<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">cors<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">resolve<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">path<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">htmlExpress<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">html-express-js<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">__dirname<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">resolve<\/span><span class=\"p\">();<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">express<\/span><span class=\"p\">();<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">port<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">PORT<\/span> <span class=\"o\">||<\/span> <span class=\"mi\">3000<\/span><span class=\"p\">;<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">chats<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{};<\/span>\n\n<span class=\"c1\">\/\/ Configure html-express-js as the rendering engine.<\/span>\n<span class=\"c1\">\/\/ Templates will be in the local directory .\/public<\/span>\n<span class=\"nx\">app<\/span><span class=\"p\">.<\/span><span class=\"nx\">engine<\/span><span class=\"p\">(<\/span>\n  <span class=\"dl\">'<\/span><span class=\"s1\">js<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">htmlExpress<\/span><span class=\"p\">()<\/span>\n<span class=\"p\">);<\/span>\n<span class=\"nx\">app<\/span><span class=\"p\">.<\/span><span class=\"kd\">set<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">view engine<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">js<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"nx\">app<\/span><span class=\"p\">.<\/span><span class=\"kd\">set<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">views<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">__dirname<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/public`<\/span><span class=\"p\">);<\/span>\n\n<span class=\"c1\">\/\/ Configure express to serve static assets from<\/span>\n<span class=\"c1\">\/\/ the local directory .\/public\/assets. This is where<\/span>\n<span class=\"c1\">\/\/ compiled Svelte files will get copied into.<\/span>\n<span class=\"nx\">app<\/span><span class=\"p\">.<\/span><span class=\"nx\">use<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/assets<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">express<\/span><span class=\"p\">.<\/span><span class=\"kd\">static<\/span><span class=\"p\">(<\/span><span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">__dirname<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/public\/assets`<\/span><span class=\"p\">));<\/span>\n\n<span class=\"c1\">\/\/ Configure express to parse json and allow CORS requests<\/span>\n<span class=\"nx\">app<\/span><span class=\"p\">.<\/span><span class=\"nx\">use<\/span><span class=\"p\">(<\/span><span class=\"nx\">express<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span><span class=\"p\">());<\/span>\n<span class=\"nx\">app<\/span><span class=\"p\">.<\/span><span class=\"nx\">use<\/span><span class=\"p\">(<\/span><span class=\"nx\">cors<\/span><span class=\"p\">());<\/span>\n\n<span class=\"c1\">\/\/ POST endpoint for the front-end to send chats<\/span>\n<span class=\"c1\">\/\/ The front-end sends a list of all chats on each request<\/span>\n<span class=\"nx\">app<\/span><span class=\"p\">.<\/span><span class=\"nx\">post<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/:cid<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"kd\">function<\/span><span class=\"p\">(<\/span><span class=\"nx\">req<\/span><span class=\"p\">,<\/span> <span class=\"nx\">res<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">chats<\/span><span class=\"p\">[<\/span><span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">cid<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nx\">body<\/span><span class=\"p\">;<\/span>\n  <span class=\"nx\">res<\/span><span class=\"p\">.<\/span><span class=\"nx\">send<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Ok<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"c1\">\/\/ GET endpoint for the front-end to load chats by identifier<\/span>\n<span class=\"c1\">\/\/ The list of chats is sent as a JSON array<\/span>\n<span class=\"nx\">app<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/chats\/:cid<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"kd\">function<\/span> <span class=\"p\">(<\/span><span class=\"nx\">req<\/span><span class=\"p\">,<\/span> <span class=\"nx\">res<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">let<\/span> <span class=\"nx\">cachedchats<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[]<\/span>\n  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">cid<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">chats<\/span><span class=\"p\">[<\/span><span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">cid<\/span><span class=\"p\">])<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">cachedchats<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">chats<\/span><span class=\"p\">[<\/span><span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">cid<\/span><span class=\"p\">]<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nx\">res<\/span><span class=\"p\">.<\/span><span class=\"nx\">send<\/span><span class=\"p\">(<\/span><span class=\"nx\">cachedchats<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">})<\/span>\n\n<span class=\"c1\">\/\/ GET endpoint for loading HTML from the template in public\/homepage.js<\/span>\n<span class=\"c1\">\/\/ If a chat identifier is in the path, parse as :cid and render in template<\/span>\n<span class=\"nx\">app<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">([<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\/:cid<\/span><span class=\"dl\">'<\/span><span class=\"p\">],<\/span> <span class=\"kd\">function<\/span> <span class=\"p\">(<\/span><span class=\"nx\">req<\/span><span class=\"p\">,<\/span> <span class=\"nx\">res<\/span><span class=\"p\">,<\/span> <span class=\"nx\">next<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">res<\/span><span class=\"p\">.<\/span><span class=\"nx\">render<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">homepage<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Very Cool Chatbot<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">cid<\/span><span class=\"p\">:<\/span> <span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">cid<\/span>\n  <span class=\"p\">});<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"nx\">app<\/span><span class=\"p\">.<\/span><span class=\"nx\">listen<\/span><span class=\"p\">(<\/span><span class=\"nx\">port<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Node app listening on port <\/span><span class=\"p\">${<\/span><span class=\"nx\">port<\/span><span class=\"p\">}<\/span><span class=\"s2\">!`<\/span><span class=\"p\">));<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0647 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc GET \u0628\u0631\u0627\u06cc \u0645\u0633\u06cc\u0631 \u0631\u06cc\u0634\u0647 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f &#8211; \u0647\u0645\u0686\u0646\u06cc\u0646 a \u0631\u0627 \u062a\u062c\u0632\u06cc\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>cid<\/code> \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0627\u0632 \u0645\u0633\u06cc\u0631 \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 <code>html-express-js<\/code> \u0642\u0627\u0644\u0628.  \u0622\u0646 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0631\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 root Svelte \u062f\u0631 \u0632\u06cc\u0631 \u0645\u0634\u0627\u0647\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Svelte_%D9%85%D8%B3%D8%AA%D9%82%D9%84\"><\/span>\n<p>  Svelte \u0645\u0633\u062a\u0642\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0645\u0627 \u067e\u0631\u0648\u0698\u0647 Svelte \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0632\u06cc\u0631 \u0634\u0627\u062e\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0631\u062f\u06cc\u0645 <code>.\/svelte<\/code> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vite\u060c \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0627\u0633\u0646\u0627\u062f \u062a\u0648\u0635\u06cc\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a &#8211;<\/p>\n<blockquote>\n<p>\u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 Svelte (\u0628\u062f\u0648\u0646 \u06a9\u06cc\u062a) \u0628\u0627 Vite \u0628\u0627 \u0627\u062c\u0631\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>npm init vite<\/code> \u0648 \u06af\u0632\u06cc\u0646\u0647 Svelte \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/blockquote>\n<p>\u067e\u0633 \u0627\u0632 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0648 \u0627\u062c\u0631\u0627\u06cc \u06cc\u06a9 \u0628\u06cc\u0644\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>npm run build<\/code>\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0646\u06af\u0627\u0647\u06cc \u0628\u0647 \u062f\u0627\u0631\u0627\u06cc\u06cc \u0647\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0634\u062f\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0628\u06cc\u0627\u0646\u062f\u0627\u0632\u06cc\u0645 <code>.\/svelte\/dist<\/code>.  \u0646\u06a9\u062a\u0647 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647 \u0641\u0627\u06cc\u0644 HTML \u0627\u0633\u062a \u06a9\u0647 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u0634\u0648\u062f\u060c \u062f\u0631 \u0648\u0627\u0642\u0639 \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a &#8211;<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"c\">&lt;!-- .\/svelte\/dist\/index.html --&gt;<\/span>\n<span class=\"cp\">&lt;!DOCTYPE html&gt;<\/span>\n<span class=\"nt\">&lt;html<\/span> <span class=\"na\">lang=<\/span><span class=\"s\">\"en\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\">&lt;head&gt;<\/span>\n    <span class=\"c\">&lt;!-- meta tags --&gt;<\/span>\n    <span class=\"nt\">&lt;script <\/span><span class=\"na\">type=<\/span><span class=\"s\">\"module\"<\/span> <span class=\"na\">crossorigin<\/span> <span class=\"na\">src=<\/span><span class=\"s\">\"https:\/\/dev.to\/assets\/index-acdd3185.js\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\n    <span class=\"nt\">&lt;link<\/span> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"\/assets\/index-972eb3c3.css\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\">&lt;\/head&gt;<\/span>\n  <span class=\"nt\">&lt;body&gt;<\/span>\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"app\"<\/span><span class=\"nt\">&gt;&lt;\/div&gt;<\/span>\n  <span class=\"nt\">&lt;\/body&gt;<\/span>\n<span class=\"nt\">&lt;\/html&gt;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0631\u062c\u0627\u0639\u0627\u062a HTML \u0627\u0644\u0641 <code>.js<\/code> \u0648 <code>.css<\/code> \u0641\u0627\u06cc\u0644\u06cc \u06a9\u0647 \u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0633\u0627\u062e\u062a \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u0634\u0648\u062f.  \u0648 \u06cc\u06a9 \u062a\u06a9 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f <code>&lt;div id=\"app\"&gt;&lt;\/div&gt;<\/code> \u06a9\u0647 \u062a\u0648\u0633\u0637 Svelte \u0628\u0631\u0627\u06cc \u062a\u0632\u0631\u06cc\u0642 \u0627\u062c\u0632\u0627\u06cc HTML\/JS\/CSS \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0634\u062f\u0647 \u06a9\u0647 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0635\u0644\u06cc \u0648\u0628 \u0639\u0645\u0644 \u0645\u06cc \u06a9\u0646\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0647\u0645\u0627\u0646 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc JS\/CSS \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0634\u062f\u0647 \u062f\u0631 \u0647\u0631 \u0641\u0627\u06cc\u0644 HTML \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u060c \u062a\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06cc\u06a9 div \u0628\u0627 <code>id=\"app\"<\/code> \u062c\u0627\u06cc\u06cc \u062f\u0631 \u0642\u0627\u0644\u0628<\/p>\n<h3><span class=\"ez-toc-section\" id=\"html-express-js\"><\/span>\n<p>  html-express-js<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0645\u0627 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 HTML \u0645\u0634\u0627\u0628\u0647 \u0628\u0627 \u0627\u0644\u06af\u0648\u06cc \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062a\u0648\u0633\u0637 Express \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u0622\u0646 \u0631\u0627 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f <code>.js<\/code> \u0648 <code>.css<\/code> \u0641\u0627\u06cc\u0644 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0633\u0627\u062e\u062a\u0646 Svelte\u060c \u0648 \u0634\u0627\u0645\u0644 \u06cc\u06a9 div \u0648\u0627\u062d\u062f \u0628\u0627 <code>id=\"app\"<\/code>.  \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0627\u0631\u0627\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 \u0628\u0627\u0637\u0646 \u0633\u0631\u0648\u0631 Express \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0645\u0633\u06cc\u0631 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a <code>cid<\/code> \u0627\u0632 \u0628\u0627\u0644\u0627\u061f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ public\/homepage.js<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">html<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">html-express-js<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">view<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">,<\/span> <span class=\"nx\">state<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">html<\/span><span class=\"s2\">`\n  &lt;!DOCTYPE html&gt;\n  &lt;html lang=\"en\"&gt;\n    &lt;head&gt;\n      &lt;title&gt;<\/span><span class=\"p\">${<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span><span class=\"s2\">&lt;\/title&gt;\n      &lt;meta charset=\"UTF-8\" \/&gt;\n      &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n      &lt;!-- Precompiled JS\/CSS files by Svelte during build step --&gt;\n      &lt;script type=\"module\" crossorigin src=\"https:\/\/dev.to\/assets\/index-acdd3185.js\"&gt;&lt;\/script&gt;\n      &lt;link rel=\"stylesheet\" href=\"http:\/\/dev.to\/assets\/index-972eb3c3.css\"&gt;\n    &lt;\/head&gt;\n\n    &lt;body&gt;\n      &lt;!-- data.cid is the parsed path variable from Express --&gt;\n      &lt;div id=\"app\" data-chat-id=\"<\/span><span class=\"p\">${<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">cid<\/span><span class=\"p\">}<\/span><span class=\"s2\">\"&gt;&lt;\/div&gt;\n    &lt;\/body&gt;\n  &lt;\/html&gt;\n`<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B3%DB%8C%D9%85_%DA%A9%D8%B4%DB%8C_%D9%87%D9%85%D9%87_%D8%A8%D8%A7_%D9%87%D9%85\"><\/span>\n<p>  \u0633\u06cc\u0645 \u06a9\u0634\u06cc \u0647\u0645\u0647 \u0628\u0627 \u0647\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0686\u06af\u0648\u0646\u0647 \u0628\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0642\u0627\u0644\u0628 \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 Svelte \u062e\u0648\u062f \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u0645\u061f  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 App.svelte \u0627\u0633\u062a \u06a9\u0647 \u0631\u06cc\u0634\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062c\u0644\u0648\u06cc\u06cc \u0645\u0627 \u0631\u0627 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.  \u0627\u0632 JS\/HTML DOM \u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646 \u0645\u0642\u062f\u0627\u0631 \u0645\u0634\u062e\u0635\u0647 \u062f\u0627\u062f\u0647 \u0627\u0632 \u0642\u0633\u0645\u062a \u0627\u0635\u0644\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f. <code>id=\"app\"<\/code>.  \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u0622\u0633\u0627\u0646!<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c\">&lt;!--<\/span> <span class=\"p\">.<\/span><span class=\"o\">\/<\/span><span class=\"nx\">svelte<\/span><span class=\"o\">\/<\/span><span class=\"nx\">src<\/span><span class=\"o\">\/<\/span><span class=\"nx\">App<\/span><span class=\"p\">.<\/span><span class=\"nx\">svelte<\/span> <span class=\"o\">--&gt;<\/span>\n<span class=\"o\">&lt;<\/span><span class=\"nx\">script<\/span><span class=\"o\">&gt;<\/span>\n  <span class=\"k\">import<\/span> <span class=\"nx\">Chatbox<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/lib\/Chatbox.svelte<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"c1\">\/\/ Lookup main app div<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">app<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"c1\">\/\/ Access `data-chat-id` attribute from div<\/span>\n  <span class=\"kd\">let<\/span> <span class=\"nx\">chatId<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">app<\/span><span class=\"p\">.<\/span><span class=\"nx\">dataset<\/span><span class=\"p\">.<\/span><span class=\"nx\">chatId<\/span><span class=\"p\">;<\/span>\n\n<span class=\"o\">&lt;<\/span><span class=\"sr\">\/script<\/span><span class=\"err\">&gt;\n<\/span>\n<span class=\"o\">&lt;<\/span><span class=\"nx\">main<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">font-mono text-primary h-full<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"c\">&lt;!--<\/span> <span class=\"nx\">other<\/span> <span class=\"nx\">markup<\/span> <span class=\"o\">--&gt;<\/span>\n\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">Chatbox<\/span> <span class=\"p\">{<\/span><span class=\"nx\">chatId<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/main<\/span><span class=\"err\">&gt;\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0645\u0646\u060c \u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u0633\u0627\u062f\u0647 \u0645\u0627\u0646\u0646\u062f \u0631\u0634\u062a\u0647 \u0647\u0627 \u0639\u0627\u0644\u06cc \u0639\u0645\u0644 \u06a9\u0631\u062f.  \u0628\u0631\u0627\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647\u200c\u062a\u0631 JSON\u060c \u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u0645 \u06a9\u0647 \u0647\u0645\u06cc\u0634\u0647 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f <code>html-express-js<\/code> \u0627\u0644\u06af\u0648\u060c \u0628\u0647 \u0648\u06cc\u0698\u0647 \u0628\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0631\u0634\u062a\u0647 \u0647\u0627\u06cc \u062c\u0627\u0633\u0627\u0632\u06cc \u0634\u062f\u0647 \u06a9\u0647 \u062d\u0627\u0648\u06cc \u0646\u0642\u0644 \u0642\u0648\u0644 \u0647\u0633\u062a\u0646\u062f.  \u062f\u0631 \u0622\u0646 \u0635\u0648\u0631\u062a\u060c \u0628\u0647 \u062c\u0627\u06cc \u0622\u0646\u060c \u0647\u0646\u06af\u0627\u0645 \u0646\u0635\u0628 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Svelte\u060c \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc JSON \u0631\u0627 \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc \u06a9\u0646\u0645.<\/p>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0628\u0627\u06cc\u062f \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc JS\/CSS \u062a\u0648\u0644\u06cc\u062f \u0634\u062f\u0647 \u0631\u0627 \u0627\u0632 \u0622\u0646 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u0645 <code>.\/svelte\/dist\/assets<\/code> \u0628\u0647 <code>.\/public\/assets<\/code> \u062a\u0627 \u0628\u062a\u0648\u0627\u0646 \u0628\u0627 \u0627\u06a9\u0633\u067e\u0631\u0633 \u0628\u0647 \u0622\u0646\u0647\u0627 \u062e\u062f\u0645\u062a \u0631\u0633\u0627\u0646\u06cc \u06a9\u0631\u062f.  \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0627\u06cc\u0646\u06a9\u0647 \u0646\u0627\u0645 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627 \u0634\u0627\u0645\u0644 \u06cc\u06a9 \u067e\u0633\u0648\u0646\u062f \u062a\u0635\u0627\u062f\u0641\u06cc \u0628\u0631\u0627\u06cc \u0627\u0632 \u0628\u06cc\u0646 \u0628\u0631\u062f\u0646 \u062d\u0627\u0641\u0638\u0647 \u067e\u0646\u0647\u0627\u0646 \u0645\u0631\u0648\u0631\u06af\u0631 \u0627\u0633\u062a\u060c \u06a9\u0645\u06cc \u06a9\u062f \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646 \u0646\u0627\u0645 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc JS\/CSS \u0627\u0632 \u0633\u06cc\u0633\u062a\u0645 \u0641\u0627\u06cc\u0644 \u0648 \u0631\u0646\u062f\u0631 \u0622\u0646\u0647\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/.\/server.js<\/span>\n<span class=\"c1\">\/\/ ...other includes<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"nx\">fs<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">fs<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">__dirname<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">resolve<\/span><span class=\"p\">();<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nx\">readAssets<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">js<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">fs<\/span><span class=\"p\">.<\/span><span class=\"nx\">readdirSync<\/span><span class=\"p\">(<\/span><span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">__dirname<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/public\/assets`<\/span><span class=\"p\">).<\/span><span class=\"nx\">filter<\/span><span class=\"p\">((<\/span><span class=\"nx\">f<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">f<\/span><span class=\"p\">.<\/span><span class=\"nx\">endsWith<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.js<\/span><span class=\"dl\">'<\/span><span class=\"p\">));<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">css<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">fs<\/span><span class=\"p\">.<\/span><span class=\"nx\">readdirSync<\/span><span class=\"p\">(<\/span><span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">__dirname<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/public\/assets`<\/span><span class=\"p\">).<\/span><span class=\"nx\">filter<\/span><span class=\"p\">((<\/span><span class=\"nx\">f<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">f<\/span><span class=\"p\">.<\/span><span class=\"nx\">endsWith<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">));<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">js<\/span><span class=\"p\">,<\/span> <span class=\"nx\">css<\/span> <span class=\"p\">};<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ ...other setup and endpoints<\/span>\n\n<span class=\"nx\">app<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">([<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\/:cid<\/span><span class=\"dl\">'<\/span><span class=\"p\">],<\/span> <span class=\"kd\">function<\/span> <span class=\"p\">(<\/span><span class=\"nx\">req<\/span><span class=\"p\">,<\/span> <span class=\"nx\">res<\/span><span class=\"p\">,<\/span> <span class=\"nx\">next<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">js<\/span><span class=\"p\">,<\/span> <span class=\"nx\">css<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">readAssets<\/span><span class=\"p\">();<\/span>\n  <span class=\"nx\">res<\/span><span class=\"p\">.<\/span><span class=\"nx\">render<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">homepage<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Very Cool Chatbot<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">cid<\/span><span class=\"p\">:<\/span> <span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">cid<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">js<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">css<\/span>\n  <span class=\"p\">});<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ public\/homepage.js<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">html<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">html-express-js<\/span><span class=\"dl\">'<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">renderJs<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">js<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return<\/span> <span class=\"nx\">js<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">j<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"s2\">`&lt;script type=\"module\" crossorigin src=\"https:\/\/dev.to\/assets\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">j<\/span><span class=\"p\">}<\/span><span class=\"s2\">\"&gt;&lt;\/script&gt;`<\/span><span class=\"p\">).<\/span><span class=\"nx\">join<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"se\">\\n<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">renderCss<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">css<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return<\/span> <span class=\"nx\">css<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">c<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"s2\">`&lt;link rel=\"stylesheet\" href=\"https:\/\/dev.to\/assets\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">c<\/span><span class=\"p\">}<\/span><span class=\"s2\">\" \/&gt;`<\/span><span class=\"p\">).<\/span><span class=\"nx\">join<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"se\">\\n<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">view<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">,<\/span> <span class=\"nx\">state<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">html<\/span><span class=\"s2\">`\n  &lt;!DOCTYPE html&gt;\n  &lt;html lang=\"en\"&gt;\n    &lt;head&gt;\n      &lt;title&gt;<\/span><span class=\"p\">${<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span><span class=\"s2\">&lt;\/title&gt;\n      &lt;meta charset=\"UTF-8\" \/&gt;\n      &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n      <\/span><span class=\"p\">${<\/span><span class=\"nx\">renderJs<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">js<\/span><span class=\"p\">)}<\/span><span class=\"s2\">\n      <\/span><span class=\"p\">${<\/span><span class=\"nx\">renderCss<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">css<\/span><span class=\"p\">)}<\/span><span class=\"s2\">\n    &lt;\/head&gt;\n\n    &lt;body data-theme=\"forest\"&gt;\n      &lt;div id=\"app\" data-chat-id=\"<\/span><span class=\"p\">${<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">cid<\/span><span class=\"p\">}<\/span><span class=\"s2\">\"&gt;&lt;\/div&gt;\n    &lt;\/body&gt;\n  &lt;\/html&gt;\n`<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"DevEx\"><\/span>\n<p>  DevEx<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0628\u0631\u0631\u0633\u06cc \u062a\u0627\u06a9\u0646\u0648\u0646 &#8211; \u0645\u0627 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Express \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0627\u0631\u0627\u06cc\u06cc\u200c\u0647\u0627\u06cc \u062b\u0627\u0628\u062a \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645\u060c \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Svelte \u0645\u0633\u062a\u0642\u0644 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645\u060c \u0648 \u0627\u0644\u06af\u0648\u06cc\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645 \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 Svelte \u0631\u0627 \u0627\u0632 \u062f\u0627\u0631\u0627\u06cc\u06cc\u200c\u0647\u0627\u06cc \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644\u200c\u0634\u062f\u0647 Vite \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0627\u0632 \u0633\u0631\u0648\u0631 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0647\u0646\u0648\u0632 \u0647\u0645 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 Svelte \u0648 \u06a9\u067e\u06cc \u06a9\u0631\u062f\u0646 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u062f\u0627\u0631\u0627\u06cc\u06cc \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0634\u062f\u0647 \u062f\u0631 \u0641\u0647\u0631\u0633\u062a\u06cc \u0628\u0631\u0627\u06cc Express \u062f\u0627\u0631\u062f\u060c \u06a9\u0647 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0627\u062f\u06cc \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627 \u0647\u0645\u0632\u0645\u0627\u0646 \u0628\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0641\u0639\u0627\u0644 \u0628\u0631\u0646\u0627\u0645\u0647 Svelte \u0627\u0633\u062a.  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0686\u0646\u062f \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0634\u0648\u062f.<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 Makefile \u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u0628\u06cc\u0644\u062f Vite \u0648 \u06a9\u067e\u06cc \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0634\u062f\u0647 \u062f\u0631 \u0641\u0647\u0631\u0633\u062a \u062f\u0627\u0631\u0627\u06cc\u06cc \u0647\u0627\u06cc Express &#8211;<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"c\"># .\/Makefile<\/span>\nSHELL :<span class=\"o\">=<\/span> \/bin\/bash\n\nbuild:\n    <span class=\"nb\">pushd <\/span>svelte <span class=\"se\">\\<\/span>\n    <span class=\"o\">&amp;&amp;<\/span> npm <span class=\"nb\">install<\/span> <span class=\"se\">\\<\/span>\n    <span class=\"o\">&amp;&amp;<\/span> npm run build <span class=\"se\">\\<\/span>\n    <span class=\"o\">&amp;&amp;<\/span> <span class=\"nb\">popd<\/span> <span class=\"se\">\\<\/span>\n    <span class=\"o\">&amp;&amp;<\/span> <span class=\"nb\">rm<\/span> <span class=\"nt\">-f<\/span> .\/public\/assets\/<span class=\"k\">*<\/span> <span class=\"se\">\\<\/span>\n    <span class=\"o\">&amp;&amp;<\/span> <span class=\"nb\">cp<\/span> .\/svelte\/dist\/assets\/<span class=\"k\">*<\/span> .\/public\/assets\/\n\nrun:\n    npm <span class=\"nb\">install<\/span> <span class=\"se\">\\<\/span>\n    <span class=\"o\">&amp;&amp;<\/span> node server.js\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u06cc\u06a9 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u067e\u0648\u0633\u062a\u0647 \u06a9\u0648\u0686\u06a9 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>.\/watch-svelte<\/code> \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062f\u0631 <code>*.svelte<\/code> \u0641\u0627\u06cc\u0644 \u0647\u0627 \u0648 \u0628\u06cc\u0644\u062f \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062e\u0648\u062f\u06a9\u0627\u0631 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.  \u0627\u06cc\u0646 \u0645\u0627 \u0631\u0627 \u0627\u0632 \u0627\u062c\u0631\u0627\u06cc \u062f\u0633\u062a\u0648\u0631\u06cc \u0647\u0631 \u0628\u0627\u0631 \u06a9\u0647 \u06cc\u06a9 \u062c\u0632\u0621 Svelte \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645 \u0646\u062c\u0627\u062a \u0645\u06cc\u200c\u062f\u0647\u062f &#8211;<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"c\"># .\/watch-svelte<\/span>\n<span class=\"c\">#!\/bin\/bash<\/span>\n\ninotifywait <span class=\"nt\">-q<\/span> <span class=\"nt\">-m<\/span> <span class=\"nt\">-r<\/span> <span class=\"nt\">-e<\/span> modify,create,delete .\/svelte | <span class=\"k\">while <\/span><span class=\"nb\">read <\/span>DIRECTORY EVENT FILE<span class=\"p\">;<\/span> <span class=\"k\">do\n    if<\/span> <span class=\"o\">[[<\/span> <span class=\"nv\">$FILE<\/span> <span class=\"o\">==<\/span> <span class=\"k\">*<\/span>.svelte <span class=\"o\">]]<\/span><span class=\"p\">;<\/span> <span class=\"k\">then\n        <\/span>make build\n    <span class=\"k\">fi\ndone<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA_%D8%AA%D9%88%D9%84%DB%8C%D8%AF\"><\/span>\n<p>  \u0633\u0627\u062e\u062a \u062a\u0648\u0644\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0631 \u062a\u0648\u0644\u06cc\u062f\u060c \u06cc\u06a9 Dockerfile \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0647\u0645 \u0628\u0631\u0646\u0627\u0645\u0647 Svelte \u0631\u0627 \u0645\u06cc \u0633\u0627\u0632\u062f \u0648 \u0647\u0645 \u0628\u0631\u0646\u0627\u0645\u0647 Express \u0631\u0627 \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0645\u06cc \u06a9\u0646\u062f.  \u0638\u0631\u0641 \u0628\u0647 \u062f\u0633\u062a \u0622\u0645\u062f\u0647 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u062f\u0631 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc \u0627\u062c\u0631\u0627 \u06a9\u0631\u062f\u060c \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644 \u0645\u0627 \u062f\u0631 fly.io \u0645\u0633\u062a\u0642\u0631 \u0634\u062f\u0647 \u0627\u0633\u062a<\/p>\n<p>Dockerfile \u0627\u0632 \u06cc\u06a9 \u0633\u0627\u062e\u062a \u0686\u0646\u062f \u0645\u0631\u062d\u0644\u0647\u200c\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647 \u06a9\u0648\u0686\u06a9\u200c\u062a\u0631 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u0627\u0646\u062f\u0627\u0632\u0647 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u062d\u0627\u0635\u0644 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0632\u06cc\u0631\u0627 \u0645\u0627 \u0647\u06cc\u0686 \u06cc\u06a9 \u0627\u0632 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u200c\u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 Vite \u06cc\u0627 Svelte \u0631\u0627 \u0634\u0627\u0645\u0644 \u0646\u0645\u06cc\u200c\u0634\u0648\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight docker\"><code><span class=\"k\">FROM<\/span><span class=\"w\"> <\/span><span class=\"s\">node:18-alpine<\/span><span class=\"w\"> <\/span><span class=\"k\">as<\/span><span class=\"w\"> <\/span><span class=\"s\">svelte-build<\/span>\n\n<span class=\"k\">RUN <\/span><span class=\"nb\">mkdir<\/span> <span class=\"nt\">-p<\/span> \/home\/node\/svelte\/node_modules <span class=\"o\">&amp;&amp;<\/span> <span class=\"nb\">chown<\/span> <span class=\"nt\">-R<\/span> node:node \/home\/node\/svelte\n\n<span class=\"k\">WORKDIR<\/span><span class=\"s\"> \/home\/node\/svelte<\/span>\n\n<span class=\"k\">ADD<\/span><span class=\"s\"> svelte .\/<\/span>\n<span class=\"k\">RUN <\/span>npm <span class=\"nb\">install<\/span>\n<span class=\"k\">RUN <\/span>npm run build\n\n<span class=\"k\">FROM<\/span><span class=\"s\"> ubuntu:latest<\/span>\n\n<span class=\"k\">RUN <\/span>apt-get update <span class=\"o\">&amp;&amp;<\/span> apt-get <span class=\"nb\">install<\/span> <span class=\"nt\">-y<\/span> gnupg2 wget vim\n<span class=\"k\">RUN <\/span>wget <span class=\"nt\">-q<\/span> <span class=\"nt\">-O<\/span> - https:\/\/dl-ssl.google.com\/linux\/linux_signing_key.pub | apt-key add - <span class=\"se\">\\\n<\/span>    <span class=\"o\">&amp;&amp;<\/span> sh <span class=\"nt\">-c<\/span> <span class=\"s1\">'echo \"deb [arch=amd64] http:\/\/dl.google.com\/linux\/chrome\/deb\/ stable main\" &gt;&gt; \/etc\/apt\/sources.list.d\/google.list'<\/span> <span class=\"se\">\\\n<\/span>    <span class=\"o\">&amp;&amp;<\/span> wget <span class=\"nt\">-q<\/span> <span class=\"nt\">-O<\/span> - https:\/\/deb.nodesource.com\/setup_16.x | bash - <span class=\"se\">\\\n<\/span>    <span class=\"o\">&amp;&amp;<\/span> apt-get update <span class=\"se\">\\\n<\/span>    <span class=\"o\">&amp;&amp;<\/span> <span class=\"nv\">DEBIAN_FRONTEND<\/span><span class=\"o\">=<\/span>noninteractive apt-get <span class=\"nb\">install<\/span> <span class=\"nt\">-yq<\/span> <span class=\"nt\">--no-install-recommends<\/span> nodejs\n    &amp;&amp; rm -rf \/var\/lib\/apt\/lists\/*\n\n<span class=\"k\">RUN <\/span>useradd <span class=\"nt\">-Ums<\/span> \/bin\/bash node\n<span class=\"k\">RUN <\/span><span class=\"nb\">mkdir<\/span> <span class=\"nt\">-p<\/span> \/home\/node\/app\/node_modules <span class=\"o\">&amp;&amp;<\/span> <span class=\"nb\">chown<\/span> <span class=\"nt\">-R<\/span> node:node \/home\/node\/app\n\n<span class=\"k\">WORKDIR<\/span><span class=\"s\"> \/home\/node\/app<\/span>\n<span class=\"k\">USER<\/span><span class=\"s\"> node<\/span>\n\n<span class=\"k\">ADD<\/span><span class=\"s\"> public .\/public<\/span>\n<span class=\"k\">COPY<\/span><span class=\"s\"> --from=svelte-build --chown=node:node \/home\/node\/svelte\/dist\/assets\/* .\/public\/assets\/<\/span>\n\n<span class=\"k\">COPY<\/span><span class=\"s\"> server.js .\/<\/span>\n<span class=\"k\">COPY<\/span><span class=\"s\"> package.json .\/<\/span>\n<span class=\"k\">RUN <\/span>npm <span class=\"nb\">install<\/span>\n\n<span class=\"k\">EXPOSE<\/span><span class=\"s\"> 3000<\/span>\n\n<span class=\"k\">CMD<\/span><span class=\"s\"> node server.js<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648 \u0628\u0633!  \u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u06cc\u06a9 \u0645\u0631\u062c\u0639 \u0645\u0641\u06cc\u062f \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Svelte \u062f\u0631 \u0633\u0627\u06cc\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0645\u06cc\u06a9\u0631\u0648 \u0628\u0627\u0634\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc SvelteKit \u063a\u06cc\u0631 \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a.<\/p>\n<p>\u06a9\u062f \u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9<\/p>\n<p><em>\u062a\u0635\u0648\u06cc\u0631 \u0647\u062f\u0631 \u0628\u0627 \u06a9\u0645\u06a9 DALL\u00b7E 2 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f<\/em><\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0646 Svelte \u0631\u0627 \u062e\u06cc\u0644\u06cc \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u0645 \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u0645 \u0627\u0632 \u0622\u0646 \u062f\u0631 \u0647\u0645\u0647 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0645! \u0627\u063a\u0644\u0628 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0645\u06cc\u06a9\u0631\u0648 \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0628\u0647 \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0627\u0645\u0644 \u0646\u06cc\u0627\u0632 \u0646\u062f\u0627\u0631\u0646\u062f &#8211; \u0622\u0646\u0647\u0627 \u0686\u0646\u062f \u0635\u0641\u062d\u0647 HTML \u0628\u0627 \u0686\u0646\u062f \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc API \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0647\u0633\u062a\u0646\u062f. SvelteKit \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f \u0627\u0633\u062a\u060c \u0632\u06cc\u0631\u0627 \u0646\u06cc\u0627\u0632\u06cc &hellip;<\/p>\n","protected":false},"author":2,"featured_media":4602,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-4601","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/4601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=4601"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/4601\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/4602"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=4601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=4601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=4601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}