This tutorial will walk you through the creation of the Fair Change Website Front End. The goal of this website is to show the details of each incidident in a map view. The website is built with React and it uses Google Maps to populate each incident submited from the Mobile app or in the database.
In this tutorial, you will:
- Learn how to stand up a Node.js React App
- Connect the back-end application with the front-end
- Test and run the application locally
- Deploy Deploy the application on IBM Cloud as a Cloud Foundry application.
Here is a demo of the final application:
To complete the steps in this tutorial you need to complete all the steps to get the back-end application running.
Follow these instructions for setting up the web application's back end
This tutorial will take you about 30 minutes to complete.
The following steps assume that you have the back-end application up and running.
Once you have the back-end application up and running you will need to :
- Change dirctory and go to the
websitefolder
cd website
-
Create a Google Maps API Key by following these instructions : https://developers.google.com/maps/documentation/embed/get-api-key
-
Once you have Google Maps API key add your API Key to
const googleMapsApiKey =(line 7) in the app.tsx file -
Once you have set your Google Maps API Key navigate to
/website/scripts/webpack.config.js. Line 3 of webpack.config.js includes a constant called apiServer which will be the endpoint where your back-end service is running.
If your back end service running locally set that variable to http://[::1]:3000 . If your back end service is running on the cloud make sure you change that endpoint accordingly to your back-end endpoint.
-
Install the dependencies:
npm install -
If you plan to run locally , make sure your back-end is also running and then run the front-end application with:
npm run dev -
You should see your website running on
http://localhost:9000/
