parcel-react-ssr
Advanced tools
parcel-react-ssr - npm Package Compare versions
Comparing version 0.3.2 to 0.4.0
| { | ||
| "name": "parcel-react-ssr", | ||
| "version": "0.3.2", | ||
| "version": "0.4.0", | ||
| "description": "Example of SSR with React and ParcelJS", | ||
| "main": "index.js", | ||
| "keywords": ["parcel", "react", "ssr"], | ||
| "author": "Benoit Tremblay <benoit@reactivestack.com>", | ||
| "license": "MIT", | ||
| "repository": "reactivestack/parcel-react-ssr", | ||
| "scripts": { | ||
| "start": "parcel src/index.html", | ||
| "dev": "parcel app/index.html", | ||
| "build": "rimraf dist && npm run build-client && npm run build-server", | ||
| "build-client": "parcel build src/index.html -d dist/client --public-url /dist", | ||
| "build-server": "cross-env BABEL_ENV=node babel src -d dist/server --ignore __tests__", | ||
| "test": "jest" | ||
| "build-client": | ||
| "parcel build app/index.html -d dist/client --public-url /dist", | ||
| "build-server": | ||
| "parcel build server/index.js -d dist/server --public-url /dist --target=node6", | ||
| "start": "node dist/server" | ||
| }, | ||
| "keywords": [], | ||
| "author": "", | ||
| "license": "ISC", | ||
| "repository": "reactivestack/parcel-react-ssr", | ||
| "devDependencies": { | ||
| "babel-cli": "^6.26.0", | ||
| "babel-plugin-transform-require-ignore": "^0.1.1", | ||
| "babel-preset-env": "^1.6.1", | ||
| "babel-preset-react": "^6.24.1", | ||
| "cross-env": "^5.1.1", | ||
| "enzyme": "^3.2.0", | ||
| "enzyme-adapter-react-16": "^1.1.0", | ||
| "jest": "^21.2.1", | ||
| "parcel-bundler": "^1.2.0", | ||
| "rimraf": "^2.6.2" | ||
| }, | ||
| "dependencies": { | ||
| "apollo-cache-inmemory": "^1.1.4", | ||
| "apollo-client": "^2.0.4", | ||
| "apollo-link-http": "^1.3.1", | ||
| "cheerio": "^1.0.0-rc.2", | ||
| "express": "^4.16.2", | ||
| "graphql": "^0.11.7", | ||
| "graphql-tag": "^2.6.0", | ||
| "node-fetch": "^1.7.3", | ||
| "object-assign": "^4.1.1", | ||
| "promise": "^8.0.1", | ||
| "raf": "^3.4.0", | ||
| "react": "^16.2.0", | ||
| "react-apollo": "^2.0.4", | ||
| "react-dom": "^16.2.0", | ||
| "react-helmet": "^5.2.0", | ||
| "react-router-dom": "^4.2.2", | ||
| "whatwg-fetch": "^2.0.3" | ||
| "react-router-dom": "^4.2.2" | ||
| }, | ||
| "devDependencies": { | ||
| "node-sass": "^4.7.2", | ||
| "parcel-bundler": "^1.6.1", | ||
| "rimraf": "^2.6.2" | ||
| } | ||
| } |
@@ -1,25 +0,33 @@ | ||
| # Example of server-side rendering with React.js and ParcelJS | ||
| # parcel-react-ssr | ||
| Complete example of a React.js with server-side rendering and bundled with ParcelJS. It includes: | ||
| Simple example of how to do server-rendering. You will not believe how easy it is! | ||
| - React.js - UI library | ||
| - React Helmet - SEO library - Manage your `<head />` and page title | ||
| - React Router - URL Router | ||
| - Apollo Client - GraphQL client | ||
| - Communicate with GitHub GraphQL API as an example | ||
| Using: | ||
| ## Development | ||
| In development, you don't have server-side rendering. All you need to do is `npm start`. | ||
| * parcel-bundler | ||
| * react | ||
| * react-router-dom | ||
| * react-helmet (SEO) | ||
| ## Production | ||
| To run into production, you need to build first and then you can run the app using the express server. | ||
| ## How to run | ||
| - `npm run build` | ||
| - `node server` | ||
| * `npm run dev` - Run the development server with hot reload but no server-rendering | ||
| * `npm run build` - Build for production, required before running | ||
| * `npm start` - Start the production server | ||
| ## How is this working? | ||
| There is two build: one for the browser using Parcel.js and one for Node.js using BabelJS. | ||
| ## How does it work? | ||
| The parcel build is in dist/client and is a regular build just like you would do without server-side rendering. | ||
| To do proper server-rendering, the code is bundled in two version: one for the browser and one for Node.js. | ||
| The Node.js build is in dist/client and is only transformed through BabelJS. It uses a babel plugin to ignore the file extensions that should not be executed through the server. You can add your own! | ||
| The browser version is in the `dist/client` folder and the Node.js version is in `dist/server`. However, they both share the same public path for their files: `/dist` and it points to the browser version. Go read the code, it's pretty straightforward! | ||
| ## Read the code! | ||
| 1. [package.json](package.json) - Start by reading the `scripts` section to understand how the build process works. Yes it's that dead simple! | ||
| 1. [app/index.html](app/index.html) - Your only HTML file acting as a template | ||
| 1. [app/App.jsx](app/App.jsx) - Your main application component shared between your browser and Node.js version | ||
| 1. [app/HelloWorld.jsx](app/HelloWorld.jsx) - Dead simple hello world | ||
| 1. [app/HelloWorld.scss](app/HelloWorld.scss) - Example of SCSS | ||
| 1. [server/index.js](server/index.js) - Entry point for your Node.js version | ||
| 1. [server/middleware.js](server/middleware.js) - Middleware taking care of server-rendering | ||
| 1. [server/generateHtml.js](server/generateHtml.js) - Generate the HTML using `index.html` as the template with cheerio |
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
Network access
Supply chain riskThis module accesses the network.
Found 1 instance in 1 package
No contributors or author data
MaintenancePackage does not specify a list of contributors or an author in package.json.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-64.71%
6
- Dev dependency count
- decreased by-70%
3
- Number of low maintenance alerts
- decreased by-33.33%
2
- Number of lines in readme file
- increased by30.77%
34
Worsened metrics
- Total package byte prevSize
- decreased by-15.25%
170276
- Number of package files
- decreased by-42.86%
12
- Lines of code
- decreased by-68.29%
104
Dependency changes
- Removedapollo-cache-inmemory@^1.1.4
- Removedapollo-client@^2.0.4
- Removedapollo-link-http@^1.3.1
- Removedgraphql@^0.11.7
- Removedgraphql-tag@^2.6.0
- Removednode-fetch@^1.7.3
- Removedobject-assign@^4.1.1
- Removedpromise@^8.0.1
- Removedraf@^3.4.0
- Removedreact-apollo@^2.0.4
- Removedwhatwg-fetch@^2.0.3
- Removed@types/node@22.13.1(transitive)
- Removed@types/zen-observable@0.8.7(transitive)
- Removed@wry/context@0.4.4(transitive)
- Removed@wry/equality@0.1.11(transitive)
- Removedapollo-cache@1.3.5(transitive)
- Removedapollo-cache-inmemory@1.6.6(transitive)
- Removedapollo-client@2.6.10(transitive)
- Removedapollo-link@1.2.14(transitive)
- Removedapollo-link-http@1.5.17(transitive)
- Removedapollo-link-http-common@0.2.16(transitive)
- Removedapollo-utilities@1.3.4(transitive)
- Removedasap@2.0.6(transitive)
- Removedencoding@0.1.13(transitive)
- Removedfast-json-stable-stringify@2.1.0(transitive)
- Removedgraphql@0.11.7(transitive)
- Removedgraphql-tag@2.12.6(transitive)
- Removedhoist-non-react-statics@3.3.2(transitive)
- Removedis-stream@1.1.0(transitive)
- Removediterall@1.1.3(transitive)
- Removedlodash.isequal@4.5.0(transitive)
- Removednode-fetch@1.7.3(transitive)
- Removedoptimism@0.10.3(transitive)
- Removedperformance-now@2.1.0(transitive)
- Removedpromise@8.3.0(transitive)
- Removedraf@3.4.1(transitive)
- Removedreact-apollo@2.5.8(transitive)
- Removedsymbol-observable@1.2.0(transitive)
- Removedts-invariant@0.4.4(transitive)
- Removedtslib@1.14.12.8.1(transitive)
- Removedundici-types@6.20.0(transitive)
- Removedwhatwg-fetch@2.0.4(transitive)
- Removedzen-observable@0.8.15(transitive)
- Removedzen-observable-ts@0.8.21(transitive)