react-snapshot - A zero-configuration static pre-renderer for React apps

  •        82

Server-side rendering is a big feature of React, but for most apps it can be more trouble than its worth. Personally, I think the sweet spot is taking static site snapshots of all your publicly-accessible pages & leaving anything requiring authentication as a normal, JS-driven Single Page App. This is a project to do that. Automatically, without any configuration, just smart defaults. Retrospective progressive enhancement.

https://github.com/geelen/react-snapshot

Dependencies:

connect-history-api-fallback : ^1.3.0
express : ^4.15.2
glob-to-regexp : ^0.3.0
http-proxy-middleware : ^0.17.4
jsdom : ^9.4.5
mkdirp : ^0.5.1
safe-commander : ^2.11.1

Tags
Implementation
License
Platform

   




Related Projects

react-snap - 👻 Zero-configuration framework-agnostic static prerendering for SPAs

  •    Javascript

Pre-renders web app into static HTML. Uses headless chrome to crawl all available links starting from the root. Heavily inspired by prep and react-snapshot, but written from scratch. Uses best practices to get best loading performance. Zero configuration is the main feature. You do not need to worry how does it work or how to configure it. But if you are curious here are details.

snapguidist - Snapshot testing for React Styleguidist

  •    Javascript

Jest Snapshot Testing for React Styleguidist. In v4, snapshots have been renamed to .sg (as opposed to .snap) to avoid conflicts with Jest, and improve compatibility with create-react-app.

react-static - ⚛️ 🚀 A progressive static site generator for React.

  •    Javascript

A progressive static-site generator for React. React-Static is a fast, lightweight, and powerful framework for building static-progressive React applications and websites. It's been carefully designed to meet the highest standards of SEO, site performance, and user/developer experience.

Gatsby - Blazing fast static site generator for React

  •    Javascript

Gatsby is a blazing fast static site generator for React. Gatsby.js is a static PWA (Progressive Web App) generator. You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.

create-react-app-buildpack - Heroku Buildpack for create-react-app: static hosting for React

  •    Shell

Deploy React.js web apps generated with create-react-app. Automates deployment with the built-in bundler and serves it up via Nginx. See the introductory blog post and entry in Heroku elements. This buildpack deploys a React UI as a static web site. The Nginx web server provides optimum performance and security for the runtime. See Architecture for details.


react-native-view-shot - Snapshot a React Native view and save it to an image

  •    CSharp

Capture a React Native view to an image. Make sure react-native-view-shot is correctly linked in XCode (might require a manual installation, refer to React Native doc).

snapshot-diff - Diffing snapshot utility for Jest

  •    Javascript

Diffing snapshot utility for Jest. Takes two values, and return their difference as a string, ready to be snapshotted with toMatchSnapshot(). Especially helpful when testing the difference between different React component states.

nextein - A static site generator with markdown + react for Next.js

  •    Javascript

nextein is a wrapper around next.js that allows you to write static sites using markdown and react. NodeJS v8.x+ is required to run nextein commands.

cuttlebelle - The react static site generator that separates editing and code concerns

  •    HTML

All static site generators I have used restrict you to use one layout per page. Todays webdesign needs have outgrown this and we often find ourself either adding code into our content pages (markdown files, liquid templates) or content into our code. That makes updating and maintaining a page hard, especially for a non-technical content author. I needed a generator that can separate content from code as cleanly as possible while still staying a static site generator and as dynamic as possible.

dumb-react

  •    Javascript

Dumb React is a collection of React components used to create a static (dumb) website screen. Why do this? Many React tutorials or boilerplates I've encountered are either too basic ("here's a button component!") or more often too complex ("here's a simple babel typescript redux cssmodules isometric oh god oh god oh god..."). I wanted to be able to draw a straight line from how a simple component ("atom" in atomic design speak) makes its way into a full page. There are a ton of different ways to build reusable components and put dynamic content inside them, and many teams — even ones that aren't building highly-interactive web apps that would actually benefit from a tool like React — are reaching for React to create component-driven experiences. So in that spirit, I wanted to create a demo that shows how to construct a whole screen (even if it's a dumb, static one) out of React components.

todo-react-redux - Todo app with Create-React-App • React-Redux • Firebase • OAuth

  •    Javascript

A simple Todo app example with undelete capability — built with Create React App, React Redux, and Firebase. Try the demo at https://todo-react-redux.firebaseapp.com.

create-react-native-app - Create a React Native app on any OS with no build config.

  •    Javascript

Create React Native apps with no build configuration. Once you're up and running with Create React Native App, visit this tutorial for more information on building apps with React Native.

reactnd-project-myreads-starter - Starter Code for the React MyReads Project

  •    Javascript

This is the starter template for the final assessment project for Udacity's React Fundamentals course. The goal of this template is to save you time by providing a static example of the CSS and HTML markup that may be used, but without any of the React code that is needed to complete the project. If you choose to start with this template, your job will be to add interactivity to the app by refactoring the static code in this template. Of course, you are free to start this project from scratch if you wish! Just be sure to use Create React App to bootstrap the project.

react-app-rewired - Override create-react-app webpack configs without ejecting

  •    HTML

Tweak the create-react-app webpack config(s) without using 'eject' and without creating a fork of the react-scripts. All the benefits of create-react-app without the limitations of "no config". You can add plugins, loaders whatever you need.

roadhog - 🐷 Cli tool for creating react apps, configurable version of create-react-app.

  •    Javascript

Roadhog is a cli tool with dev、build and test commands. It's based on react-dev-utils and is consistent with the experience of create-react-app. You can imagine this is a configurable version of create-react-app.roadhog dev support mock, configured in .roadhogrc.mock.js.

generact - Generate React components by replicating your own

  •    Javascript

Tool for generating React components by replicating your own. It's intended to work no matter how your file structure is.  Are you looking for a VS Code extension? Try vscode-generact.

react-testing-mocha-jsdom - Unit testing React Components with Mocha + jsdom

  •    Javascript

This is Part 2 of the series "Modular Isomorphic React JS applications". See Part 1 and Part 3 for more. Unit testing React is traditionally done using Jest which dictates the use of the Jasmine testing framework, and enforces mocking of all require calls. For such an unopinionated rendering engine, this is a very opinionated setup, resulting in issues such as overly-verbose unmocking of requires, and being tied into Jasmine's limited framework.

Netlify CMS - A CMS for Static Site Generators

  •    Javascript

A CMS for static site generators. Give non-technical users a simple way to edit and add content to any site built with a static site generator.Netlify CMS is a single-page app that you pull into the /admin part of your site.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.