Workflow for React UI development

[bencao]

Hi Team, I tried the status example to get an idea of how React development would look like in the Serverless Cloud.

Here's a log of my attempts:

1. First I tried to change some title text in a component file, and although the cloud syncing shows that "Successfully updated your code in less than a second" the change wasn't reflected in my personal instance.
2. Then, I ran yarn in the frontend folder, which resulted in the cloud syncing process keeping updating for maybe a few minutes (I guess it is related to the massive node_modules folder in the frontend folder?)
3. The next step I tried is to run yarn build which generates the updated bundle to replace the one in static folder, the build took 10s for this small starter project. After build it took cloud syncing a few additional seconds (about 7s) to upload the updated static files.
4. After all those were done I tried to access my personal instance, the first request I tried failed with a blank screen. The second one worked.

Overall, I would say at current stage, the React dev workflow is still clumsy and relies on many manual operations. Also the round trip for testing even a small text change is more than 1 minute, which is a big regression comparing to the experience offered by modern framework like Nextjs and create react app.

Understood that we're still in early limited preview phase, but out of curiousity, I would like to hear some thoughts from the team on what's in your roadmap, and what the ideal React development workflow would look like when the Serverless Cloud has unleashed its full potential?

[jeremydaly]

Hi @bencao! Thanks for the detailed feedback.

This is certainly not the workflow we envision or how it should work now. First, please make sure you are on v2.2.1 of the CLI. We've added some major performance enhancements to the syncing capabilities that should reduce most code change syncs to less than a second. Larger files (like big old react-starter templates in node_modules) will still be limited by connection speed. However, those should only need to be synced once.

The SPA workflow can be optimized a bit by following the instructions here: https://www.serverless.com/cloud/docs/apps/static-assets

Using the .serverlessignore file, you can keep your work together and only sync the build files. However, right now you do need to have a separate terminal window open to handle your react builds. We are working on ways to optimize this process, so please stay tuned. And, of course, your ideas are very welcome.

Some of the issues you're having seem like bugs and we will investigate immediately.

[dougmoscrop]

Hey @bencao - we've made, what I believe, are some really amazing improvements in this workflow. Not only for React, but for many other frameworks - check out the examples to see how we enable support for a cloud:build hook and better local dev (cloud dev). Please feel free to share any feedback!