[cb-#99] finish Server Static Paths

drashland · Dec 27, 2019 · 428ab7c · 428ab7c
1 parent 5fb09d7
commit 428ab7c
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 171 deletions.
diff --git a/...ublic/assets/img/example_code/tutorials/serving_static_paths/verification_1.png b/...ublic/assets/img/example_code/tutorials/serving_static_paths/verification_1.png
diff --git a/docs/src/example_code/tutorials/serving_static_paths/app.ts b/docs/src/example_code/tutorials/serving_static_paths/app.ts
@@ -1,15 +1,10 @@
 import Drash from "https://deno.land/x/drash/mod.ts";
 
-// Optional: You can add the DRASH_SERVER_DIRECTORY environment variable using
-// the below code if you prefer not to add it using the terminal.
-//
-// Deno.env().DRASH_SERVER_DIRECTORY = "/path/to/your/project";
-
 import HomeResource from "./home_resource.ts";
 
 let server = new Drash.Http.Server({
-  address: "localhost:1337",
-  directory: "/path/to/your/project",
+  address: "localhost:1447",
+  directory: "/private/var/src/deno-drash/docs/src/example_code/tutorials/serving_static_paths",
   resources: [HomeResource],
   response_output: "text/html",
   static_paths: ["/public"]

diff --git a/docs/src/example_code/tutorials/serving_static_paths/home_resource.ts b/docs/src/example_code/tutorials/serving_static_paths/home_resource.ts
@@ -1,44 +1,22 @@
 import Drash from "https://deno.land/x/drash/mod.ts";
 
-/**
- * Create an HTTP resource that handles HTTP requests to the / URI
- */
 export default class HomeResource extends Drash.Http.Resource {
-  /**
-   * Define the paths (a.k.a. URIs) that clients can use to access this resource.
-   */
+
   static paths = ["/"];
 
-  /**
-   * Handle GET requests.
-   */
   public GET() {
-    this.response.body = `<!DOCTYPE html>
-<html class="w-full h-full">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, user-scalable=no"/>
-    <title>Drash</title>
-    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
-    <link href="/public/style.css" rel="stylesheet">
-  </head>
-  <body class="w-full h-full">
-    <div class="flex justify-center w-full h-full">
-      <div class="self-center max-w-sm rounded overflow-hidden shadow-lg">
-        <div class="px-6 py-4">
-          <div class="font-bold text-xl mb-2">Hello</div>
-          <p class="text-grey-darker text-base my-text">This is my title and it is red.</p>
-        </div>
-        <div class="px-6 py-4">
-          <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#cool</span>
-          <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#made</span>
-          <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">#yay</span>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
-`;
+    this.response.body = `
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>Drash</title>
+        <link href="/public/style.css" rel="stylesheet">
+      </head>
+      <body>
+        <h1 class="my-text">This is my title and it is red.</h1>
+      </body>
+    </html>`;
+
     return this.response;
   }
 }
diff --git a/docs/src/example_code/tutorials/serving_static_paths/run.sh b/docs/src/example_code/tutorials/serving_static_paths/run.sh
diff --git a/docs/src/vue/components/global/p_deno_flag_allow_net.vue b/docs/src/vue/components/global/p_deno_flag_allow_net.vue
@@ -0,0 +1,3 @@
+<template lang="pug">
+p <code>--allow-net</code> is required because you want to allow clients to access your network. Your server will be running on your network; therefore, access to your network must be granted. You can learn more about the <code>--allow-net</code> flag at <a href="https://deno.land/std/manual.md" target="_BLANK">https://deno.land/std/manual.md</a>.
+</template>
diff --git a/docs/src/vue/components/global/p_deno_flag_allow_read_static.vue b/docs/src/vue/components/global/p_deno_flag_allow_read_static.vue
@@ -0,0 +1,3 @@
+<template lang="pug">
+p <code>--allow-read</code> is required because your server needs to read your static files; therefore, access to read your static files must be granted. You can learn more about the <code>--allow-read</code> flag at <a href="https://deno.land/std/manual.md" target="_BLANK">https://deno.land/std/manual.md</a>.
+</template>
diff --git a/docs/src/vue/components/global/page_tutorial.vue b/docs/src/vue/components/global/page_tutorial.vue
@@ -1,16 +1,25 @@
 <template lang="pug">
 div
-    page-header(:route="$route")
-    slot
-    end-of-tutorial
+  page-header(:route="$route")
+  div.row(v-if="toc")
+    div.col
+      hr
+      h2 Table Of Contents
+      ul-toc(:data="toc")
+  slot
 </template>
 
 <script>
 import Vue from "vue";
 
-let component = {};
-
-Vue.component("page-tutorial", component);
+let component = {
+  props: {
+    toc: {
+      required: false,
+      type: Object,
+    },
+  }
+};
 
 export default component;
 </script>

diff --git a/.../src/vue/components/pages/advanced_tutorials/content_negotiation/user_profiles/part_2.vue b/.../src/vue/components/pages/advanced_tutorials/content_negotiation/user_profiles/part_2.vue
@@ -78,7 +78,7 @@ page-tutorial-part(
               | server.run();
         li Run your app.
           code-block-slotted
-            template(v-slot:title) /path/to/your/project/app.ts
+            template(v-slot:title) Terminal
             template(v-slot:code)
               | deno --allow-net app.ts
           p <code>--allow-net</code> is required because you want to allow clients to access your network. Your server will be running on your network; therefore, access to your network must be granted. You can learn more about the <code>--allow-net</code> flag at <a href="https://deno.land/std/manual.md" target="_BLANK">https://deno.land/std/manual.md</a>.

diff --git a/.../src/vue/components/pages/advanced_tutorials/content_negotiation/user_profiles/part_3.vue b/.../src/vue/components/pages/advanced_tutorials/content_negotiation/user_profiles/part_3.vue
@@ -76,7 +76,7 @@ page-tutorial-part(
       ol
         li Run your app.
           code-block-slotted
-            template(v-slot:title) /path/to/your/project/app.ts
+            template(v-slot:title) Terminal
             template(v-slot:code)
               | deno --allow-net --allow-read app.ts
           p This time, your app requires two flags to run. You already know what the <code>--allow-net</code> flag does from Part 2. <code>--allow-read</code> is required because your resource requires read access to read your <code>users.json</code> file. You can learn more about the <code>--allow-read</code> flag at <a href="https://deno.land/std/manual.md" target="_BLANK">https://deno.land/std/manual.md</a>.

diff --git a/.../src/vue/components/pages/advanced_tutorials/content_negotiation/user_profiles/part_5.vue b/.../src/vue/components/pages/advanced_tutorials/content_negotiation/user_profiles/part_5.vue
@@ -77,7 +77,7 @@ page-tutorial-part(
       ol
         li Run your app.
           code-block-slotted
-            template(v-slot:title) /path/to/your/project/app.ts
+            template(v-slot:title) Terminal
             template(v-slot:code)
               | deno --allow-net --allow-read app.ts
         li Make a request in your browser and specify that you want the <code>text/html</code> representation of <code>/users/1</code>.

diff --git a/docs/src/vue/components/pages/tutorials/serving_static_paths.vue b/docs/src/vue/components/pages/tutorials/serving_static_paths.vue
@@ -1,126 +1,76 @@
-<template lang="pug">
-page-tutorial-default(
-    :data="data"
-    :custom="true"
-)
-    template(v-slot:custom)
-        div.row
-            div.col
-                hr
-                h2 Table Of Contents
-                ul-toc(:data="data.toc")
-        div.row
-            div.col
-                hr
-                h2#before-you-get-started Before You Get Started
-                ul
-                    li If you're using Drash to build a web app, then you might want to serve static paths that contain your CSS files, JS files, etc.
-                    li Drash uses <a href="https://raw.githubusercontent.com/jshttp/mime-db/v1.39.0/db.json">db.json from mime-db v1.39.0</a> for its MIME type database. It does not use deno_std's <a href="https://github.com/denoland/deno_std/tree/master/media_types" target="_BLANK">media_types</a> module.
-                    li If you want to see how Drash finds a MIME type of a file, then look at 
-                        a(href="https://github.com/crookse/deno-drash/blob/a85a294de13a1863c880169772a9b1eaa710a0e3/src/services/http_service.ts#L132" target="_BLANK") line 132 of http_service.ts
-                        | . Note that the <code>MimeDb</code> dictionary in this file is set in 
-                        a(href="https://github.com/crookse/deno-drash/blob/a85a294de13a1863c880169772a9b1eaa710a0e3/mod.ts#L46" target="_BLANK") mod.ts
-                        |  and is a direct import of db.json.
-                    list-item-download-source-code(:source_code_uri="$route.meta.source_code_uri")
-        div.row
-            div.col
-                hr
-                h2#folder-structure-end-state Folder Structure End State
-                ul
-                    li Upon completing this tutorial, your project's folder structure should look similar to:
-                        code-block(:data="data.example_code.folder_structure")
-        div.row
-            div.col
-                hr
-                h2#steps Steps
-                ol
-                    li Serving static files requires you to set the following environment variable: <code>DRASH_SERVER_DIRECTORY</code>. You can add it using the terminal ...
-                        code-block-slotted(:header="false")
-                            template(#code)
-                                | export DRASH_SERVER_DIRECTORY="/path/to/your/project"
-                        p ... or add it in your <code>app.ts</code> file using <code>Deno.env()</code>.
-                        code-block-slotted(:header="false")
-                            template(#code)
-                                | Deno.env().DRASH_SERVER_DIRECTORY = "/path/to/your/project";
-                        p The <code>DRASH_SERVER_DIRECTORY</code> environment variable is the directory that contains your <code>app.ts</code> file. In this tutorial, it's <code>/path/to/your/project</code>.
-                        p Do NOT add a trailing slash to the <code>DRASH_SERVER_DIRECTORY</code> environment variable. Doing so will cause Drash to parse the path with double slashes:
-                        code-block-slotted(:header="false")
-                            template(#code) /path/to/your/project//your-static-path/some-file.extension
-                        p The logic that handles static paths will prepend the value of the <code>DRASH_SERVER_DIRECTORY</code> environment variable to each static path listed in the <code>static_paths</code> config in Step 2.
-                    li Create your app file.
-                        ul
-                            li Take note of the <code>static_paths</code> config. This is the config that tells your Drash server what paths contain static files.
-                        code-block(:data="data.example_code.app")
-                    li Create your HTTP resource class file and have it serve an HTML document (as a string) with your <code>style.css</code> file that's located in your <code>/public</code> directory.
-                        code-block(:data="data.example_code.home_resource")
-                    li Create your <code>style.css</code> file.
-                        code-block(:data="data.example_code_public.style" title="/path/to/your/project/public/style.css")
-                    li Run your app.
-                        code-block(:data="data.example_code.run")
-        div.row
-            div.col
-                hr
-                h2#what-is-the-code-doing What Is The Code Doing?
-                h3 <code>app.ts</code>
-                ol
-                    li Drash is imported so that all subsequent lines in the file have access to the <code>Drash</code> namespace.
-                    li The <code>HomeResource</code> class is imported to be used in the Drash server's <code>resources</code> config.
-                    li The Drash server is created.
-                        ul
-                            li The address for the server is set to <code>localhost:1337</code>. This means the full address to <code>HomeResource</code> is <code>localhost:1337/</code>.
-                            li The default response output is set to <code>text/html</code>. This means all responses from the server will default to the <code>text/html</code> MIME type. By default, Drash servers can handle the following types: <code>text/html</code>, <code>application/json</code>, <code>application/xml</code>, and <code>text/xml</code>. Drash servers can handle more content types, but you have to add that code. Read <a :href="$conf.base_url + '/#/tutorials/adding-content-types'">Adding Content Types</a> for more information.
-                            li The Drash server is given one resource: <code>HomeResource</code>.
-                    li The Drash server's <code>run()</code> method is invoked so that when <code>app.ts</code> is passed to the <code>deno</code> command in the terminal, the Drash server is started.
-                h3 <code>home_resource.ts</code>
-                ol
-                    li Drash is imported so that all subsequent lines in the file have access to the <code>Drash</code> namespace.
-                    li <code>HomeResource</code> contains a <code>GET()</code> method. This method will handle all <code>GET</code> requests to <code>HomeResource</code>. When a client makes a <code>GET</code> request to <code>HomeResource</code>, the response the client will receive is the HTML assigned to the <code>response</code> object's <code>body</code> property. All resources have access to the <code>response</code> object via <code>this.response</code>.
-                    li The HTML that <code>HomeResource</code> sets in the <code>response</code> object's <code>body</code> property has a <code>link</code> tag in the <code>head</code> tag that references <code>/public/style.css</code>. This means when the client receives the initial HTML response, the browser will make a subsequent request for the <code>style.css</code> file. When the Drash server receives the request for the <code>style.css</code> file, it will return the contents of the <code>style.css</code> file and set the response's <code>Content-Type</code> header to the correct MIME type (<code>text/css</code>), so the browser can properly handle the <code>style.css</code> file. The <code>style.css</code> sets <code>.my-text</code> to red.
-                    li The path (a.k.a. URI) that <code>HomeResource</code> opens up to clients is <code>/</code> (in the <code>static paths</code> property). This means clients can only access <code>HomeResource</code> through the <code>/</code> URI.
-                    li All resource classes MUST extend <code>Drash.Http.Resource</code>. You can create your own base resource class, but your base resource class has to extend <code>Drash.Http.Resource</code> before it can be extended further.
-                h3 <code>deno</code> (in the terminal)
-                ol
-                    li Deno runs <code>app.ts</code> and:
-                        ol
-                            li Allows network access via <code>--allow-net</code> flag.
-                            li Allows environment access via <code>--allow-env</code> flag.
-                        p The <code>--allow-net</code> flag is added so that the server will work.
-                        p The <code>--allow-env</code> flag is added because <code>Drash.Http.Response</code> objects require environment access if they're setup to serve static paths. Serving static paths isn't setup in this tutorial, but the <code>Drash.Http.Response</code> class compiles with the code that requires access to the environment. This means the <code>--allow-env</code> flag is always required.
-        div.row
-            div.col
-                hr
-                h2#screenshot Screenshot
-                p Your app should look like the following when you've completed this tutorial:
-                a(href="/deno-drash/public/assets/img/serving_static_paths.png")
-                    img(:src="$conf.base_url + '/public/assets/img/serving_static_paths.png'")
-</template>
-
 <script>
 export const resource = {
-    paths: ["/tutorials/serving-static-paths"],
-    meta: {
-        title: "Serving Static Paths",
-        source_code_uri: "/tutorials/serving_static_paths"
-    }
+  paths: ["/tutorials/serving-static-paths"],
+  meta: {
+    title: "Serving Static Paths",
+    source_code_uri: "/tutorials/serving_static_paths"
+  }
 }
 
 export default {
-    data() {
-        return {
-            data: {
-                example_code: this.$app_data.example_code['/docs/src/example_code/tutorials/serving_static_paths'],
-                example_code_public: this.$app_data.example_code['/docs/src/example_code/tutorials/serving_static_paths/public'],
-                toc: {
-                    items: [
-                        "Before You Get Started",
-                        "Folder Structure End State",
-                        "Steps",
-                        "What Is The Code Doing?",
-                        "Screenshot"
-                    ]
-                }
-            }
-        };
-    },
+  data() {
+    return {
+      data: {
+        example_code: this.$app_data.example_code['/docs/src/example_code/tutorials/serving_static_paths'],
+        example_code_public: this.$app_data.example_code['/docs/src/example_code/tutorials/serving_static_paths/public'],
+        toc: {
+          items: [
+            "Before You Get Started",
+            "Folder Structure End State",
+            "Steps",
+            "Verification"
+          ]
+        }
+      }
+    };
+  },
 }
 </script>
+
+<template lang="pug">
+page-tutorial(
+  :toc="toc"
+)
+    div.row
+      div.col
+        hr
+        h2#before-you-get-started Before You Get Started
+        ul
+          li In this tutorial, you will build a very simple HTML page that can serve a CSS file.
+          list-item-download-source-code(:source_code_uri="$route.meta.source_code_uri")
+    div.row
+      div.col
+        hr
+        h2#folder-structure-end-state Folder Structure End State
+        ul
+          li Upon completing this tutorial, your project's folder structure should look similar to:
+            code-block(:data="data.example_code.folder_structure")
+    div.row
+      div.col
+        hr
+        h2#steps Steps
+        ol
+          li Create your app file.
+            code-block(:data="data.example_code.app" line_highlight="7,10")
+            p The <code>static_paths</code> config tells your Drash server what paths on your filesystem contain static files that can be served to clients. Ultimately, your Drash server will prefix the <code>directory</code> config with your paths in your <code>static_paths</code> config. For example, your Drash server will take a request to <code>/public/assets/css/style.css</code> and resolve it to <code>{directory_config}/public/assets/css/style.css</code>.
+          li Create your <code>style.css</code> file in your static directory.
+            code-block(:data="data.example_code_public.style" title="/path/to/your/project/public/style.css")
+          li Create your resource file.
+            code-block(:data="data.example_code.home_resource")
+            p Your resource file will serve HTML; and your HTML will reference <code>style.css</code>.
+    div.row
+      div.col
+        hr
+        h2#verification Verification
+        ol
+          li Run your app.
+            code-block-slotted
+              template(v-slot:title) Terminal
+              template(v-slot:code)
+                | deno --allow-net --allow-read app.ts
+            p-deno-flag-allow-net
+            p-deno-flag-allow-read-static
+            p You should receive the following response:
+            a(href="/deno-drash/public/assets/img/serving_static_paths.png")
+              img(:src="$conf.base_url + '/public/assets/img/example_code/tutorials/serving_static_paths/verification_1.png'")
+</template>