1. Set up and usage

Requirement to run the project locally:

To run the project you need to have install on your machine:

• Nodejs > 8
• npm

Set up:

1_ on your local you can clone this repo: git clone https://github.com/ElliotForWater/efw-webapp.git

2_ go in the just cloned repo and install packages: cd efw-webapp/ && npm install

for development purpose:

3.A_ change .env.development.example to .env.development

3.B_ Be sure in your .env.development you have MOCK_CONTENTFUL=TRUE and not set to false.

3.C_ in the same directory run: npm run dev

3.D_ go to localhost:3000

for production build:

Before pushing your code and open a PR, please build the project and verify that no errors occurs.

4_ npm run build

5_ npm run test

UI components overview:

If you would like to have an overview of ElliotForWater available UI Components, you can run storybook: npm run storybook

Search Results

In order to let you develop free-of-worry, we created a mock of our API endpoints. You can open a new window in your console and run npm run mockApi. After that you should be able to see the search page with results in it. Please consider that the data are not dynamic so each endpoint will always return the same set of data, even if you change the query in the search bar.

Mocking data

In order to use the frontend of Elliot for Water without the backend, there are some mocking option prepared for you to use.

1. Mocking api: To Mock our search API you can simply run, in a different terminal instance, npm run mockApi and let it run. You will be now able to see the results page as would behave in real life. Please be aware that you will see always the same search result. (i.e. For the web result, the search keyword is "Berlin" and you will always see those results, even if you type something different in the search bar.)

2. Mocking CMS Contentful To make it easier for our marketing team to insert text, we are using Contentful as CMS. We, therefore, mocked the CMS response for each page where we use it, so you can easily work on the Frontend part of each page. To mock our CMS please be sure you have MOCK_CONTENTFUL=TRUE in your .env.development file.

Endpoints

• api/searchresults/web => return a json object with all the data to populate the all tab in the search page
• api/searchresults/image => return a json object with all the data to populate the image tab in the search page
• api/searchresults/video => return a json object with all the data to populate the video tab in the search page
• api/searchresults/news => return a json object with all the data to populate the news tab in the search page

If you want to see the actual json object resturned you have two options:

1. Check in __mocks__/db.json

2. run npm run mockApi and go to localhost:5001/api/searchresults/*

   i.e. localhost:5001/api/searchresults/web or localhost:5001/api/searchresults/image

Troubleshoot

Cannot see results on chrome: net::ERR_CERT_AUTHORITY_INVALID

In your chrome browser, please go to chrome://flags/#allow-insecure-localhost and set Allow invalid certificates for resources loaded from localhost option to Enable