JavaScript Project Architecture: Constants

Hey all!

I decided to make a quick post today about an elegant solution for describing constant variables in your applications. I’ve had a quick look around the web and I haven’t seen any mature, organic solutions to doing this, so if you’re reading this post I hope it helps!

This post is intended to be beginner-friendly. :)

I may be bias as it’s my solution, but I don’t think you’ll find a better solution to this elsewhere (let me know if there is!), and I’m sure this exact solution has been repeated heaps of times before. Regardless, we should always be looking for the best solutions and sharing them with others.

The language

My solution is intended for JavaScript projects using ES6 modules for import and export. These features aren’t globally supported across every browser, so make sure your application transpiles its code using Babel or the like.

The setup

There are a million different ways to setup your project’s file structure, and everyone has their own preferences.

I created this particular solution in a React project which heavily relies upon Redux. I typically set up my apps like this:

src/
  config/
  styles/
  utils/
  views/

I’ve never really used constant variables in JavaScript outside defining them at the top of the page, but recently I’ve decided to improve my practices and start using them throughout my projects. It helps when you’re working in teams, and it definitely helps keep consistency when your app uses Redux and you have actions and reducers referencing the same action types.

Ultimately, I’ve added a new folder to my typical app architecture:

src/
  config/
  constants/
  styles/
  utils/
  views/

The constants/ folder has an index.js file, which if you weren’t aware before is the default file that gets targeted when you write import example from 'src/constants' ! This makes things very easy for us to create a clean interface in our code.

// index.js
export const COCA_COLA = 'COCA_COLA';
export const DR_PEPPER = 'DR_PEPPER';
export const PEPSI = 'PEPSI';

We can use export to expose our constant variables in our application. To import any of these constants, we can simply write this:

import { DR_PEPPER } from 'constants';

Note to get the file path to be only 'constants' , I use Webpack and set the resolve in the Webpack config file to be the src/ directory. This means that whenever we use import , the file path will silently start from src/ and go from there. So clean!

Now, it seems trivial so far to make this a blog post… doesn’t it? Kinda. We’re not done.

What happens when we have 300 constants defined in one file? It gets quite long and difficult to sift through! Surely there’s a better solution.

We can further build upon this import / export paradigm for our constants by splitting them by context. What I mean by this is that we can separate constants which relate to soft drinks in one file, and constants which relate to potato chips in other file.

It’s quite easy to do!

We’ll first split the soft drinks into their own file in the same folder. Maybe in the future you’ll decide to create subfolders in order to further organise your constants, but for example’s sake:

// drinks.js
export const COCA_COLA = 'COCA_COLA';
export const DR_PEPPER = 'DR_PEPPER';
export const PEPSI = 'PEPSI';

We’ll create a quick chips.js constants file, same folder:

// chips.js
export const SMITHS_ORIGINAL = 'SMITHS_ORIGINAL';
export const SMITHS_SALT_VINEGAR = 'SMITHS_SALT_VINEGAR';
export const RRD_SWEET_CHILLI = 'RRD_SWEET_CHILLI';

And bundle them into our original index.js file using the * operator which export gives us, letting us quickly import and export every constant from a given file as a one-liner:

// index.js
export * from './drinks';
export * from './chips.js';

Then, to import a constant from anywhere in our code, it’s as easy as

import { COCA_COLA, SMITHS_ORIGINAL } from 'constants';

If we want to be more contextual, we can still do this:

import { COCA_COLA } from 'constants/drinks';

Beautiful, in’it?