DecoupledCMS - Demo

Universal Content Management System. Manage different projects with unique models and documents in one place.

Setup

Enviromental Variables

  MONGO_URL_TEST="XXXXXX"

  Google_clientID="XXXXXX"
  Google_clientSecret="XXXXXX"

  SESSION_SECRET="XXXXXX"

Development

Run with npm run dev

Deployment

• npm install -g now
• Add now secrets with now secret add name value
• set alias in now.json
• set regions and scale in now.json
• connect set secrets as env variables in now.json
• run npm run now

Boilerplate

Boilerplate with React, Material-UI, Next, Express, Mongoose, MongoDB.

Contents

• Run locally
• Deploy
• Built with
  • Core stack
  • Third party APIs
• Project structure

Run locally

• Clone the project and run yarn to add packages.

• Before you start the app, create a .env file at the app's root. This file must have values for env variables specified below.

  • To get MONGO_URL_TEST, we recommend a free MongoDB at mLab.

  • Get Google_clientID and Google_clientSecret by following official OAuth tutorial.

    Important: For Google OAuth app, callback URL is: http://localhost:8000/oauth2callback

    Important: You have to enable Google+ API in your Google Cloud Platform account.

  • Specify your own secret key for Express session SESSION_SECRET: https://github.com/expressjs/session#secret.

  .env :

  MONGO_URL_TEST="XXXXXX"
  
  Google_clientID="XXXXXX"
  Google_clientSecret="XXXXXX"
  
  SESSION_SECRET="XXXXXX"
  

• Start the app with yarn dev.

• The first registered user in the app becomes an Admin user ("isAdmin": true).

Deploy

See the deploy section on our main repository README.

Built with

Core stack

• React
• Material-UI
• Next
• Express
• Mongoose
• MongoDB

Third party APIs

• Google OAuth

Check out package.json.

Project structure

.
├── components                  # React components
│   ├── Header.js               # Header component
│   ├── MenuDrop.js             # Dropdown menu
│   ├── SharedStyles.js         # List of _reusable_ styles
├── lib                         # Code available on both client and server
│   ├── context.js              # Context for Material-UI integration
│   ├── withAuth.js             # HOC that passes user to pages and more
│   ├── withLayout.js           # HOC for SSR with Material-UI and more
├── pages                       # Pages
│   ├── login.js                # Login page
│   ├── _document.js            # Main Document for Next.js pages
│   ├── index.js                # Dashboard page
├── server                      # Server code
│   ├── models                  # Mongoose models
│   │   ├── User.js             # User model
│   ├── app.js                  # Custom Express/Next server
│   ├── google.js               # Google OAuth API
├── static                      # Static resources
├── .babelrc                    # Config for Babel
├── .eslintrc.js                # Config for Eslint
├── .gitignore                  # List of ignored files and directories
├── package.json                # List of packages and scripts
├── yarn.lock                   # Exact versions of packages. Generated by yarn.