npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

universal-react-app

v2.5.2

Published

Universal react app counter example

Downloads

51

Readme

universal-react-app

Yet another Universal React app example.

Install

npm install

Development

In development you can either use your local environment or the docker version with docker-compose.

Local environment

npm start

Then browse http://localhost:3000

Docker-compose

docker-compose up

Then browse http://localhost:3000

Production

The docker-compose.prod.yml is provided as an example for a docker production usage. Both the client and server dockerfile present in docker/ uses multi-stage build to keep the devDependencies at bay.

Frontend

The frontend is a nginx:alpine with some nginx presets from h5bp. It serves the built version of the client dist/client.js along with the public/ directory.

Backend

The backend is a node:alpine that just run the built version of the server dist/server.js.

Usage

docker-compose -f docker-compose.prod.yml up

Presentation

The ES6 syntax is used throughout the project along with some ES7 proposals.

Stack

  • react for components
  • redux for state management
  • react-router-redux as a router
  • jss as the CSS in Js solution.
  • material-ui React components that implement Google's Material Design.
  • express
  • pino as the logger - similar to Bunyan - with a smoother browser integration.
  • webpack as the module bundle for the client and server.

Folder structure

The source of this app are available under src/ and are split between 3 directories, client, common and server:

├── client
│   ├── Components/App.js
│   ├── index.js
│   ├── store.js
│   └── history.js
├── common
│   ├── actions
│   ├── Components
│   ├── constants
│   ├── Pages
│   ├── reducers
│   ├── styles
│   ├── configureStore.js
│   ├── theme.js
│   └── routes.js
└── server
    ├── Components/App.js
    ├── appHandler.js
    ├── index.js
    ├── store.js
    └── history.js

Configuration

Application level configuration is available as environment variables, the default are provided by the config key in the package.json:

...
"config": {
    "port": "3000"
},
...

This variable, for example is made available by npm-scripts in the package.json and the application itself as npm_package_config_port.

Webpack

To build things up there are 2 webpack config files that handles both server and client contexts as well as production and development environments:

  • webpack.client.babel.js

The client configuration uses extract-npm-package-config along with the webpack.EnvironmentPlugin to replace the npm_package_config_* variables with their values.

  • webpack.server.babel.js

Licence

MIT