update readme
This commit is contained in:
parent
cede6634d1
commit
cc26558ff1
8 changed files with 28 additions and 22 deletions
31
README.md
31
README.md
|
|
@ -120,7 +120,7 @@ Head over to [https://app.fauna.com/sign-up](https://app.fauna.com/sign-up) to c
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
5. Create your FaunaDB database
|
5. **Create your FaunaDB database**
|
||||||
|
|
||||||
Set the FaunaDB API key locally in your terminal
|
Set the FaunaDB API key locally in your terminal
|
||||||
|
|
||||||
|
|
@ -183,14 +183,14 @@ We are going to use the `faunadb` npm package to connect to our Fauna Database a
|
||||||
|
|
||||||
Lets rock and roll.
|
Lets rock and roll.
|
||||||
|
|
||||||
1. Create a `./functions` directory with there
|
1. **Create a `./functions` directory**
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# make functions directory
|
# make functions directory
|
||||||
mdkir functions
|
mdkir functions
|
||||||
```
|
```
|
||||||
|
|
||||||
2. Install `netlify-lambda`
|
2. **Install `netlify-lambda`**
|
||||||
|
|
||||||
[Netlify lambda](https://github.com/netlify/netlify-lambda) is a tool for locally emulating the serverless function for development and for bundling our serverless function with third party npm modules (if we are using those)
|
[Netlify lambda](https://github.com/netlify/netlify-lambda) is a tool for locally emulating the serverless function for development and for bundling our serverless function with third party npm modules (if we are using those)
|
||||||
|
|
||||||
|
|
@ -219,7 +219,9 @@ Lets rock and roll.
|
||||||
|
|
||||||
This will proxy requests we make to `/.netlify/functions` to our locally running function server at port 9000.
|
This will proxy requests we make to `/.netlify/functions` to our locally running function server at port 9000.
|
||||||
|
|
||||||
3. Add our `start` & `build` command to npm scripts in `package.json`
|
3. **Add our `start` & `build` commands**
|
||||||
|
|
||||||
|
Lets go ahead and add our `start` & `build` command to npm scripts in `package.json`. These will let us running things locally and give a command for netlify to run to build our app & functions when we are ready to deploy.
|
||||||
|
|
||||||
We are going to be using the `npm-run-all` npm module to run our frontend & backend in parallel in the same terminal window.
|
We are going to be using the `npm-run-all` npm module to run our frontend & backend in parallel in the same terminal window.
|
||||||
|
|
||||||
|
|
@ -287,7 +289,7 @@ Lets rock and roll.
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
4. Install FaunaDB and write the create function
|
4. **Install FaunaDB and write the create function**
|
||||||
|
|
||||||
We are going to be using the `faunadb` npm module to call into our todos index in FaunaDB.
|
We are going to be using the `faunadb` npm module to call into our todos index in FaunaDB.
|
||||||
|
|
||||||
|
|
@ -299,18 +301,21 @@ Lets rock and roll.
|
||||||
|
|
||||||
Then create a new function file in `/functions` called `todos-create.js`
|
Then create a new function file in `/functions` called `todos-create.js`
|
||||||
|
|
||||||
<!-- AUTO-GENERATED-CONTENT:START (CODE:src=./functions/todos-create.js) -->
|
<!-- AUTO-GENERATED-CONTENT:START (CODE:src=./functions/todos-create.js&header=/* code from functions/todos-create.js */) -->
|
||||||
<!-- The below code snippet is automatically added from ./functions/todos-create.js -->
|
<!-- The below code snippet is automatically added from ./functions/todos-create.js -->
|
||||||
```js
|
```js
|
||||||
/* Import faunaDB sdk */
|
/* code from functions/todos-create.js */
|
||||||
import faunadb from 'faunadb'
|
import faunadb from 'faunadb' /* Import faunaDB sdk */
|
||||||
|
|
||||||
|
/* configure faunaDB Client with our secret */
|
||||||
const q = faunadb.query
|
const q = faunadb.query
|
||||||
const client = new faunadb.Client({
|
const client = new faunadb.Client({
|
||||||
secret: process.env.FAUNADB_SECRET
|
secret: process.env.FAUNADB_SECRET
|
||||||
})
|
})
|
||||||
|
|
||||||
|
/* export our lambda function as named "handler" export */
|
||||||
exports.handler = (event, context, callback) => {
|
exports.handler = (event, context, callback) => {
|
||||||
|
/* parse the string body into a useable JS object */
|
||||||
const data = JSON.parse(event.body)
|
const data = JSON.parse(event.body)
|
||||||
console.log("Function `todo-create` invoked", data)
|
console.log("Function `todo-create` invoked", data)
|
||||||
const todoItem = {
|
const todoItem = {
|
||||||
|
|
@ -320,12 +325,14 @@ Lets rock and roll.
|
||||||
return client.query(q.Create(q.Ref("classes/todos"), todoItem))
|
return client.query(q.Create(q.Ref("classes/todos"), todoItem))
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
console.log("success", response)
|
console.log("success", response)
|
||||||
|
/* Success! return the response with statusCode 200 */
|
||||||
return callback(null, {
|
return callback(null, {
|
||||||
statusCode: 200,
|
statusCode: 200,
|
||||||
body: JSON.stringify(response)
|
body: JSON.stringify(response)
|
||||||
})
|
})
|
||||||
}).catch((error) => {
|
}).catch((error) => {
|
||||||
console.log("error", error)
|
console.log("error", error)
|
||||||
|
/* Error! return the error with statusCode 400 */
|
||||||
return callback(null, {
|
return callback(null, {
|
||||||
statusCode: 400,
|
statusCode: 400,
|
||||||
body: JSON.stringify(error)
|
body: JSON.stringify(error)
|
||||||
|
|
@ -337,12 +344,11 @@ Lets rock and roll.
|
||||||
|
|
||||||
### 3. Connect the function to the frontend app
|
### 3. Connect the function to the frontend app
|
||||||
|
|
||||||
Inside of your react app. You can now wire up the `/.netlify/functions/todos-create` endpoint to an AJAX request
|
Inside of the react app, we can now wire up the `/.netlify/functions/todos-create` endpoint to an AJAX request.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// Function using fetch to POST to our API endpoint
|
// Function using fetch to POST to our API endpoint
|
||||||
function createTodo(data) {
|
function createTodo(data) {
|
||||||
console.log('run new create function')
|
|
||||||
return fetch('/.netlify/functions/todos-create', {
|
return fetch('/.netlify/functions/todos-create', {
|
||||||
body: JSON.stringify(data),
|
body: JSON.stringify(data),
|
||||||
method: 'POST'
|
method: 'POST'
|
||||||
|
|
@ -358,8 +364,9 @@ const myTodo = {
|
||||||
}
|
}
|
||||||
|
|
||||||
// create it!
|
// create it!
|
||||||
createTodo(myTodo).then(() => {
|
createTodo(myTodo).then((response) => {
|
||||||
|
console.log('API response', response)
|
||||||
|
// set app state
|
||||||
}).catch((error) => {
|
}).catch((error) => {
|
||||||
console.log('API error', error)
|
console.log('API error', error)
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,14 @@
|
||||||
/* Import faunaDB sdk */
|
import faunadb from 'faunadb' /* Import faunaDB sdk */
|
||||||
import faunadb from 'faunadb'
|
|
||||||
|
|
||||||
|
/* configure faunaDB Client with our secret */
|
||||||
const q = faunadb.query
|
const q = faunadb.query
|
||||||
const client = new faunadb.Client({
|
const client = new faunadb.Client({
|
||||||
secret: process.env.FAUNADB_SECRET
|
secret: process.env.FAUNADB_SECRET
|
||||||
})
|
})
|
||||||
|
|
||||||
|
/* export our lambda function as named "handler" export */
|
||||||
exports.handler = (event, context, callback) => {
|
exports.handler = (event, context, callback) => {
|
||||||
|
/* parse the string body into a useable JS object */
|
||||||
const data = JSON.parse(event.body)
|
const data = JSON.parse(event.body)
|
||||||
console.log("Function `todo-create` invoked", data)
|
console.log("Function `todo-create` invoked", data)
|
||||||
const todoItem = {
|
const todoItem = {
|
||||||
|
|
@ -16,12 +18,14 @@ exports.handler = (event, context, callback) => {
|
||||||
return client.query(q.Create(q.Ref("classes/todos"), todoItem))
|
return client.query(q.Create(q.Ref("classes/todos"), todoItem))
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
console.log("success", response)
|
console.log("success", response)
|
||||||
|
/* Success! return the response with statusCode 200 */
|
||||||
return callback(null, {
|
return callback(null, {
|
||||||
statusCode: 200,
|
statusCode: 200,
|
||||||
body: JSON.stringify(response)
|
body: JSON.stringify(response)
|
||||||
})
|
})
|
||||||
}).catch((error) => {
|
}).catch((error) => {
|
||||||
console.log("error", error)
|
console.log("error", error)
|
||||||
|
/* Error! return the error with statusCode 400 */
|
||||||
return callback(null, {
|
return callback(null, {
|
||||||
statusCode: 400,
|
statusCode: 400,
|
||||||
body: JSON.stringify(error)
|
body: JSON.stringify(error)
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
/* Import faunaDB sdk */
|
|
||||||
import faunadb from 'faunadb'
|
import faunadb from 'faunadb'
|
||||||
import getId from './utils/getId'
|
import getId from './utils/getId'
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
/* Import faunaDB sdk */
|
|
||||||
import faunadb from 'faunadb'
|
import faunadb from 'faunadb'
|
||||||
import getId from './utils/getId'
|
import getId from './utils/getId'
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
/* Import faunaDB sdk */
|
|
||||||
import faunadb from 'faunadb'
|
import faunadb from 'faunadb'
|
||||||
|
|
||||||
const q = faunadb.query
|
const q = faunadb.query
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
/* Import faunaDB sdk */
|
|
||||||
import faunadb from 'faunadb'
|
import faunadb from 'faunadb'
|
||||||
import getId from './utils/getId'
|
import getId from './utils/getId'
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
/* Import faunaDB sdk */
|
|
||||||
import faunadb from 'faunadb'
|
import faunadb from 'faunadb'
|
||||||
import getId from './utils/getId'
|
import getId from './utils/getId'
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
"test": "react-scripts test --env=jsdom"
|
"test": "react-scripts test --env=jsdom"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"markdown-magic": "^0.1.22",
|
"markdown-magic": "^0.1.23",
|
||||||
"netlify-lambda": "^0.4.0",
|
"netlify-lambda": "^0.4.0",
|
||||||
"npm-run-all": "^4.1.3"
|
"npm-run-all": "^4.1.3"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue