16 |
17 | **2. [Blog format](https://dev.to/lisahjung/beginners-guide-to-building-a-full-stack-app-nodejs-react-with-elasticsearch-5347) (Dev.to)**
18 |
19 | ## How to use this repo
20 | This repo contains multiple branches that serve as complementary resource to season 2 YouTube episode/blog.
21 |
22 | - [main (final product)](https://github.com/LisaHJung/beginners-guide-to-creating-a-full-stack-Javascript-app-with-Elasticsearch/tree/main)
23 | - [1-build-a-server](https://github.com/LisaHJung/beginners-guide-to-creating-a-full-stack-Javascript-app-with-Elasticsearch/tree/1-build-a-server)
24 | - [2-connect-server-to-Elastic-Cloud-via-basic-authentication](https://github.com/LisaHJung/beginners-guide-to-creating-a-full-stack-Javascript-app-with-Elasticsearch/tree/2-connect-server-to-Elastic-Cloud-via-basic-authentication)
25 | - [3-connect-server-to-Elastic-Cloud-via-apiKey](https://github.com/LisaHJung/beginners-guide-to-creating-a-full-stack-Javascript-app-with-Elasticsearch/tree/3-connect-server-to-Elastic-Cloud-via-apiKey)
26 | - [4-retrieve_and_ingest_data](https://github.com/LisaHJung/beginners-guide-to-creating-a-full-stack-Javascript-app-with-Elasticsearch/tree/4-retrieve_and_ingest_data)
27 | - [5-build_the_client](https://github.com/LisaHJung/beginners-guide-to-creating-a-full-stack-JavaScript-app-with-Elasticsearch/tree/5-build_the_client)
28 | - [6-manage_elasticsearch_request](https://github.com/LisaHJung/beginners-guide-to-creating-a-full-stack-Javascript-app-with-Elasticsearch/tree/6-manage_elasticsearch_request)
29 |
30 | :sparkles:**Follow the YouTube episodes/blogs in sequential order and use this repo as a supplementary resource. The videos/blogs contain the link to the corresponding repo branch.**:sparkles:
31 |
32 | ## Running the App locally
33 | If you wish to download the project, follow these instructions.
34 |
35 | ### Downloading the repo
36 | Go to the page of the branch you wish to download.
37 |
38 | Click on the `Code` button(blue box) to display the drop down menu.
39 |
40 | 
41 |
42 | Click on the `Download Zip` option(red box).
43 |
44 | Once the code is downloaded, double click on the file to unzip it.
45 |
46 | Move the unzipped file to your desired location.
47 |
48 | I recommend that you change the name to something shorter as the downloaded project will have the following name:
49 |
50 | *beginners-guide-to-creating-a-full-stack-JavaScript-app-with-Elasticsearch-name-of-the-branch.zip*
51 |
52 | Cd into the project directory.
53 |
54 | :sparkles:**Depending on which episode/blog/branch you are working on, the corresponding repo will contain only the server side code or both the server and client side code.**:sparkles:
55 |
56 | ### Start the server
57 |
58 | Execute these commands in the terminal in the following order.
59 | ```javascript
60 | //in the project directory
61 | npm install
62 | npm start
63 | ```
64 |
65 | ### Start the client
66 |
67 | Execute these commands *in a new terminal* in the following order.
68 | ```javascript
69 | //in the project directory
70 | cd client
71 | npm install
72 | npm start
73 | ```
74 | :sparkles:**The recommended browser for this project is Google Chrome.**:sparkles:
75 |
76 | ### Don't forget!
77 | This project requires creating an Elastic Cloud deployment and adding the Elastic Cloud access credentials to the `config/default.json` file.
78 |
79 | The steps on how to accomplish these tasks are outlined in the following blogs:
80 | - [Part 3: Create an Elastic Cloud deployment](https://dev.to/lisahjung/part-3-create-an-elastic-cloud-deployment-36bn)
81 | - [Part 4: Securely connect Node.js server to Elastic Cloud](https://dev.to/lisahjung/part-4-securely-connect-nodejs-server-to-elastic-cloud-4f22)
82 |
83 | :sparkles:**When running the project from branches 2-6, be sure to update the `config/default.json` file with your access credentials before running the project!**:sparkles:
84 |
--------------------------------------------------------------------------------
/client/src/App.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import { useState } from 'react';
3 | import './App.css';
4 |
5 | const App = () => {
6 | const [chosenType, setChosenType] = useState(null);
7 | const [chosenMag, setChosenMag] = useState(null);
8 | const [chosenLocation, setChosenLocation] = useState(null);
9 | const [chosenDateRange, setChosenDateRange] = useState(null);
10 | const [chosenSortOption, setchosenSortOption] = useState(null);
11 | const [documents, setDocuments] = useState(null);
12 |
13 | const sendSearchRequest = () => {
14 | const results = {
15 | method: 'GET',
16 | url: 'http://localhost:3001/results',
17 | params: {
18 | type: chosenType,
19 | mag: chosenMag,
20 | location: chosenLocation,
21 | dateRange: chosenDateRange,
22 | sortOption: chosenSortOption,
23 | },
24 | };
25 | axios
26 | .request(results)
27 | .then((response) => {
28 | console.log(response.data);
29 | setDocuments(response.data);
30 | })
31 | .catch((error) => {
32 | console.error(error);
33 | });
34 | };
35 |
36 | return (
37 | 44 | {' '} 45 | Search for earthquakes using the following criteria: 46 |
47 |Number of hits: {documents.length}
127 | ) : ( 128 |No results found. Try broadening your search criteria.
129 | )} 130 | {documents.map((document) => ( 131 |Type: {document._source.type}
134 |Time: {document._source['@timestamp']}
135 |Location: {document._source.place}
136 |Latitude: {document._source.coordinates.lat}
137 |Longitude: {document._source.coordinates.lon}
138 |Magnitude: {document._source.mag}
139 |Depth: {document._source.depth}
140 |Significance: {document._source.sig}
141 |Event URL: {document._source.url}
142 |