Lifecycle of OCE React Site
Overview
The Starter Site CLI is a quick way to get started with React development for Oracle Content and Experience (OCE) Cloud. With Starter Site CLI, a starting site can be generated in React. A React site is different from a site that is built with Site Builder. The React site is coded in React, and it is an independently runnable application. It is generated from scratch based on the model of your content assets. You could take the React site through iterative development in development mode, where the content assets can be served locally. Then you can run the site in production mode, where the content assets are coming from OCE.
This blog presents a walkthrough of the installation, development, and production phases of using Starter Site CLI. Below is the outline of what we will be doing:
Install and set up Sites Toolkit
Development:
- Obtain the content template
- Create a React site from the content template
- Build the development site
- Run the development site
- Perform iterative development
Production:
- Deploy template to OCE
- Update site .cec_properties
- Build a production site
- Run the production site
- Test the production site
Install and set up Sites Toolkit
The Sites Toolkit can be obtained directly from GitHub. Go to https://github.com/oracle/content-and-experience-toolkit and click Clone to download. Choose Download ZIP, and content-and-experience-toolkit-master.zip will be downloaded. Unzip the file content-and-experience-toolkit-master.zip. Enter cd content-and-experience-toolkit-master/react-starter-site to go to the directory.
To set up the Starter Site CLI, continue to step 4 onward of Install the Starter Site CLI. After installing Starter Site CLI, you should be able to invoke the help for cecss.
content-and-experience-toolkit-master/react-starter-sites$ cecss -h
Usage: cecss <command> [options]Run 'cecss <command> -h' to get the detailed help for the command.Commands:
cecss create-site <name> Creates the Site <name> for the content from local or from CEC server.
cecss export-server-content <channel> Create content template based on the channel <channel>, then export and download the archive from CEC server.
cecss list-server-content-types List all content types from server.
cecss list-server-channels List all channels from server.
cecss develop Start development server. Watches files, rebuilds, and hot reloads if something changes.
cecss build Build a CEC starter site.
cecss serve Serve previously build CEC starter site.Options:
--help, -h Show help [boolean]
--version, -v Show version number
Then Do a One-Time Gradle Setup to set up the gradle.properties.
Finally, create a new file under the user’s home directory called .cec_properties (~/.cec_properties) and input the values for your OCE server. For example:
cec_url=<server-name.example.com>
cec_username=<username>
cec_password=<password>
cec_env=pod_ecDevelopment: obtain the content template
A content template is a packaging of content assets (that is, content items and content types). Given a publishing channel, a content template package can be generated from the OCE using the Starter Site CLI. One of the purposes of a content template, besides packaging, is to serve as a content model for creating the React site. Secondly, the content template serves as a sample when you generate data to be used locally during the development phase.
For this blog, a sample content template is provided, coffee_channel_export.zip.
However, if you need to generate a content template from the OCE, you can use the cecss export-server-content <channel> command. For example:
~/content-and-experience-toolkit-master/react-starter-sites$ cecss export-server-content coffee_channel
- validate channel coffee_channel (id: CC2F6DD98FC4D082F349DF0301F6580B16DFDE295DCF)
- get CSRF token
- submit export job
- download export file
- save export to ~/content-and-experience-toolkit-master/react-starter-sites/coffee_channel_export.zipDevelopment: create a React site from the content template
A React site can be created from a content template with the following command: cecss create-site <site> -c <content template> -n <navigation content types>. Created the site CoffeeSite using the following command. Make sure the content template, coffee_channel_export.zip, is in the content-and-experience-toolkit-master/react-starter-sites directory.
~/content-and-experience-toolkit-master/react-starter-sites$ cecss create-site CoffeeSite -c coffee_channel_export.zip -n coffee_origin,coffee_green_bean
- unzip content template file
- unzip site template
- add content to site
- set up files for site runtime
- create component file ./CoffeeSite/src/coffee_green_bean/coffee_green_bean.js
- create component file ./CoffeeSite/src/coffee_origin/coffee_origin.js
- finish processing js files
*** site created, please run npm install to buildDevelopment: build the development site
During development phase, the React site can be built with command npm install. Go to the site directory CoffeeSite and do npm install.
~/content-and-experience-toolkit-master/react-starter-sites$ cd CoffeeSite
~/content-and-experience-toolkit-master/react-starter-sites/CoffeeSite$ npm install> fsevents@1.2.7 install ~/content-and-experience-toolkit-master/react-starter-sites/CoffeeSite/node_modules/fsevents
> node installnode-pre-gyp WARN Using request for node-pre-gyp https download
[fsevents] Success: "~/content-and-experience-toolkit-master/react-starter-sites/CoffeeSite/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote> puppeteer@1.7.0 install ~/content-and-experience-toolkit-master/react-starter-sites/CoffeeSite/node_modules/puppeteer
> node install.jsDownloading Chromium r579032 - 80.8 Mb [====================] 100% 0.0s
Chromium downloaded to ~/content-and-experience-toolkit-master/react-starter-sites/CoffeeSite/node_modules/puppeteer/.local-chromium/mac-579032
npm notice created a lockfile as package-lock.json. You should commit this file.
added 898 packages from 637 contributors and audited 7480 packages in 43.691s
found 0 vulnerabilities
If npm is having network issue, check to see if you are behind a firewall. You might need to specify proxy in ~/.npmrc.
~/content-and-experience-toolkit-master/react-starter-sites$ cat ~/.npmrc
proxy=<proxy-name.example.com>
https-proxy=<https-proxy-name.example.com>
registry=https://registry.npmjs.orgDevelopment: run the development site
To run the site in development mode, you can use cecss develop.
~/content-and-experience-toolkit-master/react-starter-sites/CoffeeSite$ cecss develop
[0] CEC configure file: ~/content-and-experience-toolkit-master/react-starter-sites/CoffeeSite/.cec_properties
[0] Configured server={"url":"","username":"","password":"","oauthtoken":"","env":"pod_ec","content":"server","contentStatus":"","channelToken":""}
[0] Node env: dev
[0] NodeJS running...:
[0] Site page: http://localhost:8080
[1] Listening at http://localhost:9090
[1] webpack built 3f6d98a12c8f527e007c in 2425msPoint browser to http://localhost:9090.
Click the Details link below Central America.
It shows coffee beans from Central America. Click the coffee green bean from coffee_green_bean:Guatemala Finca Rosma. It shows characteristics of the coffee bean.
It should be noted that the content assets are served locally in development phase.
Development: perform iterative development
The next step is to do the iterative development on the site. A sample modification has been done and you can unzip the file coffee_sample_development.zip to the CoffeeSite directory.
~/content-and-experience-toolkit-master/react-starter-sites/CoffeeSite$ unzip coffee_sample_development.zip
Archive: coffee_sample_development.zip
replace src/Constants.js? [y]es, [n]o, [A]ll, [N]one, [r]ename: A
inflating: src/Constants.js
inflating: src/common/ItemMultiValues.js
inflating: src/coffee_green_bean/coffee_green_bean.js
inflating: src/coffee_origin/coffee_origin.jsHere is a high-level description of the modification:
CoffeeSite/src/Constants.js
- change the site name from “CoffeeSite” to “CoffeeBean4You”
CoffeeSite/src/coffee_origin/coffee_origin.js
- change the render() of class coffee_origin to replace “coffee_origin” with “Coffee Bean By Origin”
- change the render() of class coffee_originSummary to remove <hr/>
- change the render() of class coffee_originSummary to replace the hardcoded “Details” with “{item.fields[‘origin’]}” of render() of class coffee_originSummary
- change the render() of class coffee_originDetail
CoffeeSite/src/coffee_green_bean/coffee_green_bean.js
- change the render() of class coffee_green_beanDetail
CoffeeSite/src/common/ItemMultiValues.js
- change the render() of class ItemMultiValues
After unzip the file and without bouncing the server, point the browser to http://localhost:9090/ again. Below are the same screens after the site has been modified with the sample modification.
Production: deploy template to OCE
After the development phase, the site will be running in production mode with the content assets being served by OCE. But we have to first get the content assets from the template into OCE. Unfortunately, the only way to do this is by importing a site template that contains content assets, and creating a site based on the template to materialize the content assets against a publishing channel. What is better is the ability to import server content for assets by using the cecss CLI. But that is planned for a future OCE release.
Let’s import the site template. The template package is coffee_template.zip. Upload it to OCE. Go to Developer > Templates and import the template package.
You might get a Resolve conflicts dialog. Choose to Create new components.
After we import the template, coffee_template is created.
In Assets (Administration) > Assets, create a new repository called coffee_repository and the content types coffee_origin and coffee_green_bean.
In Sites, create a new site using coffee_template. Call the site coffee_site and use the repository coffee_repository.
After the site creation, coffee_site should appear in Sites.
Go to Assets and choose coffee_repository. Choose Select All and Publish all the content items.
Production: update the site .cec_properties
In the console, run cecss list-server-channels. This command returns a list of channels and tokens. Take note of the token you see for coffee_site. For example:
~/content-and-experience-toolkit-master/react-starter-sites/CoffeeSite$ cecss list-server-channels
- CEC config: ~/.cec_properties
- Channels:
Name Token
coffee_site 7264753c4ef2f3d11855ed4d499433cbOpen the content-and-experience-toolkit-master/react-starter-sites/CoffeeSite/.cec_properties file in an editor. Populate all the fields like below, including cec_channel_token with the token from above. For example:
cec_url=<server-name.example.com>
cec_username=<userid>
cec_password=<password>
cec_env=pod_ec
cec_content=server
cec_content_status=
cec_channel_token=7264753c4ef2f3d11855ed4d499433cbProduction: build a production site
To build the production site, simply run cecss build. For example:
~/content-and-experience-toolkit-master/react-starter-sites/CoffeeSite$ cecss build
Hash: bae365e77aa7881b4418
Version: webpack 4.16.0
Time: 8450ms
Built at: 04/02/2019 1:59:22 PM
Asset Size Chunks Chunk Names
bundle.js 510 KiB 0 [emitted] [big] app
favicon.ico 1.12 KiB [emitted]
index.html 652 bytes [emitted]
Entrypoint app [big] = bundle.js
[2] (webpack)/buildin/global.js 489 bytes {0} [built]
[5] ./node_modules/history/esm/history.js + 4 modules 31.3 KiB {0} [built]
| 5 modules
[10] ./src/Constants.js 383 bytes {0} [built]
[13] ./node_modules/react-redux/es/index.js + 23 modules 43 KiB {0} [built]
| 24 modules
[16] ./node_modules/react-router/es/index.js + 10 modules 32.2 KiB {0} [built]
| 11 modules
[21] ./src/common/queryItems.js 3.71 KiB {0} [built]
[62] ./src/assets/app.css 1.05 KiB {0} [built]
[63] ./src/assets/PageNotFound.png 15 KiB {0} [built]
[64] ./src/common/LocaleSwitcher.js 3.84 KiB {0} [built]
[65] ./src/coffee_origin/coffee_origin.js 8.74 KiB {0} [built]
[95] ./src/coffee_green_bean/coffee_green_bean.js 9.17 KiB {0} [built]
[96] ./src/app/App.js 9.43 KiB {0} [built]
[100] ./src/common/queryReducer.js 3.77 KiB {0} [built]
[123] ./src/index.js 1.38 KiB {0} [built]
[124] multi ./src/index.js 28 bytes {0} [built]
+ 111 hidden modulesWARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
bundle.js (510 KiB)WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
app (510 KiB)
bundle.jsWARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[0] (webpack)/buildin/module.js 497 bytes {0} [built]
[1] (webpack)/buildin/global.js 489 bytes {0} [built]
[3] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 763 bytes {0} [built]
+ 1 hidden module
Production: run the production site
To run the production site, do cecss serve. If the development site is running, it has to be stopped, or the production site will not run.
~/content-and-experience-toolkit-master/react-starter-sites/CoffeeSite$ cecss serve
CEC configure file: ~/content-and-experience-toolkit-master/react-starter-sites/CoffeeSite/.cec_properties
Configured server={"url":"<server-name>.example.com:8080","username":"<username>","password":"<password>","oauthtoken":"","env":"dev_ec","content":"server","contentStatus":"","channelToken":""}
Node env: production
Logged in to remote server: http://swebcli-oracle.slc07jio.osn.oraclecorp.com:8080
Server is listening on port: 8080
NodeJS running...:
Site page: http://localhost:8080Production: test the production site
The production site would be running on http://localhost:8080. Point your browser at the URL to try it out.
The Starter Site CLI is an easy way to get started with React development for Oracle Content and Experience (OCE) Cloud. There are both development and production phases that make it complete for React developers.
