jaredpalmer/razzle

✨ Create server-rendered universal JavaScript applications with no configuration

Universal JavaScript applications are tough to setup. Either you buy into a framework like Next.js or Nuxt, fork a boilerplate, or set things up yourself. Aiming to fill this void, Razzle is a tool that abstracts all the complex configuration needed for building SPA's and SSR applications into a single dependency--giving you the awesome developer experience of create-react-app, but then leaving the rest of your app's architectural decisions about frameworks, routing, and data fetching up to you. With this approach, Razzle not only works with React, but also Preact, Vue, Svelte, and Angular, and most importantly......whatever comes next.

Getting Started

Visit https://razzlejs.org/getting-started to get started with Razzle.

Examples

Razzle has many examples, we might have one that fits your needs

See: The examples

Documentation

Visit https://razzlejs.org/ to view the documentation.

Getting help

If you get stuck, check out Razzle's GitHub Discussions. In addition, #razzle-afterjs on the Formium Community Discord Server is a great way to get help quickly too.

Contributing

Please see our CONTRIBUTING.md.

Inspiration

• jaredpalmer/backpack
• nytimes/kyt
• facebookincubator/create-react-app
• humblespark/sambell
• zeit/next.js

Author

• Jared Palmer

Contributors

Thanks goes to these wonderful people (emoji key):

• Jared Palmer - @jaredpalmer
  • Contributions: question, code, design, doc, example, ideas, review, test, tool
• Nima Arefi - @Nimaa77
  • Contributions: question, code, doc, example, ideas, review, test, tool
• Øyvind Saltvik - @fivethreeo
  • Contributions: question, code, example, ideas, review, test, tool
• Jari Zwarts - @jariz
  • Contributions: question, code, ideas, plugin, review
• Dan Abramov - @gaearon
  • Contributions: code, ideas
• Eric Clemmons - @ericclemmons
  • Contributions: code, ideas
• Zino Hofmann - @HofmannZ
  • Contributions: example
• Lucas Terra - @lucasterra
  • Contributions: code, example, plugin
• Ray Andrew - @rayandrews
  • Contributions: code, example, plugin
• Heithem Moumni - @heithemmoumni
  • Contributions: code, example, plugin

This project follows the all-contributors specification. Contributions of any kind welcome!

---

MIT License

razzle's Issues

Handle Heroku 30s Timeout

Recipes

Boilerplates work best when things can be deleted easily. I would like to create some recipes for common changes people might have such as:

• removing Aphrodite
• adding CSS modules
• adding Radium
• removing Redial and replacing with a generic fetchData solution

Use Throng

I personally think pm2 is overkill. Throng is a super lightweight wrapper around cluster written by Heroku's Hunter Loftis. We use it in production at ShellyPalmer. It's rock solid.

Edit: added links to pm2 and throng

Clean up webpack files

Use config vars instead of hard coding the build directory.

Project Name Change

React-boilerplate (the most popular react boilerplate on github) is struggling to implement ssr. Obviously, that's this project's bread and butter. Wondering if it makes sense to rename this project, react-boilerplate-ssr to increase discoverability.

Any other ideas? Objections? Comments?

Forwarding client's cookies to API when calling from on server

Sorry if this is a noob question. What happens when the API call needs user's session. I assume those session cookies won't be forwarded to the API endpoint when the rendering happens on server-side?

Any idea on how should I forward user's cookies to the API endpoint. I think it will be somewhere inside HttpClient.js?

Thanks

Uncaught Type Error - When you visit /posts directly

http://d.pr/i/1e0r2

Slow build time makes Heroku deployment to fail

Hi Jared,

I just tried to deploy an app I've been working on for the last month to Heroku.
After deploying I got the following errors:

2016-06-08T15:20:14.906386+00:00 app[web.1]: > npm run clean && npm run build && cross-env NODE_ENV=production node ./build/server
2016-06-08T15:20:14.906349+00:00 app[web.1]: 
2016-06-08T15:20:16.312074+00:00 app[web.1]: > rm -rf build
2016-06-08T15:20:16.312075+00:00 app[web.1]: 
2016-06-08T15:20:17.182897+00:00 app[web.1]: > [email protected] build /app
2016-06-08T15:20:17.182898+00:00 app[web.1]: > webpack -p --config ./webpack.config.prod.js && webpack -p --config ./webpack.server.config.prod.js
2016-06-08T15:20:17.182899+00:00 app[web.1]: 
2016-06-08T15:21:12.058454+00:00 heroku[web.1]: Stopping process with SIGKILL
2016-06-08T15:21:12.058454+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2016-06-08T15:21:13.159176+00:00 heroku[web.1]: Process exited with status 137
2016-06-08T15:21:13.174340+00:00 heroku[web.1]: State changed from starting to crashed

It looks like the build script takes more then 60 seconds which make Heroku think it failed.
I guess that I could run the build locally and commit the files and skip building altogether but I wonder if there's a better way?

Any suggestions?

Thanks!

Create a Dockerfile

shortest route (without static prefix-path) not working

The posts route here (https://github.com/jaredpalmer/react-production-starter/blob/master/src/routes/Post/index.js#L6) show posts/:slug, slug being dynamic

I was looking into having a short one, like "http://domain.stuff/my-post-slug", which would translate to path: ':slug' at the same spot. Thing is, no way to make it work that short

Using the same with regular routing (not ssr and no dynamic redux routes loading), it works without problem. But I just can't see how to solve this in those fields — sorry if the answer is obvious; but thx a lot if it exists !

(ps thx a lot for the patterns and arch exposed in this repo! best work found)

Using Less

Hi.

How can I use Less for building my stylesheets? Because I don't want to use Aphrodite. Please, help me, because I started to use this boilerplate for the real project.

"Domain"-based folder structure

Constructor - calling super and bind

Hi @jaredpalmer , started working on a project using your starter-project. Great work!

I have a question about dispatching redux actions on user interactions (e.g. button click). My questions is more about the right syntax. In the past I called the constructor and called the bind function like that:

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        importedAction,
    }, dispatch);
}
class Calendar extends React.Component {

constructor(props) {
   super(props);
   this.handleClick = this.handleClick.bind(this);
}

handleClick(programId) {
        this.props.importedAction()
        .then((response) => {
            do something with response
        });
    }
 }
....

render() {
 return (
   <a onClick={this.handleClick}>Click me to dispatch action</a>
)
}

I think you have a babel-plugin installed which allows you to avoid writing the "extends React.Component" all the time. I cant see 'bindActionCreators' as well.

Question, how would I write above in the way it could be used in your starter project?

Project Name

Was thinking maybe "Airrrrr" (Async Isomorphic React Redux React-Router Redial).

Add ImmutableJS

unexpected key "posts"

Everything works fine when i'm navigate from localhost:5000 but my console giving an error if I navigate directly (or refresh) localhost:5000/posts. however.. the app's still works fine even with an error on my console. is it okay to ignore that error?

Switch from Airbnb to Standard style

tired of all the semicolons

Update the Dockerfile

Pretty sure I broke it with v2. 😨

Using in nitrous.io

Repo appears to start fine with 'npm start,' however the terminal returns the following error:

ERROR in ./client/index.js
Module parse failed: /home/nitrous/code/react-server-boilerplate/node_modules/standard-loader/index.js!/home/nitrous/code/react-server-boilerplate/client/index
.js Unexpected token (37:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (37:6)

Unexpected key "currentPost"

Hi, I found your boilerplate yesterday and it seems very cool !
But I have a bug when I want to run your example.
When I go to http://0.0.0.0:5000/ all works fine.
But if I go to http://0.0.0.0:5000/post/hows-business-boomin and then refresh the page, I have some errors into my Chrome and Firefox inspector:

• Unexpected key "currentPost" found in initialState argument passed to createStore. Expected to find one of the known reducer keys instead: "posts". Unexpected keys will be ignored.
• Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
  (client) <noscript data-reacti
  (server) <div class="root_fpza

I think it's a bug relate to asynchronous reducers. Why do you want asynchronous reducers ?

Unable to load css

Hi,

Can you give the webpack configuration to use css-loaders?
I tried a lot of things from the internet, nothing worked.

Thanks

Usage of babel-register

Hi,

Thanks for the great repo!
I have a concern about the usage of babel-register on the server.
According to babel docs, it should not be used in production.

Note that this is not meant for production use. It's considered bad practice to deploy code that gets compiled this way. It is far better to compile ahead of time before deploying.

Is there a plan to tackle this issue?

proposal - change aphrodite

#60 - change on Jss (benefits)

it does not have all those problems that are of Aphrodite, i can make PR if it need

Question: HttpClient

Is there a particular reason as to why the HttpClient still resolve's if the error status is 404?

I have noticed that the starter project will just be stuck at Loading... if the slug is incorrect. Wouldn't it be better if all errors are rejected so the reducers can deal with it?

Drop jscs

Unexpected key found in previous state received by reducer

Hi,

First of all: thanks for this useful boilerplate, great to get me started!

While trying to wrap my head around everything that is going on, I noticed that upon loading one of the posts pages directly (f.ex. http://localhost:5000/post/you-smart-you-loyal), the console spits out the following warning:

Unexpected key "currentPost" found in previous state received by the reducer. Expected to find one of the known reducer keys instead: "posts". Unexpected keys will be ignored.

When I reach the page by clicking on the link on the homepage, this warning does not appear.

Is this by design? Does this boilerplate assume there is always a single point of entry?

Use react-hot-loader

Loving your starter-kit, has been a real inspiration for me! I would love to see the use of react-hot-loader. Currently the new (awesome!) version is in beta, almost done and it has got some really nice features. Is this something you would consider?

Update tests for refactor

NYC

Async reducer with server-side rendering

Hi @jaredpalmer thanks for starter :) it's awesome. I liked it much so I wanted to try to port it to my reasync lib nex to redial to see differences. I found it quite easy, you have done a lot of good work, but I have found one issue

When i server-side render page where async reducer is used (Post), i get following error
Unexpected key "currentPost" found in initialState argument passed to createStore. Expected to find one of the known reducer keys instead: "posts". Unexpected keys will be ignored.

With redial, it only show empty page, as it is not doing fetching when initial state is i page. I little bit tweaked your functions if should something be fetched and make it working in my fork with reasync. Take a look if you want https://github.com/svrcekmichal/react-production-starter

It's working because I'm fetching data on client, but it's not solving the issue. But if you find out how to work around that async reducer it would be awesome! :)

Add some babel plugin

What do you think about those plugins?
FormidableLabs/spectacle#154

Moar Docs!

• Philosophy
• Recipes
• Deployment
• Roadmap

Handle asset caching

kube?

I saw you starred kube recently. I would really love to hear your thoughts on it.

Hot Reload not working?

The first time I heard about hot reloading I was so euphoric, but since when ever I try to test it in an open source project, it doesn't seem to work. Can you verify that this doesn't work or do I use it wrong?

I followed the installation guide from the README.md. I called $ npm start. This should start watching the source files and hot reloading, right? I then changed this line from Home to Home2. I'd expect to see Home2 now in my browser after re-compiling, but I only get a warning in the console:

[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.
[HMR]  - ./src/components/Nav.js

Normalize state

“In a Redux app, state keys like currentPost are usually an anti-pattern.” - Dan Abramov

http://stackoverflow.com/questions/37738268/how-to-avoid-race-conditions-when-fetching-data-with-redux/37738420#37738420

Should implement normalizr + selectors

Add nested image support

Will require file-loader and perhaps asset-webpack-loader

Resolve Modules to get rid of ../.../ madness

Re-evaluate Babel Presets

• Explore create-react-app's setup.
• Consider babel-preset-optimize and babel-plugin-istanbul

Change webpack config

now - OccurenceOrderPlugin
should -OccurrenceOrderPlugin

(rr)

Use node 6.2.2

CSRF

Move DX scripts to their own npm module

Is it time to drop Aphrodite?

My problem is Aphrodite is a lack of composebility....base styles with overrides are impossible. I prefer jsxstyle for this, but it has not yet been updated for React 15.

Should we move to CSS Modules in the meantime? If so, What PostCSS plugins should we use?

Route loaded twice

Hello

I have actually an issue with my isomorphic react application. There is also code splitting with webpack.

I have been able to reproduce my issue with your project by modifying the render function of client.js

let render = () => {
  // We need to have a root route for HMR to work.
  const createRoutes = require('./routes/root').default;
  const routes = createRoutes(store);

  // Pull child routes using match. Adjust Router for vanilla webpack HMR,
  // in development using a new key every time there is an edit.

    // Render app with Redux and router context to container element.
    // We need to have a random in development because of `match`'s dependency on
    // `routes.` Normally, we would want just one file from which we require `routes` from.
    ReactDOM.render(
      <Provider store={store}>
          <Router routes={routes} history={browserHistory} key={Math.random()}/>
      </Provider>,
      container
    );
};

The problem can been seen by enable Network Throttle (Regular 3G).
Go to the page http://localhost:5000/post/hows-business-boomin and you can seen a blink of the page.
The page is displayed once thank to server rendering et then a second time and this is the problem.

It seems that the react-router client side a rendering the route again.

Have you been able to experience the same issue ? Can you explain me why plz ?

Why did wrapped the ReactDOM.render function into match({ routes, location }, () => {} by the way ?

Best regards

How to load images and other static assets?

Hello,

What is the best way to load images and other assets that will work for both client & server?
I could add url-loader and file-loader to webpack config but it will not work on the server.

Are there other options?

Thanks,
Ran.

Throng

Update to React 15.0.1

@jaredpalmer what are your thoughts about updating this to React 15.0.1?

Add Promise and Fetch Polyfills

What are you struggling with?