All Projects → CircleCI-Public → Circleci Demo Javascript Express

CircleCI-Public / Circleci Demo Javascript Express

Licence: mit
Sample Javascript/Express app building on CircleCI

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Circleci Demo Javascript Express

Express Webpack React Redux Typescript Boilerplate
🎉 A full-stack boilerplate that using express with webpack, react and typescirpt!
Stars: ✭ 156 (+35.65%)
Mutual labels:  express, circleci
Node Hot Loader
Hot module replacement (hot reload) for Node.js applications. Develop without server restarting.
Stars: ✭ 111 (-3.48%)
Mutual labels:  express
Simple React Full Stack
Boilerplate to build a full stack web application using React, Node.js, Express and Webpack.
Stars: ✭ 1,506 (+1209.57%)
Mutual labels:  express
Webpack Hmr 3 Ways
Three ways to set up your webpack hot module replacement: webpack-dev-server CLI, webpack-dev-server API, and express with webpack-hot-middleware.
Stars: ✭ 108 (-6.09%)
Mutual labels:  express
Qewd
Quick and Easy Web Development
Stars: ✭ 106 (-7.83%)
Mutual labels:  express
Presently
Android app for recording gratitude journal entries
Stars: ✭ 109 (-5.22%)
Mutual labels:  circleci
Express Jwt
An example API for creating/verifying json web tokens
Stars: ✭ 105 (-8.7%)
Mutual labels:  express
Android Livedata Viewmodel
Android app that demonstrates how to use new Architecture components.
Stars: ✭ 114 (-0.87%)
Mutual labels:  circleci
Mern Boilerplate
Fullstack boilerplate with React, Redux, Express, Mongoose, Passport Local, JWT, Facebook and Google OAuth out of the box.
Stars: ✭ 112 (-2.61%)
Mutual labels:  express
Flowmaker
flowmaker: JS to SVG flowchart generation extension for Vscode in realtime written in typescript and also download the SVG through local node server. Extension:
Stars: ✭ 108 (-6.09%)
Mutual labels:  express
Angular Seed Express
[DEPRECATED, Please use https://github.com/vyakymenko/angular-express] Extensible, reliable and modular starter project for Angular 7 with statically typed build AoT compilation, Express server and PM2 Daemon.
Stars: ✭ 107 (-6.96%)
Mutual labels:  express
Terraform Multienv
A template for maintaining a multiple environments infrastructure with Terraform. This template includes a CI/CD process, that applies the infrastructure in an AWS account.
Stars: ✭ 107 (-6.96%)
Mutual labels:  circleci
React Multi Email
A simple react component to format multiple email as the user types.
Stars: ✭ 111 (-3.48%)
Mutual labels:  express
Porn Vault
💋 Manage your ever-growing porn collection. Using Vue & GraphQL
Stars: ✭ 1,634 (+1320.87%)
Mutual labels:  express
Bulwark
An organizational asset and vulnerability management tool, with Jira integration, designed for generating application security reports.
Stars: ✭ 113 (-1.74%)
Mutual labels:  express
Netlify Functions Express
How to use Netlify functions + express.js for serverside rendering on the JAMStack
Stars: ✭ 105 (-8.7%)
Mutual labels:  express
Mean Stack Angular5 Crud
MEAN Stack (Angular 5) CRUD Web Application Example
Stars: ✭ 107 (-6.96%)
Mutual labels:  express
Nodejs Mysql Links
A CRUD Web Application with authentication using Nodejs, Mysql and other Javascript technologies
Stars: ✭ 110 (-4.35%)
Mutual labels:  express
Batcave
Batcave client is chat app built with Electron and Angular2, Socket.io with RxJS.
Stars: ✭ 114 (-0.87%)
Mutual labels:  express
Drupal8ci
One-line installers for implementing Continuous Integration in Drupal 8
Stars: ✭ 113 (-1.74%)
Mutual labels:  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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].