Web log

Google Summer of Code 2018

Organisation: Plone

Overview Of The Project:

Create-React-App provides a development environment with a selection of pre-configured tools to make life of a developer easy. It also provides some convenience features, such as: a live development environment (intelligently updates your app in-browser as you modify your code), boilerplate code, and standard dependencies pre-installed. The idea is to make Plone-react package as a dependency to other packages and make ( use ) a create-react-app like app generator to generate the example boilerplate( Pastanaga ) which fits with the package.

Community Bonding Period (23-Aug-2018 to 14-May-2018)

In practice, the community bonding period is all about, well, community bonding. Rather than jumping straight into coding, you've got some time to learn about your organization's processes - release and otherwise - developer interactions, codes of conduct, etc. In past I had few hangout sessions with mentors discussing technical details of the project and dive deeper into webpack and react-scripts.

Week 1

Webpack configuration period (04-May-2018 to 22-May-2018)

I will be learning and configuring webpack for the project in the community bonding period itself as I have interacted a lot with mentors in past, so I decided to start working asap. Right now I am diving into generating build for each environment and figuring out How to setup webpack compiler (reading official docs). Due to my sem-end exams there may be some delay from my side, but I will start coding by 8th of May.

I need more time to configure webpack so that I can entirely focus on scripts part thereafter.
Done:

  • Write bin script for making plone-react as executable(PR merged).
  • Configuring env. variables.
  • getting hands on isomorphic-webpack.
  • Webpack common configuration. (Victor has advised me to keep original configurations as soon as we need it. We can alter them afterwards when there is a real need).
  • webpack configuration on development side.
  • Webpack production and devServer configuration.

React-scripts configuration(22-May-2018 to 11-june-2018)

Week 2

  • start script

    Done:

  • configure start script.
    Our start script starts the development server. I'm taking reference from original webpack development configs in our plone-react repo. These configs are already defined on the plone-react project under /webpack, I have to tweak those configs to match flexibility of CRA.
    Made an initial PR (https://github.com/plone/plone-react/pull/152) related.But according to my mentor Victor we need this script to be hidden from user as in CRA.The final command should be:

    "start" : "plone-react start"

    I need to find out a way to implement this.This will be applicable to other scripts I will write in future.
    In CRA when we execute yarn start it executes "react-scripts start" which intern executes "node scripts/start" under the hood. According to my mentor Victor we need some parallel executions in start script which will execute all "npm-run-all" and SSR related comands.
    So far I thought of using shelljs (https://github.com/shelljs/shelljs). This will serve as first implementation or a quick POC of what we want to achieve.

    Week 3

  • Build script

    Done:

  • configure build script.
    I will configure build script for building our assests for production. I will take reference from our original webpack configs defined in plone-react repo. As mentioned above we need this script to be hidden from user as in CRA. The final command should be:

    "build" : "plone-react build"

    Had talked with my mentors Rob and Victor about further implementation of react-scripts using shelljs.
    Rob has advised me to use shelljs library to call npm scripts directly from .js files. Got a PR merged on Rob's approval https://github.com/plone/plone-react/pull/160

    Blockers

  • We need to serve a minimum boilerplate with pastanaga overrides, but it is part of 2nd phase,so I'm just figuring out How it can be achieved.

Meeting Minutes(31-05-2018):

attendees:

  • Rob
  • Victor
  • Nilesh

Things Discussed:

  • Focus on the scripts part for now.
  • If standard execution of scripts won't work, then shelljs should be an option.
  • Use shelljs to run npm-run-all commands.

Week 4

  • Test script

    Done:

  • configure test script.
    This is the last week before 1st evaluation,I have to complete some of the scripts part before the evaluations, so that we can focus more on boilerplate part thereafter.I will configure test script which runs our unit and acceptance tests along with linter and prettier formatter. Got merged this PR https://github.com/plone/plone-react/pull/162

    "test" : "plone-react test"

    I wanted to thank you all for all of the support and mentorship you have shown towards me over past days. Special thanks to Rob and Victor as they showed me the correct path towards the advancement of the project and helped me to give project a good kickstart.

    First Evaluations (June 11-June 15)

To do for 2nd phase(In short):

  • Find a way to hide and generate these scripts in the form of : "task" : "plone-react script". We can define these in new script called init.js.
  • Make a minimum pastanaga boilerplate by overriding css/less variables in present semantic theme.
  • A method to generate(copy) these components into user directory.
  • Install template dependencies(if required) and look into the problem of initializing our generated app.
  • Tweak some of the scripts configs according to new components if required.
  • Write docs too yeah.

Meeting Minutes(13-06-2018):

attendees:

  • Victor
  • Nilesh

Things Discussed:

  • Start on the boilerplate part.
  • Focus on a minimum viable product.
  • Will take care of tests later on.
  • We will have another hangout at beethoven sprint on friday.

June 15 - July 08 (Pastanaga part)

Week 5

Done:

  • A rough Method to copy theme components to user directory.
  • Started exploring Pastanaga theme and its variables defined in theme/site
  • Had a discussion with Victor, We'll focus on minimum viable product.
  • Finished 1st evaluations, Mentors gave positive review on the progress mentioning not to depress if we don't get the result on small features, we'll get the positive results soon as it need some of the pre-requistees before adding some features.

To do for next week:

  • [] Find a way to override theme variables on discussion with mentors.
  • [] How to use components inside the theme, Can plain copy would suffice?
  • [] Will have a hangout at beethoven sprint on friday(22-06-2018) to get things more clear on pastanaga theme and all-over roadmap of the remaining part of the project.

Week 6

Done:

  • Configured path to our user directory files(path.js) (https://github.com/plone/plone-react/pull/179).
  • Had a deeper review into pastanaga, in particular semantic theme.
  • Modified some webpack configs so that it will also watch for files in user directory.(https://github.com/plone/plone-react/pull/192).
  • We will use the global definitions under site.variables to get them inherited into elements.variables.
  • In theme.config we can set which particular theme to use for a specific element or component.

Week 7

Done:

Week 8

Meeting Minutes(04-07-2018):

attendees:

  • Victor
  • Nilesh

Things Discussed:

  • Start on the scaffold tool and make a initial way to generate boilerplate.
  • Call the code internally from @plone/plone-react.
  • The boilerplate part is so far good.

Done:

  • MAde an initial way to copy user templates to generated user directory.
  • For now files in src/ are taken as base files.
  • Work on the global create-plone-react-app command.(https://github.com/plone/plone-react/pull/213)
  • Install required packages to user directory.
  • Finished major part of scaffolding app.

Here's a quick view:

peek 2018-07-07 08-24

Week 9

Done:

  • Our scaffold tool works well with the new plone-react release.
  • Now we have a user ready directory after executing the global command (https://github.com/nileshgulia1/plone-react-example).
  • Finished 2nd evaluations, Mentors gave Nice review about the progress and outcome of the project so far.

Week 10

Done:

last updated: 23-07-2018

Note: This Blog will be updated every week on Monday showing progress of my work during summers.