{"id":8814,"date":"2022-08-01T05:17:55","date_gmt":"2022-08-01T12:17:55","guid":{"rendered":"https:\/\/coderpad.io\/?post_type=programming-language&#038;p=8814"},"modified":"2023-09-15T06:16:25","modified_gmt":"2023-09-15T13:16:25","slug":"frontend-frameworks","status":"publish","type":"programming-language","link":"https:\/\/coderpad.io\/languages\/frontend-frameworks\/","title":{"rendered":"Frontend Frameworks"},"content":{"rendered":"\n<p>CoderPad provides you with a multi-file app to give your candidates a more realistic frontend coding experience. We currently support the following frameworks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>React<\/li>\n\n\n\n<li>Angular<\/li>\n\n\n\n<li>Vue<\/li>\n\n\n\n<li>Svelte<\/li>\n\n\n\n<li>HTML\/CSS\/JavaScript<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 You can find more information on each framework and its settings by viewing the <code>README.md<\/code> file located in the file directory.<\/p>\n<\/blockquote>\n\n\n\n<p>When you select a frontend framework to code in, you\u2019ll notice a multi-pane window that\u2019s similar to what you\u2019d find in popular IDEs.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The first pane displays the contents of the active file selected in the file tree.<\/li>\n\n\n\n<li>The second pane renders the output of your application.<\/li>\n\n\n\n<li>The third pane provides an interactive shell, server log output, and a console.<\/li>\n\n\n\n<li>A URL is provided if you\u2019d like to open the rendered app in a separate window.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/image-18.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"500\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/image-18-1024x500.png\" alt=\"\" class=\"wp-image-17210\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/image-18-1024x500.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/image-18-300x146.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/image-18-768x375.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/image-18-1536x750.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/image-18.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Make sure that candidates do not do all their work from the shell &#8211; instruct them to make changes directly in the files to ensure their code shows up in playback.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dependencies and libraries<\/h2>\n\n\n\n<p>CoderPad supports npm command usage via the shell. This means that you can npm i any version of any library in the package ecosystem. <a href=\"https:\/\/docs.npmjs.com\/cli\/v8\/using-npm\/config\" target=\"_blank\" rel=\"noopener\">You can also create an <code>.npmrc<\/code> file to customize the install logic of <code>npm<\/code><\/a>.<\/p>\n","protected":false},"parent":0,"menu_order":0,"template":"","class_list":["post-8814","programming-language","type-programming-language","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/programming-language\/8814","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/programming-language"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/programming-language"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=8814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}