├── .gitignore
├── LICENSE
├── README.md
├── functions
    └── hello-world
    │   └── hello-world.js
├── netlify.toml
└── public
    ├── favicon.ico
    ├── index.css
    ├── index.html
    └── script.js


/.gitignore:
--------------------------------------------------------------------------------
1 | /.netlify


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Netlify Labs
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## What this is
 2 | 
 3 | this shows how to use netlify with just plain html js and css, together with netlify functions.
 4 | 
 5 | ## How to use (1 click)
 6 | 
 7 | Click this to fork and deploy
 8 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-labs/vanilla-html-example)
 9 | 
10 | ## How to use (Manual)
11 | 
12 | Clone or fork this repo, link to a git host (like GitHub or GitLab), and deploy to Netlify at https://app.netlify.com
13 | 
14 | ## How to use (Netlify Dev)
15 | 
16 | Make sure you have the latest CLI version:
17 | 
18 | ```bash
19 | npm i -g netlify-cli
20 | ```
21 | 
22 | then:
23 | 
24 | ```
25 | git clone https://github.com/netlify-labs/vanilla-html-example # or clone your own fork of this repo
26 | cd vanilla-html-example
27 | netlify dev
28 | ```
29 | 
30 | and develop away! use `netlify functions:create` to scaffold new functions as needed
31 | 
32 | To deploy:
33 | 
34 | ```
35 | netlify init
36 | # optionally do a preview deploy: netlify deploy
37 | # or straight to prod: netlify deploy --prod
38 | ```
39 | 
40 | If you have an existing Netlify instance you want this code to take over, use `netlify link` instead.
41 | 
42 | You can check your login status with `netlify status`, and also check out the [browser extension](https://chrome.google.com/webstore/detail/netlify-browser-extension/dkhfpnphbcckigklfkaemnjdmghhcaoh?hl=en-US) and [menubar app](https://github.com/stefanjudis/netlify-menubar).
43 | 
44 | ## How to scaffold new functions, for example add a token-hider to hide API keys
45 | 
46 | Watch this 7 minute video: https://youtu.be/gWIK_QHyuWs
47 | 


--------------------------------------------------------------------------------
/functions/hello-world/hello-world.js:
--------------------------------------------------------------------------------
1 | exports.handler = async (event, context) => {
2 |   try {
3 |     const subject = event.queryStringParameters.name || "World"
4 |     return { statusCode: 200, body: JSON.stringify({ msg: `Hello ${subject}` }) }
5 |   } catch (err) {
6 |     return { statusCode: 500, body: err.toString() }
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | # example netlify.toml
2 | [build]
3 |   functions = "functions"
4 |   publish = "public"
5 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/netlify-labs/vanilla-html-example/eefa047c6b0cdc7464d18150f816db1e64034194/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.css:
--------------------------------------------------------------------------------
 1 | pre {
 2 |   margin: 0 auto;
 3 |   padding: 10px;
 4 |   background: lightcyan;
 5 |   text-align: center;
 6 | }
 7 | .center {
 8 |   text-align: center;
 9 |   padding: 10px;
10 | }
11 | .center button {
12 |   border: 3px solid green;
13 |   background: white;
14 |   border-radius: 10px;
15 |   padding: 10px;
16 | }
17 | .container {
18 |   margin: 0 auto;
19 |   max-width: 500px;
20 |   width: 50%;
21 | }
22 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>vanilla html js netlify example</title>
 8 | 
 9 |     <link rel="stylesheet" type="text/css" href="index.css" />
10 |     <script type="text/javascript" src="/script.js"></script>
11 |   </head>
12 |   <body>
13 |     <div class="container">
14 |       <h1>Vanilla HTML JS netlify example</h1>
15 |       <div class="center"><button id="button">Click me</button></div>
16 |       <pre id="message">
17 |       Click the button!
18 |     </pre
19 |       >
20 |       <div>
21 |         <a href="https://github.com/netlify-labs/vanilla-html-js-example">View source</a>
22 |       </div>
23 |     </div>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/public/script.js:
--------------------------------------------------------------------------------
 1 | window.onload = function() {
 2 |   const message = document.getElementById("message")
 3 |   document.getElementById("button").addEventListener("click", () => {
 4 |     console.log("hello", message)
 5 |     fetch("/.netlify/functions/hello-world?name=" + "Netlify")
 6 |       .then((data) => data.json())
 7 |       .then(({ msg }) => console.log(msg) || (message.innerHTML = msg))
 8 |   })
 9 | }
10 | 


--------------------------------------------------------------------------------