projext plugin for React on Rollup
projext allows you to configure a project without adding specific settings for a module bundler, then you can decide which build engine to use. This plugin is meant to be used when you are bundling a React application and you are using the Rollup build engine.
|Description||Allows you to bundle a React project with projext using the Rollup build engine.|
|Node Version||>= v10.13.0|
- You first need the build engine, so install
- Add a new setting to your target named
frameworkand set its value to
Now, when your target gets builded, the plugin will check if the target is using Rollup and if the framework is
react, then it will make the necessary changes to bundle the
Server side rendering
Server side rendering (SSR) is when you render your application on the server (backend) as a string, serve it on the browser and then you app runs in order to add all the JS magic.
Let's say you have a
backend target with your Node server code, and a
frontend target with your React code, and you want to require your
frontend code on the
backend in order to use
backend target you'll have to define its
framework property to
react, so the plugin can include the JSX preset, and then make sure you included the
frontend target on the
moduleexports =targets:backend:type: 'node'framework: 'react'includeTargets: 'frontend';
includeTargetsis a default setting provided by project. It tells the build engine that the files from the specified target(s) should also be transpiled/processed.
Done, now you can
import files from your
frontend target on the
backend target and everything will work.
This plugin adds the
react preset for JSX support.
When bundling your targets, the plugin will check if the target is for Node or if it is a browser library and automatically exclude the React packages so they don't end up on your build.
||Run the project unit tests.|
||Lint the modified files.|
||Lint the project code.|
||Generate the project documentation.|
I use ESlint to validate all our JS code. The configuration file for the project code is on
./.eslintrc and for the tests on
./tests/.eslintrc (which inherits from the one on the root), there's also an
./.eslintignore to ignore some files on the process, and the script that runs it is on
I use ESDoc to generate HTML documentation for the project. The configuration file is on
./.esdocrc and the script that runs it is on