kriasoft / react-firebase-starter Goto Github PK

View Code? Open in Web Editor NEW

4.5K 91.0 753.0 4.98 MB

Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay

Home Page: https://firebase.reactstarter.com

License: MIT License

JavaScript 95.71% Dockerfile 0.37% Shell 1.77% EJS 2.16%

react boilerplate javascript reactjs hmr create-react-app relay relay-modern graphql spa

react-firebase-starter's People

Stargazers

Watchers

Forkers

b2whats m1lan kakmi shilu89757 vargentum nsipplswezey t-kelly kwangkim frenzzy sargodarya w01fgang thorstenziller creeperyang saintnikopol james4388 sly777 feelsong yamingd whitehorsecreative i8ramin noahsug kaploink rd-alex-alex2006hw kevinsproles woffleloffle daedrag jkilada lanceyb dhaneshkk nhatkhoa mhebert15 tomekl cobbweb jkupcho eihabshadeed tlandru sujathakvr lucasconstantino carlpagelslnu qianxueseng-com trevorlazarus colasking zhangmingkai4315 dimasavchenko langshaodi dsernst anastasiabuniak mliq samlinehan pmlarocque joanclaret edfialk whazap manuphatak awongcm traumverloren dzeroone dagou davixyz mistermendez jakejacobs jaydurant techctu mehmetkursunlu martijnvdgrift tobeplus softdev15 fdintino stashdjian robeasthope kannans debashish1711 milesibastos d3ming digideskio zwhitchcox roman-vabishchevych ye-ting emanziano manuelrojas seesawlabs sp90 michaelterry cedarlogic elwebdeveloper piamancini connor11528 gatero markhker xdamman lancer07 eonezhang lparry lepryko kenzik rahulchakraborty community-mongoose katcu nimo-mo chuckcwh

react-firebase-starter's Issues

ReferenceError: global not defined

I'm trying to use three.js and so I added a <script> tag referencing a CDN version of it in my Html.js. However, I'm having trouble using the THREE global in my index.js page, like so (paraphrased, so sorry if there's a typo):

export default class extends Component {
  constructor(props) {
    this.state({matrix: new THREE.Matrix3()});
  }

  render() {
    return (
      <div>
        <MyComponent matrix={this.state.matrix} />
      </div>
    );
  }
}

When the render task runs, it gives me a "ReferenceError: THREE is not defined" when running ReactDOM.renderToString for the index page. I'm guessing it's because this is happening before it pulls in the Html component further down in the task, during the ReactDOM.renderToStaticMarkup call.

Any ideas how I can solve this?

using react-font-awesome in webpack config

I'm trying to using this font-awesome css icons from this github repo.

https://github.com/andreypopp/react-fa

Despite its instructions to use, I'm not entirely sure it's applicable for this static boilerplate I'll be using since the boilerplate comes preconfigured with the css loaders already.

Thus I'm just curious to know how to configure webpack config to import font-awesome? I'm not familiar with webpack environment setup btw vs gulp/grunt.

State changes fail on Chrome / Safari with "TypeError: Failed to execute 'replaceChild' on 'Node': parameter 1 is not of type 'Node'."

I'm trying to use a component that has an interactive element to it. This means that given a certain callback (in my case a Firebase value callback) the state of the component is updated.

In Chrome and Safari I get the following error:

Exception was thrown by user callback. TypeError: Failed to execute 'replaceChild' on 'Node': parameter 1 is not of type 'Node'.
    at TypeError (native)
    at Object.Danger.dangerouslyReplaceNodeWithMarkup (eval at <anonymous> (http://localhost:3000/app.js?1451773043685:2808:3), <anonymous>:140:25)
    at Object.ReactDOMIDOperations.dangerouslyReplaceNodeWithMarkupByID (eval at <anonymous> (http://localhost:3000/app.js?1451773043685:1239:3), <anonymous>:71:27)
    at Object.wrapper [as replaceNodeWithMarkupByID] (eval at <anonymous> (http://localhost:3000/app.js?1451773043685:717:3), <anonymous>:66:21)
    at ReactCompositeComponentMixin._replaceNodeWithMarkupByID (eval at <anonymous> (http://localhost:3000/app.js?1451773043685:2862:3), <anonymous>:579:31)
    at ReactCompositeComponentMixin._updateRenderedComponent (eval at <anonymous> (http://localhost:3000/app.js?1451773043685:2862:3), <anonymous>:571:12)
    at ReactCompositeComponentMixin._performComponentUpdate (eval at <anonymous> (http://localhost:3000/app.js?1451773043685:2862:3), <anonymous>:544:10)
    at ReactCompositeComponentMixin.updateComponent (eval at <anonymous> (http://localhost:3000/app.js?1451773043685:2862:3), <anonymous>:473:12)
    at wrapper [as updateComponent] (eval at <anonymous> (http://localhost:3000/app.js?1451773043685:717:3), <anonymous>:66:21)
    at ReactCompositeComponentMixin.performUpdateIfNecessary (eval at <anonymous> (http://localhost:3000/app.js?1451773043685:2862:3), <anonymous>:421:12)

In Firefox everything works as expected. Am I doing something wrong here? It seems like the component is trying to update an HTML node that is no longer present in the DOM. I can see references to a similar error in the context of triggering onBlur on a node that gets removed, but I don't use onBlur or focussed elements in my code. Shouldn't React take care that an element is always valid? Or is that the dangerous part in dangerouslyReplaceNodeWithMarkup from the call stack?

I skip the Firebase callback for server side rendering, since it doesn't make sense to load real-time data from the database in the static site for this component. When I enable the callback, I get the following error during a npm run build release:

[23:47:48] Starting 'render'...
[23:47:50] Finished 'render' after 1371ms
[23:47:50] Finished 'build' after 16380ms
Warning: React can't find the root component node for data-reactid value `.27bre5ocr28.0.1`. If you're seeing this message, it probably means that you've loaded two copies of React on the page. At this time, only a single copy of React can be loaded at a time.
FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property 'firstChild' of undefined
    at Object.ReactMount.findComponentRoot (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactMount.js:715:39)
    at Object.ReactMount.findReactNodeByID (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactMount.js:679:23)
    at Object.getNode (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactMount.js:162:32)
    at Object.ReactDOMIDOperations.dangerouslyProcessChildrenUpdates (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactDOMIDOperations.js:83:42)
    at Object.wrapper [as processChildrenUpdates] (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactPerf.js:66:21)
    at processQueue (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactMultiChild.js:160:31)
    at ReactDOMComponent.ReactMultiChild.Mixin.updateChildren (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactMultiChild.js:334:13)
    at ReactDOMComponent.Mixin._updateDOMChildren (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactDOMComponent.js:871:12)
    at ReactDOMComponent.Mixin.updateComponent (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactDOMComponent.js:700:10)
    at ReactDOMComponent.Mixin.receiveComponent (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactDOMComponent.js:645:10)
/Users/kamielwanrooij/Projects/globulr/ui/node_modules/firebase/lib/firebase-node.js:43
ion(){N("Exception was thrown by user callback.",b.stack||"");throw b;},Math.f
                                                                    ^
TypeError: Cannot read property 'firstChild' of undefined
    at Object.ReactMount.findComponentRoot (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactMount.js:715:39)
    at Object.ReactMount.findReactNodeByID (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactMount.js:679:23)
    at Object.getNode (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactMount.js:162:32)
    at Object.ReactDOMIDOperations.dangerouslyProcessChildrenUpdates (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactDOMIDOperations.js:83:42)
    at Object.wrapper [as processChildrenUpdates] (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactPerf.js:66:21)
    at processQueue (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactMultiChild.js:160:31)
    at ReactDOMComponent.ReactMultiChild.Mixin.updateChildren (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactMultiChild.js:334:13)
    at ReactDOMComponent.Mixin._updateDOMChildren (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactDOMComponent.js:871:12)
    at ReactDOMComponent.Mixin.updateComponent (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactDOMComponent.js:700:10)
    at ReactDOMComponent.Mixin.receiveComponent (/Users/kamielwanrooij/Projects/globulr/ui/node_modules/react/lib/ReactDOMComponent.js:645:10)

Which might be related...?

Static pages not found when using trailing "/" in url?

I thought this was an issue with my site at first, but it appears the demo is broken in the same manner.

http://react-static.tarkus.me/about (works)

http://react-static.tarkus.me/about/ (does NOT work)

Was this intentional? Is there a work around?

FWIW, I am using s3 as a deploy endpoint and have my index doc name set to index.html

Pre-render critical CSS on build to deal with FOUC

https://en.wikipedia.org/wiki/Flash_of_unstyled_content

building becomes very slow when project gets large

is there any way to improve the building speed?

it takes me 12 seconds on average to build a single small change every time I try to save it.

and if I save twice, it'll build twice and take twice as long to build, so around 24 seconds.

Integrate FastClick

See how it's done in react-starter-kit

--- other tasks ---

Suggestion: Provide critical HTML snippet for the homepage

Much like the critical CSS idea, how about giving first-time visitors the absolutely fastest possible experience by designating a small chunk of HTML + CSS which is sent over the wire first. This reduces transport times, extra CSS loads, page rendering time (especially on long/complex homepages).

The react app then loads everything else, and loads the rest of the content in place. A hook would be needed for a CSS transition (fade in, or something like this).

heroku deploy instruction

It could be really helpful to have a heroku deploy button or simple instructions

markup being generated is different on the client or server warning

Running fresh project generated from version 0.2.9, then open http://localhost:3000/blog give warning:

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) =".23cjq30ov7k.1.0">Not Found<p dat
(server) =".23cjq30ov7k.1.0">Blog<p data-rea

The browser rendering http://localhost:3000/404 instead of the pages/blog/index.js.

Can not run deploy command

I clone this repository,and can run npm start, but when I run 'npm run deploy' occurs errors:

deploy
clean
pages
TypeError: Can't call method on  undefined
    at TypeError (native)
    at module.exports (/home/yanhua/work/demo/react-static-boilerplate/node_modules/babel-core/node_modules/core-js/modules/$.defined.js:3:63)
    at module.exports (/home/yanhua/work/demo/react-static-boilerplate/node_modules/babel-core/node_modules/core-js/modules/$.to-object.js:4:17)
    at Function.from (/home/yanhua/work/demo/react-static-boilerplate/node_modules/babel-core/node_modules/core-js/modules/es6.array.from.js:12:19)
    at _toConsumableArray (/home/yanhua/work/demo/react-static-boilerplate/tools/config.js:15:178)
    at Object.<anonymous> (/home/yanhua/work/demo/react-static-boilerplate/tools/config.js:89:8)
    at Module._compile (module.js:460:26)
    at normalLoader (/home/yanhua/work/demo/react-static-boilerplate/node_modules/babel-core/lib/api/register/node.js:199:5)
    at Object.require.extensions.(anonymous function) [as .js] (/home/yanhua/work/demo/react-static-boilerplate/node_modules/babel-core/lib/api/register/node.js:216:7)
    at Module.load (module.js:355:32)

I use Ubuntu and node0.12.4, Thanks.

--- other tasks ---

Support SCSS @mixin

SCSS @mixin classes are not supported in current build process. I've added support by using sass-loader.

Here is how I resolved the issue:

npm i -D sass-loader
In webpack.config.js, replace all instances of 'postcss-loader' with 'sass-loader'

If there is a better way to achieve this, please let me know.

Q: Purpose of <Link>?

What is the idea with the <Link> component in the context of a static page generating project? From reading the code I assume its purpose is to intercept clicks and use pushState to manage browsing history, but what is the point of doing that when the final rendered static pages do not use the same mechanism?

<Link> as it stands seem to work poorly with named anchors and mailto: links. Do we really need it?

how to add client dependencies

like let's say i wanted to add bootstrap or ratchet or google maps. How would I do that?

seems like my assets have to end up in the /build folder, but where to prep them up so they end up there?

Create a layout component with header, footer and navigation

Create a simple layout component (/components/Layout)
Create Header, Footer and Navigation components (e.g. /components/Navigation)

--- other tasks ---

Routes Loader Broken?

It appears the tools/lib/routes-loader.js is broken and does correctly generate the / route for any given sub-directory unless it's included in the navigation.js file. Everything but index.html in that same sub-directory is correctly generated and accessible.

To reproduce the issue, using a clean git master checkout, navigate to /blog and you'll get a 404 error. Then navigate to /blog/test-article-one and it works fine.

BTW - The browser reports what I believe is a hot-loader warning in the console when you navigate to /blog or any other / sub-directory not included in navigation.js. Deployed builds do not emit this warning, but still the /blog/index.html fails to load and the 404 page is returned.

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) =".13ltol7u1vk.1.0">Not Found</h1><p dat
 (server) =".13ltol7u1vk.1.0">Blog</h1></div></div
warning
_mountImageIntoNode
ReactMount__mountImageIntoNode
mountComponentIntoNode
perform
batchedMountComponentIntoNode
perform
batchedUpdates
batchedUpdates
_renderNewRootComponent
ReactMount__renderNewRootComponent
_renderSubtreeIntoContainer
render
React_render
callee$2$0$
tryCatch
invoke
(anonymous function)
invoke
callInvokeWithMethodAndArg
(anonymous function)
initializePromise
Promise
enqueue
(anonymous function)
async
callee$2$0
route$
tryCatch
invoke
(anonymous function)
invoke
invoke
promiseReactionJob

Disable server side rendering step

I'm having a bunch of trouble with npm start failing because I'm using d3.csv which depends on XHR, so the pre-render step throws this ReferenceError: XMLHttpRequest is not defined. I've tried a bunch of fixes but I'm no longer sure how much help the pre-rendering really offers, and ready to just give up on it.

What's the best way to disable the server side rendering step, and what are the implications?

Integrate react-routing or react-router library

--- other tasks ---

Q: how to load "main.css" from the static page?

What is the best practise to load the css bundle (with a hashed filename) in the statically generated pages?

The <Html> component currently does not load any CSS at all, is that expected? Should we be using html-webpack-plugin for this and generate a skeleton template?

How to display a list of blog entries?

Going through my list of must-haves. What will be the best way to show a list of pages in a given directory? i.e. Show a list of all blog entries on the /blog/index.html page.

My thinking is we could somehow include pages and some content in a state object. Thoughts?

--- other tasks ---

build/config error

When run npm run build, get error: TypeError: Can't call method on undefined.

After debug the code, I find the reason:

// tools/config.js#L93
const appConfig = merge({}, config, {
  entry: [
    ...(WATCH && ['webpack-hot-middleware/client']),
    './src/js/app.js',
  ],
  // ...
}

when WATCH if falsy(here undefined), ...(undefined) leads to the error.

So, make it like ...(WATCH ? ['webpack-hot-middleware/client'] : []) ?

react-router

I'm having issues with routing on this boilerplate. Is their any reason you chose not to go with React Router? @jxnblk seems to be pull it off here: https://github.com/jxnblk/react-static-site-boilerplate

--- other tasks ---

Add test coverage

lots of people struggle to get it working with transpilers

webpack error: '//' is an unknown word in _bootstrap.scss

I apologize if this is in the wrong place, but I'm not too familiar with webpack, and I can't tell if this is an issue with css-loader, postcss or something else.

After installing bootstrap-sass from NPM, I tried importing it in index.js and got this error:

ERROR in ./~/css-loader!./~/postcss-loader!./~/bootstrap-sass/assets/stylesheets/_bootstrap.scss
/home/itxchy/www/ccf-react/node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss:7:1: Unknown word

// Core variables and mixins
^
@import "bootstrap/variables";

ERROR in ./~/css-loader!./~/postcss-loader!./~/bootstrap-sass/assets/stylesheets/_bootstrap.scss
Module build failed: TypeError: Cannot read property 'toString' of undefined
    at new Input (/home/itxchy/www/ccf-react/node_modules/postcss/lib/input.js:31:23)
    at parse (/home/itxchy/www/ccf-react/node_modules/postcss/lib/parse.js:22:17)
    at new LazyResult (/home/itxchy/www/ccf-react/node_modules/postcss/lib/lazy-result.js:61:24)
    at Processor.process (/home/itxchy/www/ccf-react/node_modules/postcss/lib/processor.js:34:16)
    at processCss (/home/itxchy/www/ccf-react/node_modules/css-loader/lib/processCss.js:165:11)
    at Object.module.exports (/home/itxchy/www/ccf-react/node_modules/css-loader/lib/loader.js:22:2)
 @ ./~/bootstrap-sass/assets/stylesheets/_bootstrap.scss 4:14-110 13:2-17:4 14:20-116

Here's index.js for reference. I only added the bootstrap import, a bootstrappy button, and a smaller index.scss file to test this:

index.js

import React, { Component } from 'react';
import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss';
import './index.scss';

export default class extends Component {

  render() {
    return (
      <div>
        <h1>Home Page</h1>
        <button type="button" class="btn btn-danger">Dangerous Button!</button>
        <p>Coming soon.</p>
      </div>
    );
  }
}

The index.scss file with a // comment plus a style worked just fine.

index.scss

@import '../components/variables.scss';

// test

h1 {
  font-size: 2em;
}

Any idea what's causing this?

Integrate CSS Modules

Append a hash string to the app.js bundle

...so that in HTML file there would be a reference which looks similar to this:

<script src="/app-e3d8a12.js"></script>

--- other tasks ---

How does the routing work?

Could you explain a bit more how routing works in your application?

--- other tasks ---

Use Kinto as Distributed Database

Hey man,

Love the project! Already learning stuff I didn't know by browsing the source code.

Just an idea, but have you thought of adding kinto as the database? People using github pages for their sites could add a contact form or w/e, without having to create and maintain a server, which is my primary goal.

Just an idea.

Thanks for the great project!

Suggest a better name for this project

The generated build/app.js file is 2.7 MB

Have done some initial work on a project using this boilerplate and the app.js is up to 3.5 MB

That's too big, not gonna work. Am I missing something?

ReferenceError: document is not defined

Hi, first thanks for your boilerplate!
I just have one problem when I try import react-youtube (https://github.com/troybetz/react-youtube). Note sure if it comes from the module itself or just a problem of configuration in my app but here is the stacktrace:

Starting 'render'...
ReferenceError: document is not defined
    at load ([..]/webapp/node_modules/load-script/index.js:3:14)
    at exports.default ([..]/webapp/node_modules/youtube-player/dist/es5/loadYouTubeIframeAPI.js:43:33)
    at Object.<anonymous> ([..]/webapp/node_modules/youtube-player/dist/es5/index.js:41:58)
    at Module._compile (module.js:434:26)
    at Module._extensions..js (module.js:452:10)
    at Object.require.extensions.(anonymous function) [as .js] ([..]/webapp/node_modules/babel-core/lib/api/register/node.js:214:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> ([..]/webapp/node_modules/react-youtube/dist/YouTube.js:23:22)
    at Module._compile (module.js:434:26)
    at Module._extensions..js (module.js:452:10)
    at Object.require.extensions.(anonymous function) [as .js] ([..]/webapp/node_modules/babel-core/lib/api/register/node.js:214:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)

(I already tried to escape the serve side rendering with a canUseDom check but it changes nothing, the error occurs during the import..)

Thanks in advance for your help!
Thomas

window object not available on server rendering

Hi all ,
while I am using the UI Library : antd , I've got an error like this:

ReferenceError: window is not defined
    at Object.<anonymous> (/Applications/MAMP/htdocs/react/react-static-boilerplate/node_modules/antd/node_modules/velocity-animate/velocity.js:403:4)
    at Module._compile (module.js:425:26)
    at Module._extensions..js (module.js:432:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Applications/MAMP/htdocs/react/react-static-boilerplate/node_modules/babel-core/lib/api/register/node.js:214:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:313:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/Applications/MAMP/htdocs/react/react-static-boilerplate/node_modules/antd/node_modules/rc-queue-anim/lib/QueueAnim.js:23:24)
    at Module._compile (module.js:425:26)

I think it is because we rendered the elements on server and there is no window object without a window.
Am I right ? How could I fix it ?
Please help me .
Thanks

Create a basic website layout

Header, footer, navigation

--- other tasks ---

Integrate postCSS and cssnext

Should allow to have CSS per component
When React components is mounted, it injects the CSS used in that component, and removes it from DOM right before unmounting

It may looks something like this:

import styles from './MyComponent.css';

@withStyles(styles)
class MyComponent {
  render() { ... }
}

...similarly how it works in React Starter Kit.

Why package.json in each component folder?

Why does each component get its own package.json, like this?

'npm start' and 'npm run deploy' throwing error

Hey there!

I've downloaded the files and ran 'npm install', but when I run 'npm start' I get this error:

Child
             Asset   Size     Chunks                   Chunk Names
    app.node.js  32 kB              0   [emitted]  main
render
ReferenceError: npm is not defined
    at Object.<anonymous> (/Users/poulosm/Downloads/react-static-boilerplate-master/build/app.node.js:305:3)

I've also tried running 'npm run deploy' and get this error:

deploy
clean
pages
TypeError: Can't call method on  undefined
    at TypeError (<anonymous>)
    at module.exports (/Users/poulosm/Downloads/react-static-boilerplate-master/node_modules/babel-core/node_modules/core-js/modules/$.defined.js:3:28)

--- other tasks ---

Html prop "debug" is defined but never used

The Html component takes debug as a prop, but it's never used. Is this intentional?

Build with distinct environment variables?

Is there a way to build with environment specific variables?

e.g. I have a setting API_URL in config.js, and I want that value to change between local development, stage builds, and production builds without exposing the stage API_URL to the production build.

Trying something like process.env doesn't seem to be working. It only compiles into an empty object {}.

How to debug?

How do I debug in Chrome DevTools? After npm start the code shown in Chrome DevTools is not readable.

It would be great if you can share a little bit about working with DevTool in react-static-boilerplate because I am falling in love with this.

Dynamic Pages?

Has anyone extended this boilerplate to generate pages from a json file, vs from files in the /pages directory?

What I'd like to do is have a /data/pages.json (which would get pulled in dynamically on build from a db, but let's walk before we run ;). Each page is composed of sections, which would be React components. Something like...

[
  {
    "name": "01",
    "sections": [
      {
        "template": "one-col",
        "headline": "page 1 section 1 headline",
        "cta": "page 1 section 1 cta"
      },
      {
        "template": "two-col",
        "headline": "page 1 section 2 headline",
        "cta": "page 1 section 2 cta"
      }
    ]
  },
  {
    "name": "02",
    "sections": [
      {
        "template": "two-col",
        "headline": "page 2 section 1 headline",
        "cta": "page 2 section 1 cta"
      },
      {
        "template": "one-col",
        "headline": "page 2 section 2 headline",
        "cta": "page 2 section 2 cta"
      }
    ]
  }
]

Looking at getPages in render.js, could extend the files object with any pages in /data/pages.json before iterating through, but maybe there's a better approach?

Any ideas?

Cachebusting chunks

The main bundle gets cachebusted here, but it doesn't look like there's anything to cachebust the 0.app.js, 1.app.js, etc chunks.

https://webpack.github.io/docs/long-term-caching.html covers strategies for this.

`static propTypes` causing Unexpected Token errors out of the box

After running npm install and npm start, there's multiple Unexpected token errors that look like this:

    Module build failed: SyntaxError: /Users/cassidoo/GitHub/hub/pages/500.js: Unexpected token (11:19)
       9 | export default class extends Component {
      10 |
    > 11 |   static propTypes = {

Routing doesn't work for github project pages

Html.js and routes-loader.js is set to load files based on root '/'. A github project page is of the format username.github.io/project and root here is username.github.io. The page content and styling doesnt load as the app.js request is going to username.github.io/app.js.

I changed the Html.js script src from "/app.js" to "app.js" and the application loads now, but all pages goes to 404 as the route doesn't match. Whereas it should be username.github.io/project/about, the route is set to username.github.io/about.

This works fine in localhost as about is based on root path (localhost:3000/about). Any idea how to make it work in both localhost as well as the project page? Thanks.

You may remove NoErrorsPlugin with React Hot Loader 1.3.0

React Hot Loader 1.3.0 fixes a problem that caused NoErrorsPlugin to be necessary. In fact now errors thrown on module level shouldn't prevent future hot reloading of the same file after you fix the problem.

Please update to RHL 1.3.0, and remove NoErrorsPlugin from Webpack configuration.
Thanks!

how can I do wildcard routing

The routes-loader works well until I'm trying to do wildcard routing like this:
/item/:itemID/:itemCategory

any suggestion how to achieve the SEO friendly wildcard routing?

can not run - unexpected token

Downloaded and set up as instructed. Does not run on my system, giving me this error:

@ start /Users/elliot/reactwork
babel-node --eval "require('./tools/start')().catch(err => console.log(err.stack))"

[12:16:11] Starting 'build'...
[12:16:11] Starting 'clean'...
[12:16:11] Finished 'clean' after 18ms
[12:16:11] Starting 'copy'...
[12:16:11] Finished 'copy' after 8ms
[12:16:11] Starting 'bundle'...
Child
Time: 2975ms

ERROR in ./pages/500.js
Module build failed: SyntaxError: /Users/elliot/reactwork/pages/500.js: Unexpected token (11:19)
   9 | export default class extends Component {
  10 | 
> 11 |   static propTypes = {
     |                    ^
  12 |     error: PropTypes.instanceOf(Error),
  13 |   };
  14 | 
    at Parser.pp.raise (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
    at Parser.pp.parseClassProperty (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:624:61)
    at Parser.parseClassProperty (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:797:20)
    at Parser.pp.parseClass (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:567:32)
    at Parser.pp.parseExprAtom (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:405:19)
    at Parser.parseExprAtom (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:412:22)
    at Parser.pp.parseExprSubscripts (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:236:19)
    at Parser.pp.parseMaybeUnary (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:217:19)
    at Parser.pp.parseExprOps (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:163:19)
 @ ./app.js 41:11-36

ERROR in ./components/Link/Link.js
Module build failed: SyntaxError: /Users/elliot/reactwork/components/Link/Link.js: Unexpected token (21:19)
  19 | class Link extends Component {
  20 | 
> 21 |   static propTypes = {
     |                    ^
  22 |     to: PropTypes.string.isRequired,
  23 |     children: PropTypes.element.isRequired,
  24 |     state: PropTypes.object,
    at Parser.pp.raise (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
    at Parser.pp.parseClassProperty (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:624:61)
    at Parser.parseClassProperty (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:797:20)
    at Parser.pp.parseClass (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:567:32)
    at Parser.pp.parseStatement (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:84:19)
    at Parser.parseStatement (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:621:22)
    at Parser.pp.parseTopLevel (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:30:21)
    at Parser.parse (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/index.js:70:17)
    at Object.parse (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/index.js:45:50)
 @ ./components/Navigation/Navigation.js 21:12-30

Child
Time: 2319ms
Asset Size Chunks Chunk Names
app.node.js 33.2 kB 0 [emitted] main

ERROR in ./pages/500.js
Module build failed: SyntaxError: /Users/elliot/reactwork/pages/500.js: Unexpected token (11:19)
   9 | export default class extends Component {
  10 | 
> 11 |   static propTypes = {
     |                    ^
  12 |     error: PropTypes.instanceOf(Error),
  13 |   };
  14 | 
    at Parser.pp.raise (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
    at Parser.pp.parseClassProperty (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:624:61)
    at Parser.parseClassProperty (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:797:20)
    at Parser.pp.parseClass (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:567:32)
    at Parser.pp.parseExprAtom (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:405:19)
    at Parser.parseExprAtom (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:412:22)
    at Parser.pp.parseExprSubscripts (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:236:19)
    at Parser.pp.parseMaybeUnary (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:217:19)
    at Parser.pp.parseExprOps (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:163:19)
 @ ./app.js 39:11-36

ERROR in ./components/Link/Link.js
Module build failed: SyntaxError: /Users/elliot/reactwork/components/Link/Link.js: Unexpected token (21:19)
  19 | class Link extends Component {
  20 | 
> 21 |   static propTypes = {
     |                    ^
  22 |     to: PropTypes.string.isRequired,
  23 |     children: PropTypes.element.isRequired,
  24 |     state: PropTypes.object,
    at Parser.pp.raise (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
    at Parser.pp.parseClassProperty (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:624:61)
    at Parser.parseClassProperty (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:797:20)
    at Parser.pp.parseClass (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:567:32)
    at Parser.pp.parseStatement (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:84:19)
    at Parser.parseStatement (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:621:22)
    at Parser.pp.parseTopLevel (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:30:21)
    at Parser.parse (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/parser/index.js:70:17)
    at Object.parse (/Users/elliot/reactwork/node_modules/babel-core/node_modules/babylon/lib/index.js:45:50)
 @ ./components/Navigation/Navigation.js 21:12-30

[12:16:14] Finished 'bundle' after 2997ms
[12:16:14] Starting 'render'...
Error: Cannot find module "../Link"
at webpackMissingModule (/Users/elliot/reactwork/build/app.node.js:297:79)
at Object.module.exports.Object.defineProperty.value (/Users/elliot/reactwork/build/app.node.js:297:163)
at webpack_require (/Users/elliot/reactwork/build/app.node.js:21:30)
at Object.module.exports.Object.defineProperty.value (/Users/elliot/reactwork/build/app.node.js:251:21)
at webpack_require (/Users/elliot/reactwork/build/app.node.js:21:30)
at Object. (/Users/elliot/reactwork/build/app.node.js:78:27)
at webpack_require (/Users/elliot/reactwork/build/app.node.js:21:30)
at module.exports.Object.defineProperty.value (/Users/elliot/reactwork/build/app.node.js:41:18)
at Object. (/Users/elliot/reactwork/build/app.node.js:42:11)
at Module._compile (module.js:460:26)

CSS not included if JS disabled

View the site without javascript and there are no styles.

Integrate React Hot Loader

https://gaearon.github.io/react-hot-loader/

babel compatible

Currently when I run npm run clean after npm install, got Error:

/Users/xx/soft/nvm/versions/node/v0.12.6/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/logger.js:41
    throw new Constructor(this._buildMessage(msg));
          ^
ReferenceError: [BABEL] [eval]: Unknown option: /Users/xx/work/projects/react-static-boilerplate/.babelrc.stage
...

It seems that it's an error with babel incompatible. The babel-node used the global installed [email protected], and when I check local node_modules/.bin/ , no babel-node.

Maybe it's required to tell user that globally installed [email protected] will crash tool script. And any plan to support [email protected]?

404 redirect not working

Hi,

I'm trying to test 404 error redirect page, but seems browser sync server is not redircting 404 errors.

for example:
http://localhost:3000/xxx

it returns Cannot GET /xxx in the browser instead of redirecting to /404 page.

anyone know how to redirect?

thanks

kriasoft / react-firebase-starter Goto Github PK

react-firebase-starter's People

Stargazers

Watchers

Forkers

react-firebase-starter's Issues

Recommend Projects

Recommend Topics

Recommend Org