Commit 58ca7746 authored by Kristian Freeman's avatar Kristian Freeman

Add express-static

parent a086b90b
const PORT = process.env.port || 8080;
const express = require("express");
const app = express();
app.listen(PORT, () => console.log(`Express app listening on ${PORT}`));
This diff is collapsed.
{
"name": "express-redirect",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.4"
}
}
const PORT = process.env.port || 8080;
const express = require("express");
const app = express();
app.set("view engine", "pug");
/*
* In this example, we've set up a basic express application
* with a single route: "/". This route renders the template
* at views/index.pug.
*
* The view is _mostly_ set up, but we need to do two things in
* order to see the rendered page as we'd expect.
*
* First, we need to enable "static file" support for our
* express application. Call the app.use function, passing in
* the function express.static as the argument. express.static
* takes one argument, the path where your static files will be
* stored. Use the string "public" to indicate that our static
* files will live in the "public" folder (go ahead and create
* that folder in the exercise directory, too!)
*
* Now we'll download a CSS framework and add it to our application.
* Go to https://getbootstrap.com/docs/4.1/getting-started/download
* and click the "Download" button under the "Compiled CSS and JS"
* section. The downloaded ZIP should have two folders inside of it,
* "css" and "js". Extract those files (let me know if you need help)
* and drag both folders into your "public" folder. It should end up
* looking like this:
*
* public/
* ├── css
* │   └── bootstrap.css
* │   └── // more files...
* └── js
* └── bootstrap.js
*    └── // more files...
*
* Restart your application, and then go to view/index.pug to finish
* the exercise!
*
*/
app.get("/", (req, res) => res.render("index"));
app.listen(PORT, () => console.log(`Express app listening on ${PORT}`));
This diff is collapsed.
{
"name": "express-static",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.4",
"pug": "^2.0.3"
}
}
.container {
max-width: 960px;
}
/*
* Custom translucent site header
*/
.site-header {
background-color: rgba(0, 0, 0, 0.85);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
.site-header a {
color: #999;
transition: ease-in-out color 0.15s;
}
.site-header a:hover {
color: #fff;
text-decoration: none;
}
/*
* Dummy devices (replace them with your own or something else entirely!)
*/
.product-device {
position: absolute;
right: 10%;
bottom: -30%;
width: 300px;
height: 540px;
background-color: #333;
border-radius: 21px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.product-device::before {
position: absolute;
top: 10%;
right: 10px;
bottom: 10%;
left: 10px;
content: "";
background-color: rgba(255, 255, 255, 0.1);
border-radius: 5px;
}
.product-device-2 {
top: -25%;
right: auto;
bottom: 0;
left: 5%;
background-color: #e5e5e5;
}
/*
* Extra utilities
*/
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}
.flex-equal > * {
-ms-flex: 1;
-webkit-box-flex: 1;
flex: 1;
}
@media (min-width: 768px) {
.flex-md-equal > * {
-ms-flex: 1;
-webkit-box-flex: 1;
flex: 1;
}
}
.overflow-hidden {
overflow: hidden;
}
html
head
//- We need to add two CSS links here.
//- A CSS link is defined in pug with the following syntax:
//-
//- link(href="/<css_path>" rel="stylesheet")
//-
//- Import two CSS files from the following CSS paths:
//- 1. /css/bootstrap.css
//- 2. /css/product.css
//-
//- Once you've added both CSS link tags, go to the root
//- path of your application in-browser to see the finished result!
body
nav.site-header.sticky-top.py-1
.container.d-flex.flex-column.flex-md-row.justify-content-between
a.py-2(href='#')
svg.d-block.mx-auto(xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewbox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round')
circle(cx='12' cy='12' r='10')
line(x1='14.31' y1='8' x2='20.05' y2='17.94')
line(x1='9.69' y1='8' x2='21.17' y2='8')
line(x1='7.38' y1='12' x2='13.12' y2='2.06')
line(x1='9.69' y1='16' x2='3.95' y2='6.06')
line(x1='14.31' y1='16' x2='2.83' y2='16')
line(x1='16.62' y1='12' x2='10.88' y2='21.94')
a.py-2.d-none.d-md-inline-block(href='#') Tour
a.py-2.d-none.d-md-inline-block(href='#') Product
a.py-2.d-none.d-md-inline-block(href='#') Features
a.py-2.d-none.d-md-inline-block(href='#') Enterprise
a.py-2.d-none.d-md-inline-block(href='#') Support
a.py-2.d-none.d-md-inline-block(href='#') Pricing
a.py-2.d-none.d-md-inline-block(href='#') Cart
.position-relative.overflow-hidden.p-3.p-md-5.m-md-3.text-center.bg-light
.col-md-5.p-lg-5.mx-auto.my-5
h1.display-4.font-weight-normal Punny headline
p.lead.font-weight-normal
| And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple&apos;s marketing pages.
a.btn.btn-outline-secondary(href='#') Coming soon
.product-device.box-shadow.d-none.d-md-block
.product-device.product-device-2.box-shadow.d-none.d-md-block
.d-md-flex.flex-md-equal.w-100.my-md-3.pl-md-3
.bg-dark.mr-md-3.pt-3.px-3.pt-md-5.px-md-5.text-center.text-white.overflow-hidden
.my-3.py-3
h2.display-5 Another headline
p.lead And an even wittier subheading.
.bg-light.box-shadow.mx-auto(style='width: 80%; height: 300px; border-radius: 21px 21px 0 0;')
.bg-light.mr-md-3.pt-3.px-3.pt-md-5.px-md-5.text-center.overflow-hidden
.my-3.p-3
h2.display-5 Another headline
p.lead And an even wittier subheading.
.bg-dark.box-shadow.mx-auto(style='width: 80%; height: 300px; border-radius: 21px 21px 0 0;')
.d-md-flex.flex-md-equal.w-100.my-md-3.pl-md-3
.bg-light.mr-md-3.pt-3.px-3.pt-md-5.px-md-5.text-center.overflow-hidden
.my-3.p-3
h2.display-5 Another headline
p.lead And an even wittier subheading.
.bg-dark.box-shadow.mx-auto(style='width: 80%; height: 300px; border-radius: 21px 21px 0 0;')
.bg-primary.mr-md-3.pt-3.px-3.pt-md-5.px-md-5.text-center.text-white.overflow-hidden
.my-3.py-3
h2.display-5 Another headline
p.lead And an even wittier subheading.
.bg-light.box-shadow.mx-auto(style='width: 80%; height: 300px; border-radius: 21px 21px 0 0;')
.d-md-flex.flex-md-equal.w-100.my-md-3.pl-md-3
.bg-light.mr-md-3.pt-3.px-3.pt-md-5.px-md-5.text-center.overflow-hidden
.my-3.p-3
h2.display-5 Another headline
p.lead And an even wittier subheading.
.bg-white.box-shadow.mx-auto(style='width: 80%; height: 300px; border-radius: 21px 21px 0 0;')
.bg-light.mr-md-3.pt-3.px-3.pt-md-5.px-md-5.text-center.overflow-hidden
.my-3.py-3
h2.display-5 Another headline
p.lead And an even wittier subheading.
.bg-white.box-shadow.mx-auto(style='width: 80%; height: 300px; border-radius: 21px 21px 0 0;')
.d-md-flex.flex-md-equal.w-100.my-md-3.pl-md-3
.bg-light.mr-md-3.pt-3.px-3.pt-md-5.px-md-5.text-center.overflow-hidden
.my-3.p-3
h2.display-5 Another headline
p.lead And an even wittier subheading.
.bg-white.box-shadow.mx-auto(style='width: 80%; height: 300px; border-radius: 21px 21px 0 0;')
.bg-light.mr-md-3.pt-3.px-3.pt-md-5.px-md-5.text-center.overflow-hidden
.my-3.py-3
h2.display-5 Another headline
p.lead And an even wittier subheading.
.bg-white.box-shadow.mx-auto(style='width: 80%; height: 300px; border-radius: 21px 21px 0 0;')
footer.container.py-5
.row
.col-12.col-md
svg.d-block.mb-2(xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewbox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round')
circle(cx='12' cy='12' r='10')
line(x1='14.31' y1='8' x2='20.05' y2='17.94')
line(x1='9.69' y1='8' x2='21.17' y2='8')
line(x1='7.38' y1='12' x2='13.12' y2='2.06')
line(x1='9.69' y1='16' x2='3.95' y2='6.06')
line(x1='14.31' y1='16' x2='2.83' y2='16')
line(x1='16.62' y1='12' x2='10.88' y2='21.94')
small.d-block.mb-3.text-muted &copy; 2017-2018
.col-6.col-md
h5 Features
ul.list-unstyled.text-small
li
a.text-muted(href='#') Cool stuff
li
a.text-muted(href='#') Random feature
li
a.text-muted(href='#') Team feature
li
a.text-muted(href='#') Stuff for developers
li
a.text-muted(href='#') Another one
li
a.text-muted(href='#') Last time
.col-6.col-md
h5 Resources
ul.list-unstyled.text-small
li
a.text-muted(href='#') Resource
li
a.text-muted(href='#') Resource name
li
a.text-muted(href='#') Another resource
li
a.text-muted(href='#') Final resource
.col-6.col-md
h5 Resources
ul.list-unstyled.text-small
li
a.text-muted(href='#') Business
li
a.text-muted(href='#') Education
li
a.text-muted(href='#') Government
li
a.text-muted(href='#') Gaming
.col-6.col-md
h5 About
ul.list-unstyled.text-small
li
a.text-muted(href='#') Team
li
a.text-muted(href='#') Locations
li
a.text-muted(href='#') Privacy
li
a.text-muted(href='#') Terms
\ No newline at end of file
......@@ -12,16 +12,16 @@ const posts = require("./lib/posts");
/*
* Next, we'll define a route, GET "/", that renders the actual template.
* If you don't remember how to define a route, look at some of our previous
* If you don't remember how to define a route, look at some of our previous
* exercises. Set the path to "/", and in the callback function, call
* res.render, passing the name of the template we want to render as the
* first argument (we want to render "index"), and the data we want to
* res.render, passing the name of the template we want to render as the
* first argument (we want to render "index"), and the data we want to
* pass into the template as the second argument. In our case, let's pass in
* an object with a key and value of "posts". We've already imported a "posts"
* array above, so we're going to use it in the template here.
*/
/*
/*
* Let's actually ensure that the application is set up, too. Call
* app.listen, passing in PORT as the first argument, and a callback
* function as the second: it can simply console.log something like
......@@ -30,7 +30,7 @@ const posts = require("./lib/posts");
*/
/*
* To ensure that everything is working, go to localhost:PORT (PORT defaults to 8080,
* To ensure that everything is working, go to localhost:PORT (PORT defaults to 8080,
* unless you change it or pass a PORT environment variable), and look for the template
* being rendered. If you see a couple blog post-looking text tags, congrats! You did it!
*/
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment