https://github.com/cyyynthia/react-hybrid-boilerplate
A boilerplate to quickly start working on React projects using hybrid rendering
Science Score: 13.0%
This score indicates how likely this project is to be science-related based on various indicators:
-
○CITATION.cff file
-
✓codemeta.json file
Found codemeta.json file -
○.zenodo.json file
-
○DOI references
-
○Academic publication links
-
○Committers with academic emails
-
○Institutional organization owner
-
○JOSS paper metadata
-
○Scientific vocabulary similarity
Low similarity (12.3%) to scientific vocabulary
Keywords
Repository
A boilerplate to quickly start working on React projects using hybrid rendering
Basic Info
- Host: GitHub
- Owner: cyyynthia
- License: bsd-3-clause
- Language: JavaScript
- Default Branch: master
- Size: 480 KB
Statistics
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 0
- Releases: 0
Topics
Metadata Files
README.md
React Hybrid Boilerplate
A boilerplate to quickly start working on React projects using hybrid rendering.
Hybrid rendering?
Basically, in production there is a small web server (here pure native http module) that'll be in charge of pre-rendering your React application. It then gets hydrated client-side, which means React will then bind all the events it needs to bind and work as if it was CSR. It helps to enhance SEO, load times, and makes your application usable by users who disabled JavaScript.
Features
- No expressjs: It uses Node's http module to create the web server, and not bloated stuff;
- Hot reload: It is capable of hot reloading while developing;
- react-helmet and react-router are ready to be used, no extra-setup required;
- Image minification with imagemin in production builds;
There are also some env variables that get injected in your application through webpack's DefinePlugin:
- WEBPACK.GIT_REVISION - Git revision; null if git isn't present.
You're of course able to edit the configuration to your needs.
Note: This boilerplate uses css modules by default. You can disable
them by looking at webpack.config.js line 90.
How to use
Aliases
@components/*: src/components/*@styles/*: src/styles/*@assets/*: src/assets/*
How to run
Note: This boilerplate uses pnpm for dependency management.
Development
Both webpack and the http server must be running
- pnpm run dev - Runs the http server with nodemon
- pnpm run watch - Runs webpack dev server
Then, open http://localhost:8080 in your web browser and start tinkering!
Production
- Build the app:
pnpm run build - And then start the http server!
pnpm run start
You can change the port by setting the PORT env variable. By default, it'll listen on http://localhost:6969.
Things I consider adding in the future
- TypeScript support
- Redux support
- Something to easily configure the boilerplate w/o having to edit stuff (cli args? env vars? install script?)
- Markdown support (Export as React component)
Owner
- Name: Cynthia
- Login: cyyynthia
- Kind: user
- Location: Toulouse, France
- Company: @Borkenware
- Website: https://cynthia.dev
- Twitter: cyyynthia_
- Repositories: 102
- Profile: https://github.com/cyyynthia
23f. French Computer Science student at the University of Toulouse. I have a crippling cookie and coffee addiction.
GitHub Events
Total
Last Year
Committers
Last synced: 7 months ago
Top Committers
| Name | Commits | |
|---|---|---|
| Bowser65 | b****r@w****s | 9 |
Committer Domains (Top 20 + Academic)
Issues and Pull Requests
Last synced: 7 months ago
All Time
- Total issues: 0
- Total pull requests: 0
- Average time to close issues: N/A
- Average time to close pull requests: N/A
- Total issue authors: 0
- Total pull request authors: 0
- Average comments per issue: 0
- Average comments per pull request: 0
- Merged pull requests: 0
- Bot issues: 0
- Bot pull requests: 0
Past Year
- Issues: 0
- Pull requests: 0
- Average time to close issues: N/A
- Average time to close pull requests: N/A
- Issue authors: 0
- Pull request authors: 0
- Average comments per issue: 0
- Average comments per pull request: 0
- Merged pull requests: 0
- Bot issues: 0
- Bot pull requests: 0