Adding a new page to your reactGo project can be a lengthy process.  I’m hoping to write a yeoman generator to do this for me in the near future but for now…  Here are the steps.

Steps:

1. Add a new route to your app >routes.js
   Add Something like: <Route path="routeName" component={page} onEnter={requireAuth} fetchData{[fetchItemData, fetchCartData]} />
   to the Route section.
   Add the necessary supporting imports.
2. Add a new entry to the navigation.
3. Create a new page in the pages folder.
   Duplicate existing page, then open.  Update references to new component name.
4. Add reference to app > pages > index.js
   export { default as ContianerName } from 'pages/ContainerName';
5. Create a new data fetcher (if necessary)
   Duplicate existing and update path to get data from server and action type to dispatch.
6. Update the app > fetch-data > index.js with the new reference.
   export { default as fetchMyData } from './fetchMyData';
7. If a new data set is needed follow these steps: Add a New Dataset to the Store
8. Create a new Container
   Duplicate an existing component then design and build your page.
9. After your pages design is complete componentatize what you should.

Questions for yeoman generator:

• Provide Route name: String
• Provide page/component name: String
• Does the page already exist? Boolean
• If No => Provide Page Description: String
• Would you like to generate a new CSS Module for the page? Boolean
• Auth required? Boolean
• Does it need to fetch any data? Boolean
  • If yes => How many? Number
  • For count:
    • Provide Data Fetcher name: String
    • Does it already exist? Boolean
    • If No => Does dataset exist?
      • If No => Start dataset generator
      • If Yes => Provide path to fetch data from server.

First up you’ll need to be able to successfully run a build for your current ReactGo app.  I assume you have docker installed.

npm run build

Once you’ve got a successful build on your hands go ahead and create your dockerfile.  Example one below:

FROM node:boron

# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install app and dependencies
COPY package.json /usr/src/app/
RUN npm install

# Copy build
COPY compiled /usr/src/app/compiled
COPY public /usr/src/app/public

# Set Environment Variables
ENV MONGODB_URI mongodb://mongo/MyAppCollection
ENV NODE_ENV production
ENV PORT 80

EXPOSE 80

CMD ["node", "compiled/server.js"]

You can use a later version of Node if you like I built and tested my on v6.10.

docker build -t <image_name> .

NOTE: DO NOT FORGET THE PERIOD AT THE END (that caused me a serious headache one day…)

While that is building lets launch a mongo container to run our database (we’ll link to it later).  I assume you’ve already pulled mongo from the docker hub: docker pull mongo

docker run -d --name <db_container_name> mongo

Now let test our container locally… I’m going to bind our exposed 80 port to port 80 on localhost to demonstrate how it’s done.  This same principal applies when launching a container out in a production docker environment.

docker run -d -p 127.0.0.1:80:80 -it --link <db_container_name>:mongo --name <app_container> <image_name>

NOTE: notice the MONGODB_URI ENV variable we set in the docker file.  Take special note of underlined part that follows: the mongodb://mongo/MyAppCollection.  This MUST match the link name you give in your run command (e.g. <db_container_name>:mongo).

Check your local host on port 80 and you should see your app.  If not check the logs by using the docker logs <container_ID> command.  Container IDs can be found with docker ps -a command.

After you’ve successfully tested your container you’re ready to push the image to your registry.  You can use docker hub but I’m using Bluemix, since it’s private and I get it for free ;).  After you login to your registry tag your image for release:

Bluemixers need your name space? try bx ic namespace-get

docker tag <image_name> registry.ng.bluemix.net/<name_space>/<app_name>:<version_tag>

The version tag is optional but recommended.  It will default to latest otherwise. Then push it (push it real good)

docker push registry.ng.bluemix.net/<name_space>/<app_name>:<version_tag>

Then wait… forever…

If your on Bluemix you’ll probably want to push up a mongo container as well. (remember to start one up so we can link to it like we did on local host)

For those of you who are not using Bluemix substitute the bx ic commands below for your registry (should be just docker for most of the world)

bx ic cpi mongo registry.ng.bluemix.net/<name_space>/mongo

From there I usually create a dummy container with the Bluemix GUI (website) so I can provision a public IP through Bluemix which I can then reuse when I launch a container with this command.  There is probably a way to provision an IP through CLI but I’m too lazy to look it up.

bx ic run -d -p <my_public_ip>:80:3000 -it --link <db_container_name>:mongo --name <app_container_name> <name_space>/<image_name_or_id>