dmrobbins03 / dotcms-spa

DotCMS JamStack Starter

For this project we used NextJS to build a JamStack Website which data (pages and content) came fully from DotCMS.

Additionally we have a server NodeJS that allows you to edit your JamStack pages from DotCMS.

If you want information on how we build all this, you can see these two videos:

1. Build and deploy your Jamstack with NextJS and GraphQL
2. Making your Jamstack application editable in real-time with dotCMS

DotCMS

DotCMS as a hybrid CMS allows you not only edit regular pages, Single Page Apps or any kind of JamStack websites.

NextJS

We are using the latest NextJS features to statically render all the DotCMS pages and publish it to Vercel and Heroku

With the release of NextJS 9.4 you can use its Static Site Generator feature to create static DotCMS pages in build time, this is the approach we took here, in a overview we:

1. We pull all the pages from DotCMS instance
2. Statically generate each page with React Components
3. Publish to Vercel

---

Getting Started

Install dependencies

Run yarn

Create environmental variables

Run yarn setup and follow the instructions

---

NextJS

Development

Run yarn dev this will start you NextJS application in development mode with hot-code reloading, error reporting, and more.

Build and run in production

Run yarn build creates an optimized production build of your application. The output displays information about each route, more information.

Run yarn start starts the application in production mode. The application should be compiled with next build first, more information

---

NodeJS Server (Edit Mode Anywhere)

We are using NextJS but with a custom NodeJS with Express framework.

To run locally and test your EMA server, run yarn ema

Deploy

We have two deploys here, one to Vercel (our JamStack Website) and the Edit Mode Anywhere Server to Heroku

Deploy NextJS Website to Vercel

1. Run yarn install
2. Run yarn setup 2.1 This command will setup a .env file for you.
   • If you don't have an .env file in your project then select 'Y' in the first question.
   • In DotCMS URL enter the DotCMS instance where your data is stored
   • Public URL is the URL where you deploy your server. (Preferably Heroku or a non-serverless platform)
   • Enter the username and password of the DotCMS instance.
3. Install the vercel cli with yarn global add vercel
4. Login to Vercel from the terminal with vercel login
5. Deploy with vercel --prod

Deploy NodeJS Server to Heroku

1. Run yarn install
2. Run yarn setup if you don't have an .env file and follow the steps 2.1 from the section "Deploy to Vercel"
3. Install the heroku cli with brew tap heroku/brew && brew install heroku
4. Login to Heroku from the terminal with heroku login
5. Run heroku create to create a new project in Heroku. 5.1. This command will return a URL that we will use as the DEPLOY_URL environment variable (e.g. https://app-random-name.herokuapp.com) 5.2 Go to the .env file and update the DEPLOY_URL environment variable
6. Go to https://dashboard.heroku.com/apps > app-random-name > Settings > Config Vars > Reveal Config Vars and paste all your environment variables.

7. Deploy with git push heroku master

Docker for Edit Mode Anywhere

1. Install Docker
2. Build the image: docker build -t dotcms/dotcms-spa:YOUR_VERSION .
3. Run locally: docker run -p 5000:5000 dotcms/dotcms-spa:YOUR_VERSION