create-react-app like functionality

[nileshgulia1]

(See full discussion here.)
plone-react should have create-react-app like functionality i.e using a package boilerplate inside project and extend it to zero configuration.The theme should be pastanaga which may used as a boilerplate theme so that user can initialise a plone project with zero configuration.It also covers #68 so that a create -plone -app will also be a PWA.
This was listed under GSOC projects list for plone foundation. I would love to work on it.
@tisto

[nileshgulia1]

Here's the approach I have decided to follow so far:

1. Trigger create-react-app to create a new app with a provided app name.
2. Configure, download and install a list of additional packages.(Here power of webpack and other tools may be needed).
3. Replace the default template files with new files as needed.(May be pastanaga theme will be in use here).

[nileshgulia1]

@tisto This is the small snippet I have implemented so far for executing CRA command for a given app name

let appName = process.argv[2] //it  will pull the provided app name out of the parameters of our shell command.
let appDirectory = `${process.cwd()}/${appName}` //store the path to the directory that CRA is going to create.

const run = async () => {
  let success = await createReactApp()
  if(!success){
    console.log('Something went wrong while trying to create a new React app using create-react-app'.red)
    return false;
  }
  
  console.log("All done")
}
run()
const createReactApp = () => {
  return new Promise(resolve=>{
    if(appName){ //If appname provided then execute CRA command
      shell.exec(`create-react-app ${appName}`, () => {
        console.log("Created react app")
        resolve(true)
      })

    }else{
      console.log("\nNo app name was provided.")
      console.log("\nProvide an app name in the following format: ")
      console.log("\ncreate-react-app ", "app-name\n")
        resolve(false)
    }
  })
}

[nileshgulia1]

@tisto Can we use fork of react-scripts instead of ejecting the whole app so that we can have only those configurations which we need without loosing all configs?

[tisto]

@nileshgulia1 yes. I guess that is the idea. Our fork of react-scripts should contain the "library parts" of plone-react, the webpack config, the server side rendering, etc.. What do you think @robgietema?

[nileshgulia1]

@tisto Here’s the approach I have decided to follow so far. I have tried to implement a basic app generator out of Create-react-app. It talks to plone.restapi and sends a GET request. Right now the app just replaces the CRA’s templates files with our own and adds additional packages without ejecting the initial configuration.
Quick Proof of concept : https://github.com/nileshgulia1/App-generator-CRA

[nileshgulia1]

facebook/create-react-app#682 @sneridagh @robgietema We can use --scripts version and specify our own scripts , What do you think ?

[sneridagh]

@nileshgulia1 yes, I think it's the official way to go I guess. Next week we will meet in a sprint in Bonn and we will discuss all this there. We'll keep you posted!

[robgietema]

I'm not sure the --scripts version will do the job for us, since it will only overwrite the scripts which are available in create-react-app and you won't be able to add other ones we currently use (like yarn prettier, yarn lint etc).

[nileshgulia1]

@robgietema @tisto Don't we create our own custom-react-scripts like this one https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a ?

[nileshgulia1]

@tisto @sneridagh May be we can make plone-react a base package and install it as an dependency in our app generator and use pastanaga as template scripts. I need your thoughts about this for writing a strong proposal.

[tisto]

@nileshgulia1 we looked into this today at our sprint in Bonn. We could schedule a hangout tomorrow to discuss this if you are up to it. Any other student who is interested in the create-react-app functionality is also welcome to join.

[nileshgulia1]

@tisto That's great I"ll join you guys tomorrow :)

[tisto]

@nileshgulia1 what time would you prefer? We will start tomorrow morning at 9 am CET. In which time zone are you?

[nileshgulia1]

@tisto I am in IST (UTC +5:30) , 9 am CET means 1:30 pm here , that's fine I can join you :)

[tisto]

@nileshgulia1 ok, then let's do it at 11 am CET? That gives us a bit of time in the morning to work on other stuff...

[nileshgulia1]

@tisto can we please keep 9 am or 10 am CET? as I have exams to attend in university . We can schedule it after 1 pm CET also if you like?

[tisto]

Sure. 10 am is fine. Von meinem iPhone gesendet

…

Am 14.03.2018 um 04:09 schrieb Nilesh ***@***.***>: @tisto can we please keep 9 am or 10 am CET? as I have exams to attend in university . — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[tisto]

@nileshgulia1 please join our sprint hangout:

https://hangouts.google.com/hangouts/_/kitconcept.com/plonereactsprint2018

[ajayns]

@tisto This hangout would be just regarding the create-react-app functionality?

[tisto]

@ajayns yes

[tisto]

@ajayns if you are interested into working on plone-react itself, we might be able to do another hangout today.

[ajayns]

@tisto Sure! That sounds great! Do let me know the when you're planning to do the hangout.

[tisto]

@ajayns are you available for a quick chat on IRC? Join the #sprint channel on freenote and ping me (tisto).

[nileshgulia1]

@tisto Is there any way I can contact(chat) with you guys about technical details of the project and proposal besides this thread?

[tisto]

@nileshgulia1 sure. either IRC (freenode #sprint or #plone) or the plone slack channel. You can also email me (tisto@plone.org).

[ajayns]

@tisto Sorry I was afk a while back. I've joined the chat.

[tulikavijay]

if there is another hangout or chat session do let me know, i had my exams this month so i was inactive for a while.

[ajayns]

@tulikavijay Of course will let you know. Right now though, plone-react is up and running and they're eager to move forward with it, so @tisto has outlined a possible project proposal idea for plone-react here: #115

[robgietema]

Merged to master.