Skip to main content

paths

Exports variables for http paths used to access database and cdn resources.

The variables may be full or partial paths and may or may not require slash( / ) prefixes(i.e. AWS object keys)

API​

tip

Use these variables to access the Strapi GraphQL and REST APIs.

STRAPI_GQL_ENDPOINT​

The public https address for sending GraphQL requests to Strapi. Use this variable when making requests inside client rendered components.

Value: /strapi/graphql​

import { STRAPI_GQL_ENDPOINT } from 'inc/paths';

const response = await fetch(STRAPI_GQL_ENDPOINT, {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({
        query: QUERY
    })
});
const { data, json } = await response.json();

SERVER_SIDE_STRAPI_GQL_ENDPOINT​

The http address of the strapi container within the docker host. Use this variable to resolve the Strapi API when making GraphQL requests:

  • Inside of getServerSideProps calls in app/frontend/pages or
  • Inside of API endpoint methods in app/frontend/api methods.

Value: http://nginx/strapi/graphql​

import { SERVER_SIDE_STRAPI_GQL_ENDPOINT } from 'inc/paths';

const response = await fetch(SERVER_SIDE_STRAPI_GQL_ENDPOINT, {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({
        query: QUERY
    })
});
const { data, json } = await response.json();

STRAPI_API_ENDPOINT​

Resolves Strapi REST API calls.

caution

Prefer GraphQL API calls whenever possible.

Value: /strapi/api​

import { STRAPI_API_ENDPOINT } from 'inc/paths';

const data = await fetch(STRAPI_API_ENDPOINT + '/auth/send-email-confirmation', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
        email: emailFieldValue
    })
});
const json = await data.json();

MAC_MEDIA​

tip

Used to prefix CDN media assets like images and videos.

MAC_MEDIA_URL_SYMBOL​

Points to music symbol images on the CDN.

Value: MAC_MEDIA_BASE_URL + '/symbol'​

import { MAC_MEDIA_URL_SYMBOL } from 'inc/paths';

const symbolImageUrl = `${MAC_MEDIA_URL_SYMBOL}/${fileName}`
  • fileName is an attribute of symbol
info

Notice the added ( / )

MAC_MEDIA_URL_VIDEO​

Points to user-uploaded video assets on the CDN.

Value: MAC_MEDIA_BASE_URL + '/video'​

videoElement.current.src = `${MAC_MEDIA_URL_VIDEO}/${videoKey}-${videoResolution}.mp4`;

  • videoKey is an attribute of userVideo.

  • videoResolution values can be 480, 720.
    It should be checked against the has480 and has720 attributes of userVideo. If 720 is requested, but uservideo's has720 is null or false, downgrade to the next highest value, 480.

info

Notice the addition of /, -, and .mp4

MAC_MEDIA_URL_VIDEO_THUMBNAIL​

Points to the video thumbnail image directory on the CDN.

Value: MAC_MEDIA_BASE_URL + '/video-thumb'​

import { MAC_MEDIA_URL_VIDEO_THUMBNAIL } from 'inc/paths';

`${MAC_MEDIA_URL_VIDEO_THUMBNAIL}/${thumbnailKey}-${resolution}.jpeg`

  • thumbnailKey is an attribute of userVideo.

  • resolution value can be 360 or 720 and matches the image's vertical resolution in pixels.

info

Notice the addition of /, -, and .jpeg

MAC_MEDIA_URL_USER_PROFILE_PHOTO​

Points to user profile photo images on the CDN.

Value: MAC_MEDIA_BASE_URL + '/user/profile-photo'​

profilePhotoKey is an attribute of userProfile.

import { MAC_MEDIA_URL_USER_PROFILE_PHOTO } from 'inc/paths';

const userProfilePhotoUrl = `${MAC_MEDIA_URL_USER_PROFILE_PHOTO}/${profilePhotoKey}`

// use this instead for now
const userProfilePhotoFullPath = `${MAC_CDN_BASE_URL}/${profilePhotoKey}`

danger

profilePhotoKey needs to be updated to remove the full S3 key path before using this variable.

MAC_MEDIA_URL_MUSIC_SCORE​

Points to music score files uploaded to the CDN. (.pdf).

Value: MAC_MEDIA_BASE_URL + '/music-score'​

fileId is an attribute of musicScore.

import { MAC_MEDIA_URL_MUSIC_SCORE } from 'inc/paths';

const musicScoreUrl = `${MAC_MEDIA_URL_MUSIC_SCORE}/${fileId}.pdf`

MAC_MEDIA_URL_SITE​

Points to non-user-generated static assets located on the CDN. These include static assets such as media specific to a page or section, icons, etc.

Value: MAC_CDN_BASE_URL + '/static/conservatory/site'​

Does not use MAC_S3_KEY_BASE (static / static/test ) because there is no need to distinguish between dev and production environments.

import { MAC_MEDIA_URL_SITE } from 'inc/paths';

const homepageBannerVideoUrl = `${MAC_MEDIA_URL_SITE}/home/banner-video-3.mp4`;

MAC_MEDIA_URL_FLAG​

Points to the static collection of flag images displayed in the frontend of the application.

Value: MAC_CDN_BASE_URL + '/static/conservatory/flags'​

import { MAC_MEDIA_URL_FLAG } from 'inc/paths';

const userLocationFlagURL = `${MAC_MEDIA_URL_FLAG}/${locationCode.toLocaleLowerCase()}.svg`
  • locationCode is an attribute of userProfile.
info

Notice the added ( / and .svg )

Building Blocks​

caution

Items in this category are primarily for use within the paths.js file itself and should not be used in the application if possible.

MAC_BASE_PATH​

value: '' (empty string)[currently]

Used to access static assets stored directly on the application node.js server, i.e. the contents of app/frontend/static directory

Generally satic resources should be stored on the CDN, though exceptions might be made in certain situations. When accessing static resources always prefix them with MAC_BASE_PATH

import { MAC_BASE_PATH } from 'inc/paths';

const exampleUrl = `${MAC_BASE_PATH}/static/images/assessment-card/ming-logo-svg.svg`

MAC_CDN_BASE_URL​

value: https://cdn.mingarete.com

The path to the cdn root domain. Opt for more specific path variables when possible.

import { MAC_CDN_BASE_URL} from 'inc/paths';

const userProfilePhotoFullPath = `${MAC_CDN_BASE_URL}/${userProfile.data.attributes.profilePhotoKey}`

Notice the addition of an extra slash ( / )

MAC_S3_KEY_BASE​

value (production): static
value (development): static/test

Points to the directory of the S3 bucket specific to the conservatory application.

i.e. MAC_CDN_BASE_URL + '/' + MAC_S3_KEY_BASE => https://cdn.mingarete.com/static/

// Avoid using

MAC_MEDIA_BASE_URL​

value: MAC_CDN_BASE_URL + '/' + MAC_S3_KEY_BASE + '/conservatory' => https://cdn.mingarete.com/static/conservatory

Points to the root directory of the MA Conservatory static assets CDN URL. This is the primary building block used to construct the MAC_MEDIA paths above.

Prefer creating a new MAC_MEDIA variable over using this directly in the application.

import { MAC_MEDIA_BASE_URL } from 'inc/paths';

const temporaryVideoPath = MAC_MEDIA_BASE_URL + '/tmp-video/' + video?.attributes.videoKey + '.mp4';