search

kriasoft / react-app

Create React App with server-side code support
https://t.me/reactapp
MIT License
613 stars 84 forks source link

assets.json file structure #27

Closed joshua1 closed 6 years ago

joshua1 commented 6 years ago

the steps in the readme and the demo app always referenced are two different stories entirely. i find the demo app to be something else (an overkill) a demo should at least show how to run a CRA generated app using react-app including just the app.browser.js, app.node.js and the config-overides.js . the app.node.js file example in the readme, makes reference to an asset.json file , no detail is provided about that file. the demo should at least show that

joshua1 commented 6 years ago

the below from a closed issue , has better info than the read me

Just to clarify, what's the difference between react-app and react-app-tools packages:

react-app - CLI tool and templates for scaffolding a new React project (install globally)
react-app-tools - a bunch of build/run configurations (Webpack, PostCSS, Browsersync, HMR etc.)
The react-app-tools is going to be updated more often. If there is a minor version difference such as react-app-tools v0.2.0 vs v0.2.1, it means that there are no any breaking changes or major improvements. All the major version changes are going to be documented, so you could get an idea by looking at the changelog what's actually changed, what benefits you get and whether you need to change any of your React components to comply with the changes.

It's sort of like JSX code that you can use for the most part as it is for the last 2 years, but the underlying React engine that runs your app has undergone lots of great improvements. You just pull the new React version and automatically gain all the benefits it brings to the table without refactoring your JSX code much. Same with react-app-tools, over time it will bring more cool stuff into your project, which hopefully won't force you to refactor any of the source code of your React app.

Pro tip: you can use npm-check-updates npm module for checking if all the dependencies in your project are up to date:

$ npm install -g npm-check-updates@latest
$ ncu           # shows which dependencies are outdated
$ ncu -a        # updates all the dependencies in package.json to the latest versions
$ npm install   # installs outdated/missing npm packages based on package.json
koistya commented 6 years ago

The ./assets.json is an auto-generated file (by Webpack), which looks something like this:

{
  "main": [
    "/static/js/main.38acea01.js"
  ],
  "home": [
    "/static/js/home.8f96c2d4.chunk.js"
  ],
  "news": [
    "/static/js/news.33c2f47a.chunk.js"
  ]
}

It's supposed to be used for referencing JavaScript bundles on the page. Take a look at this online demo: https://firebase.reactstarter.com - right-click > view source. You will see the list of JavaScript chunks. Now open https://firebase.reactstarter.com/news -> right-click > view source > you will see a different set of chunks. This way you can optimize the initial page load time.