https://github.com/kireerik/razzle-material-ui-styled-example
Razzle Material-UI example with Styled Components using Express with compression
https://github.com/kireerik/razzle-material-ui-styled-example
boilerplate compression example example-project express isomorphic material-ui razzle react react-dom server-side-rendering ssr styled-components template universal webpack
Last synced: 1 day ago
JSON representation
Razzle Material-UI example with Styled Components using Express with compression
- Host: GitHub
- URL: https://github.com/kireerik/razzle-material-ui-styled-example
- Owner: kireerik
- Created: 2017-05-12T21:02:20.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2025-07-14T04:53:18.000Z (7 months ago)
- Last Synced: 2025-07-14T09:05:43.840Z (7 months ago)
- Topics: boilerplate, compression, example, example-project, express, isomorphic, material-ui, razzle, react, react-dom, server-side-rendering, ssr, styled-components, template, universal, webpack
- Language: JavaScript
- Homepage: https://hackernoon.com/material-ui-get-started-fast-react-16-eea211d65308
- Size: 1.09 MB
- Stars: 114
- Watchers: 5
- Forks: 14
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Razzle Material-UI Styled Example
⭐ Star and get notified about new releases via email.
## Features
-
- **S**erver **S**ide **R**endering
- **H**ot **M**odule **R**eplacement for both client and server side [React](https://facebook.github.io/react/) components
- Up to date JavaScript ([**E**CMA](https://en.wikipedia.org/wiki/Ecma_International)**S**cript 6 (2015)) support
- Single route static site generation
- server with gzip [compression](https://github.com/expressjs/compression)
- HTML and inline CSS and JS minification with [HTMLMinifier](https://github.com/kangax/html-minifier)
- [Styled Components](https://www.styled-components.com/)
- [Material-UI](http://www.material-ui.com/#/)
## Getting Started
- Initial steps
- Install and .
- [Download](https://github.com/kireerik/razzle-material-ui-styled-example/archive/master.zip) or [clone](github-windows://openRepo/https://github.com/kireerik/razzle-material-ui-styled-example) this repository.
- Open a command prompt in the project folder.
> Install dependencies:
> ```shell
> yarn install
> ```
Start the server:
> ```shell
> yarn start
> ```
> This command initiates a build process and starts the server in production mode.
Visit http://localhost/ to access the web application.
### Development
Start the server in development mode:
```shell
yarn dev
```
### Single route static site generation
Generate a static site:
```shell
yarn static
```
Open the `index.html` within the `static` folder to access the web application. The folder name can be modified with the `RAZZLE_STATIC_PATH` environment variable.
## Idea behind the example
This project is based on the [basic razzle example](https://github.com/jaredpalmer/razzle/tree/master/examples/basic). This repository also satisfies the following 2 entry points requred by Razzle:
- `src/index.js` for the server
- `src/client.js` for the browser