Note for DPLA Local: For DPLA Local instance configuration, refer to LOCAL.md.
This is the repository for the Digital Public Library of America's new frontend.
Getting Started For Development
Install the Yarn package manager
Supported version: 1.5.1
Use whichever method is best for your environment, but this project expects the supported version given above; so check the documentation for your preferred installation method to make sure you can determine the version.
The Yarn installation page referenced above recommends against installing Yarn
npm. For security, the download is supposed to have its cryptographic
signature checked and an assumption is being made that you want
yarn to be its
own standalone utility, decoupled from this project.
If you have other projects that require different versions of Yarn, this may not suit your needs. We may recommend a different way of managing Yarn in the future.
Check this project out from GitHub
$ git clone https://github.com/dpla/dpla-frontend.git
We are using the current LTS (long-term-support) "Carbon" version of Node.
The easiest way to manage your Node versions is with NVM. Follow the instructions on that page to set it up. Then, do the following in your shell:
$ cd /path/to/dpla-frontend # Checked out above from GitHub $ nvm install # Picks up correct Node version from `.nvmrc` $ nvm use # Activates correct Node version
Install dependencies and start the local development server
$ yarn dev
$ npm install -g mocha $ mocha
You may now open http://localhost:3000/ in your browser.
Run with Docker
$ yarn build $ yarn docker:build $ yarn docker:run
See the Docker documentation and
docker help for
more information on using Docker containers. See package.json for more
The system makes extensive use of environment variables to decouple the different developing environments. It also uses a environment constants file for front-end runtime access of a subset of these variables. For local development it is best to use a
.env file to provide these variables to the server. There is a
.env.example you can work from. A
constants/env.example.js is also provided; rename this file to
constants/env.js and include the applicable values. Below is a list of the environment variables in use:
API_KEY: your DPLA API key
API_URL: the DPLA API base URL
API_VERSION: the version of the DPLA API used (eg:
ELASTIC_URL: the ElasticSearch server base URL
GOOGLE_CLIENT: Google authentication client
GOOGLE_CONTACT_SHEET_ID: the Google spreadsheet ID where contact form responses are stored in
GOOGLE_FEEDBACK_SHEET_ID: the Google spreadsheet ID where feedback form responses are stored in
GOOGLE_SECRET: Google authentication secret
GOOGLE_TOKEN: Google authentication token
LOCAL_ID: ID of the Local partner (also exposed in
MAILCHIMP_KEY: the MailChimp list service API key
MUST_FORK: if "true", forces the server to fork and use multiple CPUs in development mode. This is only relevant when NODE_ENV is not equal to "production", e.g. when running
yarn dev. The server always forks when
NODE_ENV: the node environment,
OMEKA_URL: the Omeka server base URL
PRO_BASE_URL: base URL for user site to allow for links from user to pro site (also exposed in
PSS_BASE_URL: the primary source sets application API base URL (also exposed in
SITE_ENV: the environment's type,
local(also exposed in
WORDPRESS_URL: the headless WordPress API base URL (also exposed in
SQS_URL: base URL to the AWS SQS service
(removed because now app access
THUMB_SERVER: the image thumbnail server URL
USER_BASE_URL: base URL for user site to allow for links from pro to user site (also exposed in
CSS Vendor libraries
Yarn / NPM Scripts
The project includes a number of scripts used for development, testing, and deployment. See package.json for details if you are a developer. They include:
yarn run clean- Removes local Node modules,
.nextbuild targets, etc.
yarn run dev- Builds the project and starts the server in development mode
yarn run build- Builds the project for production
yarn run start- Builds the project and starts the server in production mode
|Michael Della Bitta|
We use BrowserStack to test this code in as many different devices and platforms as we can.