{"id":3256,"date":"2022-04-12T10:06:58","date_gmt":"2022-04-12T10:06:58","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/getting-started-with-remix-framework\/"},"modified":"2026-04-28T14:07:02","modified_gmt":"2026-04-28T14:07:02","slug":"sakat-stradat-ar-remix-ietvarstrukturu","status":"publish","type":"post","link":"https:\/\/thecodest.co\/lv\/blog\/getting-started-with-the-remix-framework\/","title":{"rendered":"Darba s\u0101k\u0161ana ar Remix Framework"},"content":{"rendered":"\n<p>Yes this is yet another <a href=\"https:\/\/thecodest.co\/blog\/software-projects-where-you-can-use-javascript\/\">JS<\/a> framework but just stick for a bit longer as this framework is made by <a href=\"https:\/\/twitter.com\/mjackson\" rel=\"nofollow\">Michael Jackson<\/a> and <a href=\"https:\/\/twitter.com\/ryanflorence\" rel=\"nofollow\">Ryan Florence<\/a> the smart guys behind <a href=\"https:\/\/reactrouter.com\/\" rel=\"nofollow\">React Router<\/a>. Hope that got your attention, so let&#8217;s see what&#8217;s good about the <strong>Remix framework<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/remix-meme.png\" alt=\"comic JS framwork with brain\" title=\"The Remix Framework comic\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Technical Details<\/h2>\n\n\n\n<p>Remix is a server side framework built on top of the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API\" rel=\"nofollow\">Web Fetch API<\/a> and <a href=\"https:\/\/reactrouter.com\/)\" rel=\"nofollow\">React Router<\/a>, each route in remix have three primary exports a <code>loader<\/code>, an <code>action<\/code> and a default <code>component<\/code> export. The <code>loader<\/code> function will be called on the server before rendering to provide <a href=\"https:\/\/thecodest.co\/lv\/blog\/app-data-collection-security-risks-value-and-types-explored\/\">data<\/a> to the route, the <code>action<\/code> function is responsible for data mutation, the default export is the component that will be rendered on that route. The <code>loader<\/code> and <code>action<\/code> functions are run server side only and must return a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Response\" rel=\"nofollow\">Response<\/a> object, the <code>default<\/code> export is run both on server and client side.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<p>To initialize a new Remix <a href=\"https:\/\/thecodest.co\/lv\/dictionary\/why-do-projects-fail\/\">project<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">npx create-remix@latest\n\nIMPORTANT: Choose \"Just the basics\", and then \"Remix App Server\" when prompted\n\ncd [whatever you named the project]\nnpm run dev\n```<\/code><\/pre>\n\n\n\n<p>Open up <a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000<\/a>. the <code>create-remix<\/code> command will get you a starter template with the following structure:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/folders.png\" alt=\"remix folder architecture - scr\" title=\"remix folder architecture\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <code>app<\/code> folder will contain all your application routes and <a href=\"https:\/\/thecodest.co\/lv\/dictionary\/what-is-code-refactoring\/\">code<\/a>.<\/li>\n\n\n\n<li>The <code>app\/entry.client.jsx<\/code> is the first piece of code that runs in the browser and is used to <code>hydrate<\/code> the <a href=\"https:\/\/thecodest.co\/lv\/blog\/conditional-component-visibility-in-react\/\">React<\/a> components.<\/li>\n\n\n\n<li>The <code>app\/entry.server.jsx<\/code> is the first piece of code that runs when a request hits the server, this file renders our React app to a string\/stream and send that as our response to the client.<\/li>\n\n\n\n<li>The <code>app\/root.jsx<\/code> is where the root component goes.<\/li>\n\n\n\n<li>The <code>app\/routes\/<\/code> is where all your route modules will go, remix uses a file-system based routing.<\/li>\n\n\n\n<li>The <code>public<\/code> folder is where your static assets go (images\/fonts\/etc).<\/li>\n\n\n\n<li>The <code>remix.config.js<\/code> is where the remix configuration can be set.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Less talk, show me the code<\/h2>\n\n\n\n<p>Let&#8217;s check a <code>login.jsx<\/code> route example inside of a Remix app:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">import { redirect, json, Form, useActionData, useTransition } from 'remix';\nimport { isLoggedIn, verifyLogin } from '..\/auth';\n\nexport const loader = async ({ request }) =&gt; {\nif (await isLoggedIn(request)) {\nreturn redirect('\/dashboard');\n}\n\nreturn json({ success: true });\n};\n\nexport const action = async ({ request }) =&gt; {\nconst formData = await request.formData();\nconst values = {\nemail: formData.get('email') ?? '',\npassword: formData.get('password') ?? '',\n};\n\nconst errors = await verifyLogin(values);\nif (errors) {\nreturn json({ errors }, { status: 400 });\n}\n\nreturn redirect('\/dashboard');\n};\n\nexport default function LoginRoute() {\nconst actionData = useActionData();\nconst transition = useTransition();\nconst isSubmitting = transition.state === 'submitting';\n\nreturn (\n\nEmail\n\n{actionData?.errors?.email &amp;&amp;\n{actionData.errors.email}\n}\n\n  &lt;div&gt;\n    &lt;label htmlFor=\"password\"&gt;Password&lt;\/label&gt;\n    &lt;input id=\"password\" name=\"password\" type=\"password\" \/&gt;\n    {actionData?.errors?.password &amp;&amp; (\n      &lt;div&gt;{actionData.errors.password}&lt;\/div&gt;\n    )}\n  &lt;\/div&gt;\n\n  &lt;div&gt;\n    &lt;button type=\"submit\" disabled={isSubmitting}&gt;\n      {`Login ${isSubmitting ? '...' : ''}`}\n    &lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/Form&gt;\n\n);\n}\n```<\/code><\/pre>\n\n\n\n<p>The first thing happening here is the <code>loader<\/code> function checking if the user is already logged in with the <code>isLoggedIn<\/code> function and will <code>redirect<\/code> him to the <code>\/dashboard<\/code> route, if not it will simply return a <code>{ success: true }<\/code> response, then the login page gets rendered.<\/p>\n\n\n\n<p>The <code>LoginRoute<\/code> renders a form with an email and password inputs and a submit button, as you can see there are no <code>state<\/code> variables nor an <code>onSubmit<\/code> event handler in our component, it is because in remix every route can export an <code>action<\/code> and when a form is submitted with a <code>POST<\/code> method the action will be called and will handle that event.<\/p>\n\n\n\n<p>When the form gets submitted the <code>action<\/code> function will get the<br><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FormData\" rel=\"nofollow\">FormData<\/a> from the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Request\">Request<\/a> object <code>const formData = await request.formData()<\/code>, then are we are constructing the <code>values<\/code> object with an email and password properties, the <code>formData.get('email')<\/code> will look for the first matching field inside our form with a <code>name=\"email\"<\/code> property and return its value. We are checking if the credentials are correct with the <code>verifyLogin<\/code> function, here you could use any of your favorite <a href=\"https:\/\/thecodest.co\/lv\/blog\/hire-vue-js-developers\/\">JS<\/a> schema validation library and do a <code>fetch<\/code> to your custom backend to check if the login data are correct, if so we <code>redirect<\/code> the user to the <code>\/dashboard<\/code> route, else we return a <code>json<\/code> response with the errors object and an <code>HTTP status code 400<\/code>, the <code>useActionData<\/code> hook will return this errors object if there is any and we conditionnaly render the error message as in <code>{actionData?.errors?.email &amp;&amp; &lt;div&gt;{actionData.errors.email}&lt;\/div&gt;}<\/code>.<\/p>\n\n\n\n<p>The <code>useTransition<\/code> hook tells <a href=\"https:\/\/thecodest.co\/lv\/blog\/why-us-companies-are-opting-for-polish-developers\/\">us<\/a> everything about the page transition state, with the <code>isSubmitting<\/code> variable we are checking when a submission is occurring, if there is any we will <code>disable<\/code> the submit button and show <code>Login....<\/code> instead of <code>Login<\/code>, we could also show to the user a loading spinner or any other indication instead.<\/p>\n\n\n\n<p>The <code>json<\/code> function is just a shortcut for creating <code>application\/json<\/code> response objects. The <code>useLoaderData<\/code> hook returns the JSON parsed data from your route <code>loader<\/code>, the <code>useActionData<\/code> returns the route <code>action<\/code> parsed data.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">SEO Friendly<\/h2>\n\n\n\n<p>Each route can also export a <code>meta<\/code> function responsible for setting meta tags for your Html document, this way you can set a <code>title<\/code> and a <code>description<\/code> for every route and add any Open Graph or other meta tags you want.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">export const meta = () =&gt; {\nconst title = 'My Awesome Page';\nconst description = 'Super awesome page';\n\nreturn {\ncharset: 'utf-8',\ntitle,\ndescription,\nkeywords: 'Remix,Awesome',\n'twitter:image': 'https:\/\/awesome-page.com\/awesome.png',\n'twitter:card': 'summarylargeimage',\n'twitter:creator': '@awesome',\n'twitter:site': '@awesome',\n'twitter:title': title,\n'twitter:description': description,\n};\n};\n\nexport default function AwesomeRoute() {\nreturn\n\nAwesome Route\n\n;\n}\n```<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Useful links<\/h2>\n\n\n\n<p>We have just tackled the tip of the iceberg about Remix, there is so much more to know, here are some useful links:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/remix.run\/docs\/en\/v1\">Documenation<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/remix-run\/remix\">Github<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/remix-run\/remix\/tree\/main\/examples\">Examples folder<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/playlist?list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6\">Youtube playlist<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/discord.com\/invite\/remix\">Discord server<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p>What&#8217;s great about Remix is by getting better with it you&#8217;ll get better at <a href=\"https:\/\/thecodest.co\/lv\/blog\/find-your-ideal-stack-for-web-development\/\">web<\/a> fundamentals, as you have seen many of this article links point to the <a href=\"https:\/\/developer.mozilla.org\/en-US\/\">Mozilla docs<\/a>, this is what is meant by Remix being focused on web fundamentals it uses Web APIs like the Response and Request object to provide the users with a great <a href=\"https:\/\/thecodest.co\/lv\/blog\/enhance-your-application-with-professional-ux-auditing\/\">UX<\/a> plus you can still use all your React usual techniques and favorite libraries.<\/p>\n\n\n\n<p>We didn&#8217;t talk about all the great features provided by Remix in this article like <strong>Nested Routes<\/strong>, <strong>Error Boundaries<\/strong>, <strong>Remix Stacks<\/strong> but still, this article should give you a good idea about the philosophy behind Remix.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/thecodest.co\/contact\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1283\" height=\"460\" src=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/interested_in_cooperation_.png\" alt=\"\" class=\"wp-image-4927\" srcset=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/interested_in_cooperation_.png 1283w, https:\/\/thecodest.co\/app\/uploads\/2024\/05\/interested_in_cooperation_-300x108.png 300w, https:\/\/thecodest.co\/app\/uploads\/2024\/05\/interested_in_cooperation_-1024x367.png 1024w, https:\/\/thecodest.co\/app\/uploads\/2024\/05\/interested_in_cooperation_-768x275.png 768w, https:\/\/thecodest.co\/app\/uploads\/2024\/05\/interested_in_cooperation_-18x6.png 18w, https:\/\/thecodest.co\/app\/uploads\/2024\/05\/interested_in_cooperation_-67x24.png 67w\" sizes=\"auto, (max-width: 1283px) 100vw, 1283px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Remix ir pilna apjoma t\u012bmek\u013ca ietvarstrukt\u016bra, kas koncentr\u0113jas uz t\u012bmek\u013ca pamatiem un m\u016bsdien\u012bgu UX.<\/p>","protected":false},"author":2,"featured_media":3257,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-3256","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Getting Started with Remix Framework - The Codest<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/lv\/emuars\/sakat-stradat-ar-remix-ietvarstrukturu\/\" \/>\n<meta property=\"og:locale\" content=\"lv_LV\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Started with Remix Framework\" \/>\n<meta property=\"og:description\" content=\"Remix is a full-stack web framework focused on web fundamentals and modern UX.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/lv\/emuars\/sakat-stradat-ar-remix-ietvarstrukturu\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-12T10:06:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-28T14:07:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/3-minute_guide__remix_framework.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 min\u016btes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/getting-started-with-the-remix-framework\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/getting-started-with-the-remix-framework\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"Getting Started with Remix Framework\",\"datePublished\":\"2022-04-12T10:06:58+00:00\",\"dateModified\":\"2026-04-28T14:07:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/getting-started-with-the-remix-framework\\\/\"},\"wordCount\":772,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/getting-started-with-the-remix-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/3-minute_guide__remix_framework.png\",\"articleSection\":[\"Software Development\"],\"inLanguage\":\"lv-LV\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/getting-started-with-the-remix-framework\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/getting-started-with-the-remix-framework\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/getting-started-with-the-remix-framework\\\/\",\"name\":\"Getting Started with Remix Framework - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/getting-started-with-the-remix-framework\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/getting-started-with-the-remix-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/3-minute_guide__remix_framework.png\",\"datePublished\":\"2022-04-12T10:06:58+00:00\",\"dateModified\":\"2026-04-28T14:07:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/getting-started-with-the-remix-framework\\\/#breadcrumb\"},\"inLanguage\":\"lv-LV\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/getting-started-with-the-remix-framework\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"lv-LV\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/getting-started-with-the-remix-framework\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/3-minute_guide__remix_framework.png\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/3-minute_guide__remix_framework.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/getting-started-with-the-remix-framework\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Started with Remix Framework\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"lv-LV\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"lv-LV\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"lv-LV\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/lv\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Darba s\u0101k\u0161ana ar Remix Framework - The Codest","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thecodest.co\/lv\/emuars\/sakat-stradat-ar-remix-ietvarstrukturu\/","og_locale":"lv_LV","og_type":"article","og_title":"Getting Started with Remix Framework","og_description":"Remix is a full-stack web framework focused on web fundamentals and modern UX.","og_url":"https:\/\/thecodest.co\/lv\/emuars\/sakat-stradat-ar-remix-ietvarstrukturu\/","og_site_name":"The Codest","article_published_time":"2022-04-12T10:06:58+00:00","article_modified_time":"2026-04-28T14:07:02+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/3-minute_guide__remix_framework.png","type":"image\/png"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"5 min\u016btes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/getting-started-with-the-remix-framework\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/getting-started-with-the-remix-framework\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"Getting Started with Remix Framework","datePublished":"2022-04-12T10:06:58+00:00","dateModified":"2026-04-28T14:07:02+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/getting-started-with-the-remix-framework\/"},"wordCount":772,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/getting-started-with-the-remix-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/3-minute_guide__remix_framework.png","articleSection":["Software Development"],"inLanguage":"lv-LV","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/getting-started-with-the-remix-framework\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/getting-started-with-the-remix-framework\/","url":"https:\/\/thecodest.co\/blog\/getting-started-with-the-remix-framework\/","name":"Darba s\u0101k\u0161ana ar Remix Framework - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/getting-started-with-the-remix-framework\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/getting-started-with-the-remix-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/3-minute_guide__remix_framework.png","datePublished":"2022-04-12T10:06:58+00:00","dateModified":"2026-04-28T14:07:02+00:00","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/getting-started-with-the-remix-framework\/#breadcrumb"},"inLanguage":"lv-LV","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/getting-started-with-the-remix-framework\/"]}]},{"@type":"ImageObject","inLanguage":"lv-LV","@id":"https:\/\/thecodest.co\/blog\/getting-started-with-the-remix-framework\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/3-minute_guide__remix_framework.png","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/3-minute_guide__remix_framework.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/getting-started-with-the-remix-framework\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"Getting Started with Remix Framework"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"The Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"lv-LV"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"lv-LV","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"lv-LV","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/lv\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/posts\/3256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/comments?post=3256"}],"version-history":[{"count":8,"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/posts\/3256\/revisions"}],"predecessor-version":[{"id":8552,"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/posts\/3256\/revisions\/8552"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/media\/3257"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/media?parent=3256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/categories?post=3256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/tags?post=3256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}