• Stars
    star
    133
  • Rank 272,600 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Sample Javascript/Express app building on CircleCI

CircleCI Demo JavaScript/Express.js CircleCI PRs Welcome

This project was built from a MERN Starter kit (original URLs broken). Discussions still active here. MERN is Mongo, Express, React and NodeJS.

See the JavaScript language guide for CircleCI here.

Quickstart

  npm install -g mern-cli
  mern init your_new_app
  cd your_new_app
  npm install
  npm start

Note : Please make sure your MongoDB is running. For MongoDB installation guide see this. Also npm3 is required to install dependencies properly.

Available Commands

  1. npm run start - starts the development server with hot reloading enabled

  2. npm run bs - bundles the code and starts the production server

  3. npm run test - start the test runner

  4. npm run watch:test - start the test runner with watch mode

  5. npm run cover - generates test coverage report

  6. npm run lint - runs linter to check for lint errors

File Structure

Webpack Configs

MERN uses Webpack for bundling modules. There are four types of Webpack configs provided webpack.config.dev.js (for development), webpack.config.prod.js (for production), webpack.config.server.js (for bundling server in production) and webpack.config.babel.js (for babel-plugin-webpack-loaders for server rendering of assets included through webpack).

The Webpack configuration is minimal and beginner-friendly. You can customise and add more features to it for production build.

Server

MERN uses express web framework. Our app sits in server.js where we check for NODE_ENV.

If NODE_ENV is development, we apply Webpack middlewares for bundling and Hot Module Replacement.

Server Side Rendering

We use React Router's match function for handling all page requests so that browser history works.

All the routes are defined in client/routes.js. React Router renders components according to route requested.

// Server Side Rendering based on routes matched by React-router.
app.use((req, res) => {
    match({
        routes,
        location: req.url
    }, (err, redirectLocation, renderProps) => {
        if (err) {
            return res.status(500).end('Internal server error');
        }

        if (!renderProps) {
            return res.status(404).end('Not found!');
        }

        const initialState = {
            posts: [],
            post: {}
        };

        const store = configureStore(initialState);

        fetchComponentData(store.dispatch, renderProps.components, renderProps.params).then(() => {
            const initialView = renderToString(
                <Provider store = {store} >
                  <RouterContext {...renderProps}/>
                </Provider>
            );

            const finalState = store.getState();

            res.status(200).end(renderFullPage(initialView, finalState));
        }).catch(() => {
            res.end(renderFullPage('Error', {}));
        });
    });
});

match takes two parameters, first is an object that contains routes, location and history and second is a callback function which is called when routes have been matched to a location.

If there's an error in matching we return 500 status code, if no matches are found we return 404 status code. If a match is found then, we need to create a new Redux Store instance.

Note: A new Redux Store has populated afresh on every request.

fetchComponentData is the essential function. It takes three params: first is a dispatch function of Redux store, the second is an array of components that should be rendered in current route and third is the route params. fetchComponentData collects all the needs (need is an array of actions that are required to be dispatched before rendering the component) of components in the current route. It returns a promise when all the required actions are dispatched. We render the page and send data to the client for client-side rendering in window.__INITIAL_STATE__.

Client

Client directory contains all the shared components, routes, modules.

components

This folder contains all the common components which are used throughout the project.

index.js

Index.js simply does client side rendering using the data provided from window.__INITIAL_STATE__.

modules

Modules are the way of organising different domain-specific modules in the project. A typical module contains the following

| - Post
  | - __tests__ // all the tests for this module goes here
      | - components // Sub components of this module
          | - Post.spec.js
          | - PostList.spec.js
          | - PostItem.spec.js
          | - PostImage.spec.js
      | - pages
          | - PostPage.spec.js
          | - PostViewPage.spec.js
      | - PostReducer.spec.js
      | - PostActions.spec.js
  | - components // Sub components of this module
      | - Post.js
      | - PostList.js
      | - PostItem.js
      | - PostImage.js
  | - pages // React Router Pages from this module
      | - PostPage
          | - PostPage.js
          | - PostPage.css
      | - PostViewPage
          | - PostViewPage.js
          | - PostViewPage.css
  | - PostReducer.js
  | - PostActions.js

Misc

Importing Assets

Assets can be kept where you want and can be imported into your js files or css files. Those fill be served by webpack in development mode and copied to the dist folder during production.

ES6 support

We use babel to transpile code in both server and client with stage-0 plugin. So, you can use both ES6 and experimental ES7 features.

Docker

There are docker configurations for both development and production.

To run docker for development,

docker-compose -f docker-compose-development.yml build
docker-compose -f docker-compose-development.yml up

To run docker for production,

docker-compose build
docker-compose up

Make your MERN

In this version, we enabled the mern-cli to clone not only this project but also the variants of mern-starter like one project with MaterialUI or JWT auth. To make your version of MERN, follow these steps

  1. Clone this project

    git clone https://github.com/Hashnode/mern-starter
    
  2. Make your changes. Add a package, add authentication, modify the file structure, replace Redux with MobX or anything else.

  3. In this version, we also added code generators. Blueprints for those generators are located at config/blueprints, and config is located at mern.json. Make sure to edit them if necessary after your made modifications in the previous step. There is a section below which explains how to modify generators.

  4. Next clone mern-cli project

    git clone https://github.com/Hashnode/mern-cli
    
  5. Add your project details to variants.json in the cloned project and send a pull request.

Modifying Generators

mern.json

It contains a blueprints array. Each object in it is the config for a generator. A blueprint config contains the name, description, usage, and files array. An example blueprint config

{
  "name": "dumb-s",
  "description": "Generates a dumb react component in shared components",
  "usage": "dumb-s [component-name]",
  "files": [
    {
      "blueprint-path": "config/blueprints/dumb-component.ejs",
      "target-path": "client/components/<%= helpers.capitalize(name) %>.js"
    }
  ]
}

A file object contains

  1. blueprint-path - location of the blueprint file

  2. target-path - location where the file should be generated

  3. parent-path - optional parameter, used if you want to generate the file inside an already existing folder in your project.

Also, target-path supports ejs and the following variables will be passed while rendering,

  1. name - <component-name> input from user

  2. parent - in particular special cases where you need to generate files inside an already existing folder, you can obtain this parent variable from the user. A config using that will look like,

    {
      "name": "dumb-m",
      "description": "Generates a dumb react component in a module directory",
      "usage": "dumb-m <module-name>/<component-name>",
      "files": [
        {
          "blueprint-path": "config/blueprints/dumb-component.ejs",
          "parent-path": "client/modules/<%= helpers.capitalize(parent) %>",
          "target-path": "components/<%= helpers.capitalize(name) %>/<%= helpers.capitalize(name) %>.js"
        }
      ]
    }
    

    Here, notice the usage. In <module-name>/<component-name>, <module-name> will be passed as parent and <component-name> will be passed as <name>.

  3. helpers - an helper object is passed which include common utility functions. For now, it contains capitalize. If you want to add more, send a PR to mern-cli.

Blueprint files

Blueprints are basically ejs templates which are rendered with the same three variables(name, optional parent and helpers object) as above.

Caveats

FOUC (Flash of Unstyled Content)

To make the hot reloading of CSS work, we are not extracting CSS in development. Ideally, during server rendering, we will be extracting CSS, and we will get a .css file, and we can use it in the html template. That's what we are doing in production.

In development, after all scripts get loaded, react loads the CSS as BLOBs. That's why there is a second of FOUC in development.

Client and Server Markup Mismatch

This warning is visible only on development and totally harmless. This occurs to hash difference in react-router. To solve it, react router docs asks you to use match function. If we use match, react-hot-reloader stops working.

License

MERN is released under the MIT License.

More Repositories

1

circleci-cli

Use CircleCI from the command line
Go
397
star
2

circleci-demo-react-native

A demo React Native project that’s building on CircleCI 2.0 with Workflows
Ruby
234
star
3

slack-orb

Create custom Slack notifications for CircleCI job statuses
Shell
208
star
4

circleci-demo-workflows

Demonstrations of various Workflows features
135
star
5

circleci-demo-ios

A sample iOS app that builds on CircleCI
Swift
126
star
6

circleci-demo-docker

Example application using Docker running on CircleCI 2.0
Go
120
star
7

circleci-demo-python-django

Example Django application running on CircleCI
Python
112
star
8

circleci-demo-aws-ecs-ecr

A demo project for deployment to AWS ECS from ECR on CircleCI 2.0.
HCL
107
star
9

circleci-demo-go

Example Go application running on CircleCI
Go
92
star
10

sample-php-laravel

Example CircleCI project using PHP and Laravel
Less
91
star
11

config-preview-sdk

Preview SDK for orb authors
85
star
12

circleci-demo-python-flask

A demo application to learn how to use CircleCI
Python
85
star
13

circleci-demo-ruby-rails

A CircleCI demo project using Ruby and Rails
Ruby
78
star
14

circleci-config-sdk-ts

Generate CircleCI Configuration YAML from JavaScript or TypeScript. Use Dynamic Configuration and the Config SDK together for live generative config.
TypeScript
78
star
15

CircleCI-Env-Inspector

A NodeJS tool for discovering all your secrets on CircleCI
TypeScript
73
star
16

aws-ecr-orb

CircleCI orb for interacting with Amazon's Elastic Container Registry (ECR)
Shell
73
star
17

cimg-base

The CircleCI Base (Ubuntu) Docker Convenience Image.
Dockerfile
66
star
18

circleci-demo-java-spring

Example Java application running on CircleCI
Java
58
star
19

cimg-android

The CircleCI Android Docker Convenience Image.
Dockerfile
53
star
20

aws-ecs-orb

An orb that simplifies deployment to Amazon's Elastic Container Service (ECS). Supports both EC2 and Fargate launch types.
Python
49
star
21

orb-tools-orb

Various tools for authoring and publishing CircleCI orbs
Shell
46
star
22

circleci-config-generator

Script to generate a basic configuration file for CircleCI 2.0
Shell
46
star
23

node-orb

An orb for working with Node.js on CircleCI
Shell
45
star
24

circleci-packer

Packer Workflows to validate, build and deploy AMIs using CircleCI
Shell
42
star
25

cimg-node

The CircleCI Node.js Docker Convenience Image.
Dockerfile
39
star
26

trigger-circleci-pipeline-action

Trigger a CircleCI pipeline from any GitHub Actions event.
TypeScript
34
star
27

android-orb

An orb for working with Android on CircleCI
Shell
33
star
28

cimg-ruby

The CircleCI Ruby Docker Convenience Image.
Dockerfile
29
star
29

cimg-python

The Next-Gen CircleCI Python Docker Convenience Image.
Dockerfile
26
star
30

circleci-demo-aws-eks

A demo project for deployment to AWS EKS on CircleCI 2.0.
Go
25
star
31

jira-connect-orb

Display the status of CircleCI workflows and deployments in Jira!
Shell
25
star
32

path-filtering-orb

Python
24
star
33

circleci-demo-javascript-react-app

Sample ReactJS application running on CircleCI
JavaScript
23
star
34

ruby-orb

The `circleci/ruby` orb source code.
Shell
22
star
35

browser-tools-orb

Quickly and easily install common browsers and browser testing tools on CircleCI
Shell
19
star
36

fyaml

FYAML: a semantic-agnostic convention for decomposing large YAML documents into multiple files.
18
star
37

debug-gpt

AI Powered Devtools Extension
TypeScript
18
star
38

shellcheck-orb

An orb for ShellCheck, a static analysis tool for shell scripts (https://shellcheck.net) — check all scripts in your repository on every commit
Shell
18
star
39

find-circle-yml

Ruby
17
star
40

circleci-config-parser-ts

A parsing library for CircleCI configuration files, powered by the CircleCI Config SDK
TypeScript
17
star
41

aws-eks-orb

An orb to simplify deployments to Amazon Elastic Container Service for Kubernetes (Amazon EKS)
Shell
17
star
42

circleci-yaml-language-server

The official language server for CircleCI YAML configuration files
Go
16
star
43

cimg-openjdk

The CircleCI OpenJDK (Java) Docker Convenience Image.
Dockerfile
15
star
44

cimg-go

The CircleCI Go (Golang) Docker Convenience Image.
Dockerfile
15
star
45

sample-javascript-cfd

Vue
15
star
46

support-articles

Support articles for CircleCI.
HTML
14
star
47

macos-orb

A suite of convenient tools and settings for utilizing MacOS on CircleCI
Shell
13
star
48

cimg-overview

Overview of CircleCI's pilot project for revamped/improved convenience images
13
star
49

circleci-demo-k8s-gcp-hello-app

A sample project that demonstrates using CircleCI to deploy to Google Kubernetes Engine on GCP
Go
12
star
50

continuation-orb

Shell
11
star
51

python-orb

Common CircleCI tasks for the Python programming language.
Shell
11
star
52

circleci-demo-windows

Hello world demo using CircleCI Windows executor
C#
11
star
53

go-orb

Shell
11
star
54

cimg-rust

The CircleCI Rust Docker Convenience Image.
Dockerfile
11
star
55

gcp-gcr-orb

Orb for interacting with Google Container Registry from within a CircleCI build job
Shell
11
star
56

circleci-runner-k8s

Repository with Helm charts to install CircleCI's runner on a Kubernetes cluster.
Smarty
11
star
57

Orb-Template

A template repository for creating orbs, utilized by the orb development kit. Use the CircleCI CLI's `orb init` command to use.
Shell
10
star
58

cimg-deploy

The CircleCI Deploy Docker Convenience Image.
Dockerfile
10
star
59

aws-sam-serverless-orb

AWS serverless Orb
Shell
10
star
60

circleci-demo-elixir-phoenix

A CircleCI demo project using Elixir and Phoenix
Elixir
10
star
61

cimg-shared

Shared resources for prototype convenience images
Shell
10
star
62

aws-code-deploy-orb

Easily deploy applications to AWS CodeDeploy on CircleCI with the aws-code-deploy orb
Shell
9
star
63

windows-preview-docs

Temporary docs on how to use the pre-release preview of Windows builds on CircleCI
9
star
64

cimg-php

The CircleCI PHP Docker image. Based on the `cimg/base` image.
Dockerfile
9
star
65

helm-orb

A CircleCI Orb to simplify deployments to Kubernetes using Helm.
Shell
9
star
66

gcp-cli-orb

Install and configure the Google Cloud CLI (gcloud)
Shell
9
star
67

terraform-orb

Deploy your infrastructure via a CircleCI pipeline using the Terraform orb. Integrate Infrastructure-as-Code (IaC) to help provision and manage any cloud, infrastructure, or service of your choice.
Shell
9
star
68

kubernetes-orb

tools for working with Kubernetes on CircleCI
Shell
9
star
69

cimg-postgres

Dockerfile
8
star
70

aws-s3-orb

Integrate Amazon AWS S3 with your CircleCI CI/CD pipeline easily with the aws-s3 orb.
Shell
8
star
71

circleci-runner-docker

Docker image for CircleCI Runner
Shell
8
star
72

sample-python-cfd

Sample flask app to demonstrate a simple python circleci configuration
Python
7
star
73

github-cli-orb

Bring all of the power and flexibility of the GitHub CLI to your CI/CD pipeline.
Shell
7
star
74

arm-preview-docs

Docs for the preview of Arm resources on CircleCI
7
star
75

jq-orb

quickly and easily install jq in your CircleCI job
7
star
76

maven-orb

Simplify common tasks for building and testing Java projects using Maven on CircleCI.
CSS
6
star
77

hugo-orb

The `circleci/hugo` orb source code.
Shell
6
star
78

heroku-orb

Easily install and use the Heroku CLI with CircleCI to build, test, and deploy your applications to Heroku.
Shell
6
star
79

circleci-server-windows-image-builder

This is an example of how to build a new Windows VM image to be used with CircleCI Server.
PowerShell
6
star
80

server-terraform

Help Terraform modules for CircleCI server
HCL
6
star
81

gcp-gke-orb

Interact with Google Kubernetes Engine (GKE) from CircleCI
Shell
6
star
82

circleci-demo-macos

Hello world demo using CircleCI macOS executor
Swift
5
star
83

cimg-clojure

The Next-Gen CircleCI Clojure Docker Convenience Image.
Dockerfile
5
star
84

Salesforce-sfdx-cli-orb

5
star
85

aws-circleci-modernization-workshop-code

AWS Modernization Workshop with CircleCI code repo
HCL
5
star
86

hacktoberfest

Starting in 2019 CircleCI will now join in the annual tradition of Hacktoberfest! Check here for our current Hacktoberfest landing page and learn how you can participate.
CSS
5
star
87

cimg-mysql

The CircleCI MySQL Docker Convenience Image.
Shell
5
star
88

php-orb

A PHP Orb for CircleCI
Shell
4
star
89

aws-parameter-store-orb

4
star
90

arm-executors

Demo code for the ARM Resource Class executors
HCL
4
star
91

blog-dynamic-config-examples

Example code for the dynamic config blog post
Shell
4
star
92

circleci-demo-clojure-luminus

Example Clojure application running on CircleCI
Clojure
4
star
93

circleci-config

Go library to work with CircleCI config files
Go
4
star
94

circle-policy-agent

Go
4
star
95

sample-dotnet-cfd

C#
3
star
96

sample-java-cfd

Sample springboot app to demonstrate a simple java circleci configuration
Java
3
star
97

circleci-demo-ruby-sinatra

Example Ruby on Rails application running on CircleCI
Ruby
3
star
98

ansible

Python
3
star
99

spinnaker-orb

A CircleCI Orb to simplify deployments via Spinnaker.
3
star
100

cimg-azure

The CircleCI Azure Docker Convenience Image.
Dockerfile
3
star