Skip to content

How to deploy

Jump to bottom
Salihu edited this page Sep 12, 2022 · 13 revisions

How To Deploy

Before deploying the app there are a few basic things you want to do, we'll walk through them.
But first let's look through the requirements:

  • node & npm; To install dependencies and test the code locally you'll need node and npm
  • Git(optional); You might want to have git installed so you can clone the project repository,

Clone the repository

There are multiple ways to do this:

if You use vscode

  • Go to the project repository, click on the green button that says "code"
  • Copy the https link
  • open a new window, click the "clone git repository" option
  • paste the link in the input box

if you don't use vscode

  • Go to the project repository, click on the green button that says "code"
  • Copy the https link
  • open your terminal
  • type git clone <link>
    Note: replace <link> with the https link you copied

Change the Logos

You can change the logo at the top of the page and the logo in the app's tab.

The logo at the top of the page

  • Your image must have the .png extension, if it doesn't you can convert it using any number of online image converters
  • Rename your image main-logo
  • After following the first two steps you should have an image called main-logo and it should have the extension .png
  • Navigate to the project folder, then the src folder, and then the images folder
  • Replace the image here named main-logo or main-logo.png with your image

The logo on the page's tab

Convert your image to an icon, which in this case is an image with the .ico extension, this one icon needs to have the resolutions, 64x64, 32x32, 24x24, and 16x16. You also need 2 copies of your image with .png extensions but different resolutions or sizes, 192x192, 512x512. To achieve this you can find image converters online that allow choose the converted image resolution or size.

Alternatively, you can simply get one .ico image with any resolution, and a png with any resolution, however this would result in an un-optimized experience.

  • Rename the icon, which is the image with the extension of .ico, favicon
  • Rename the image with the resolution of 192X192, logo192,
  • Rename the image with the resolution of 512x512, logo512,
  • Navigate to the project folder, then the public folder
  • Replace favicon, logo192, and logo512 with your respective images

Change the Marker Icon

If you'd like to change the marker icons on the map, the first thing you'll need to do is get an svg of the icon you want to replace it with, an svg is an image with the .svg extension. If you already have an image that's not an svg, you can use an online converter to convert it to an svg, then:

  • rename the icon map-marker
  • Navigate to the project folder, then the src folder, and then the images folder
  • Replace the file here named map-marker or map-marker.png with your icon

Note; Make sure to remove the width and height properties in the svg

Edit the app config

Some of the basic features of the app can be modified by editing the app config, in the project folder, go into the src folder and open the app-config.json. Now we can start changing some basic features.

name property

You can change the name displayed at the top of app, by changing name.
Example; I want the name to my app, I'll simply set the name property like this "name": "my app"

title property

You can change the name displayed on the pages's tab, by changing title.
Example; I want the name to my app title, I'll simply set the name property like this "title": "my app title"

homepage property

This is what comes after the base url in the app's url
Restrictions; The value cannot have any space, special characters or numbers
Example; I want the homepage to new-map, I'll simply set the homepage property like this "homepage": "/new-map"

MAP_DETAILS property

This controls the details of the map, namely style, lat, lng, zoom. Restrictions; The style property has to be a valid map stlye string gotten from mapbox, the lat and lng properties have to a be valid latitude and a longitude, respectively, the zoom property has to be between 0 - 22.
Example; I want to change the style to mapbox://styles/mapbox/dark-v10, I'll simply set the map-style property like this
"MAP_DETAILS": {
      "style": "mapbox://styles/mapbox/dark-v10",
      "lat": 42.35,
      "lng": -71.085,
      "zoom": 10.1
}

SECRET_KEYS

These keys give the app access to the APIs it needs for certain data. These CANNOT be modified to any effect in the app-config.json file. They have to set as environment variables or secret keys in the run-time environment, for security reasons.

To set values for these keys, you must create an account on their corresponding websites. For the MAPBOX_API_KEY, You need to create an account on the mapbox website and get an api key. For the AIRTABLE_API_KEY, you need to create an account on the airtable website and get api. These keys should be set in the environment where you're hosting the app. Simply google how to set secret keys on followed by the platform you're hosting the app on, for example how to set secret keys on github, then name the secret key as the value on that key.

Restrictions;

  • The API keys must be valid keys gotten from their respective websites
  • The name of the secret key you set in your environment must match up to the value property of that key in the app-config.json file

Example; I want to set my MAPBOX_API_KEY to a-new-valid-mapbox-key and I am using github. I'll navigate to the Secrets > Actions section in the repository settings. I would then click New Repository Secret and enter REACT_APP_MAPBOX_ACCESS_TOKEN in as the Name and a-new-valid-mapbox-key as the Secret,

URL

These hold the URLs for the APIs the app needs for certain data, To get values for these URLs you must create an account on their corresponding websites. For the MAPBOX_URL, You need to create an account on the mapbox website and get a base URL. For the AIRTABLE_URL, you need to create an account on the airtable website and get a base URL.

Restrictions; The URL values must be valid URL string gotten from their respective websites
Example; I want to set my MAPBOX_URL to a-valid-mapbox-url, I'll simply set the value property of MAPBOX_URL like this
"MAPBOX_URL": {
      "description": "The mapbox URL the map uses",
      "value": "a-valid-mapbox-url"
}

Test the app

After editing some of the details of the app, you might want to check to make sure everything works like it should.

set your environment variables locally

  • create file in your src folder and call it .env
  • on the first line put REACT_APP_AIRTABLE_API_KEY=<your airtable api key>, replace <your airtable api key> with the api key you get from your airtable account
  • on the second line put REACT_APP_MAPBOX_ACCESS_TOKEN=<your mapbox api key>, replace <your mapbox api key> with the api key you get from your mapbox account

start the app on a local server

  • open up your terminal in the project directory
  • run npm install, to install all the necessary dependencies and then
  • run npm start
  • the app should open on your browser

Report a problem with this wiki

Clone this wiki locally