Showing preview only (1,299K chars total). Download the full file or copy to clipboard to get everything.
Repository: jaredpalmer/razzle
Branch: master
Commit: 54724b7bb810
Files: 1039
Total size: 1.1 MB
Directory structure:
gitextract__2juu5zg/
├── .all-contributorsrc
├── .changeset/
│ └── config.json
├── .eslintignore
├── .eslintrc
├── .github/
│ ├── CODE_OF_CONDUCT.md
│ ├── CONTRIBUTING.md
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── Bug_report.md
│ │ ├── Documentation.md
│ │ ├── Feature_request.md
│ │ └── Question.md
│ ├── labels.yml
│ ├── stale.yml
│ └── workflows/
│ ├── examples.yml
│ ├── examples_node14.yml
│ ├── label.yml
│ ├── nodejs.yml
│ ├── release.yml
│ └── test-examples.yml
├── .gitignore
├── .prettierrc
├── LICENSE
├── examples/
│ ├── .gitignore
│ ├── basic/
│ │ ├── README.md
│ │ ├── gitignore
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── basic-server/
│ │ ├── README.md
│ │ ├── gitignore
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── index.js
│ │ └── server.js
│ ├── basic-serverless/
│ │ ├── README.md
│ │ ├── gitignore
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── basic-spa/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ ├── index.html
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ └── client.js
│ ├── with-afterjs/
│ │ └── README.md
│ ├── with-custom-babel-config/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── Home.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-custom-devserver-options/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-custom-environment-variables/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-custom-target-babel-config/
│ │ ├── .babelrc.node
│ │ ├── .babelrc.web
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── Home.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-custom-webpack-config/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-devcert-https/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-development-build/
│ │ ├── README.md
│ │ ├── gitignore
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-elm/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── elm-package.json
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.elm
│ │ ├── Main.elm
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-esbuild-loader/
│ │ ├── .eslintrc.js
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ ├── src/
│ │ │ ├── App.css
│ │ │ ├── App.test.tsx
│ │ │ ├── App.tsx
│ │ │ ├── Home.css
│ │ │ ├── Home.tsx
│ │ │ ├── client.tsx
│ │ │ ├── index.ts
│ │ │ └── server.tsx
│ │ ├── tsconfig.json
│ │ └── typings/
│ │ └── index.d.ts
│ ├── with-eslint/
│ │ ├── .eslintrc.json
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-experimental-refresh/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── components/
│ │ │ ├── ClickCount.js
│ │ │ └── ClickCount.module.css
│ │ ├── global.css
│ │ ├── index.js
│ │ └── server.js
│ ├── with-fastify/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── src/
│ │ │ ├── App.css
│ │ │ ├── App.test.tsx
│ │ │ ├── App.tsx
│ │ │ ├── Home.css
│ │ │ ├── Home.tsx
│ │ │ ├── client.tsx
│ │ │ ├── index.ts
│ │ │ ├── server.tsx
│ │ │ └── setupTests.ts
│ │ ├── tsconfig.json
│ │ └── typings/
│ │ └── svg.d.ts
│ ├── with-firebase-functions/
│ │ ├── .firebaserc
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── firebase.json
│ │ ├── index.js
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-heroku/
│ │ ├── .gitignore
│ │ ├── Procfile
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-hyperapp/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ ├── main.js
│ │ ├── main.test.js
│ │ └── server.js
│ ├── with-inferno/
│ │ ├── .babelrc
│ │ ├── .eslintrc
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-jest-snapshots/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.js
│ │ ├── Home.js
│ │ ├── __tests__/
│ │ │ ├── App.test.js
│ │ │ ├── Home.test.js
│ │ │ └── __snapshots__/
│ │ │ ├── App.test.js.snap
│ │ │ └── Home.test.js.snap
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-jsconfig-paths/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── here-is-extra/
│ │ │ └── extra.js
│ │ ├── jsconfig.json
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-jsxstyle/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── About.js
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── Home.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-koa/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── Home.css
│ │ ├── Home.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-less/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── App.less
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ ├── other.less
│ │ └── server.js
│ ├── with-loadable-components/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── Body.js
│ │ ├── BodyPart.js
│ │ ├── Footer.js
│ │ ├── Header.js
│ │ ├── client.js
│ │ ├── index.js
│ │ ├── server.js
│ │ └── static_export.js
│ ├── with-material-ui/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ ├── server.js
│ │ └── theme.js
│ ├── with-mdx/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── example.md
│ │ ├── index.js
│ │ └── server.js
│ ├── with-module-federation/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── basic-1/
│ │ │ ├── package.json
│ │ │ ├── public/
│ │ │ │ ├── index.html
│ │ │ │ └── robots.txt
│ │ │ ├── razzle.config.js
│ │ │ └── src/
│ │ │ ├── App.js
│ │ │ ├── Button.js
│ │ │ ├── bootstrap.js
│ │ │ └── client.js
│ │ ├── basic-2/
│ │ │ ├── package.json
│ │ │ ├── public/
│ │ │ │ ├── index.html
│ │ │ │ └── robots.txt
│ │ │ ├── razzle.config.js
│ │ │ └── src/
│ │ │ ├── App.js
│ │ │ ├── Button.js
│ │ │ ├── bootstrap.js
│ │ │ └── client.js
│ │ └── package.json
│ ├── with-monorepo/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── basic-1/
│ │ │ ├── package.json
│ │ │ ├── public/
│ │ │ │ └── robots.txt
│ │ │ └── src/
│ │ │ ├── App.css
│ │ │ ├── App.js
│ │ │ ├── App.test.js
│ │ │ ├── client.js
│ │ │ ├── index.js
│ │ │ └── server.js
│ │ ├── basic-2/
│ │ │ ├── package.json
│ │ │ ├── public/
│ │ │ │ └── robots.txt
│ │ │ └── src/
│ │ │ ├── App.css
│ │ │ ├── App.js
│ │ │ ├── App.test.js
│ │ │ ├── client.js
│ │ │ ├── index.js
│ │ │ └── server.js
│ │ └── package.json
│ ├── with-monorepo-without-workspaces/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── basic-1/
│ │ │ ├── public/
│ │ │ │ └── robots.txt
│ │ │ └── src/
│ │ │ ├── App.css
│ │ │ ├── App.js
│ │ │ ├── App.test.js
│ │ │ ├── client.js
│ │ │ ├── index.js
│ │ │ └── server.js
│ │ ├── basic-2/
│ │ │ ├── public/
│ │ │ │ └── robots.txt
│ │ │ └── src/
│ │ │ ├── App.css
│ │ │ ├── App.js
│ │ │ ├── App.test.js
│ │ │ ├── client.js
│ │ │ ├── index.js
│ │ │ └── server.js
│ │ └── package.json
│ ├── with-now/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-now-v2/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── now.json
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-polka/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-preact/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-promise-config/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-react-native-web/
│ │ ├── .babelrc
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-react-router/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── About.js
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── Home.js
│ │ ├── client.js
│ │ ├── index.js
│ │ ├── server.js
│ │ └── static_export.js
│ ├── with-react-server-components/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── notes/
│ │ │ ├── .gitkeep
│ │ │ ├── 1.md
│ │ │ ├── 2.md
│ │ │ ├── 3.md
│ │ │ └── 4.md
│ │ ├── package.json
│ │ ├── plugin/
│ │ │ ├── ReactFlightWebpackLoader.js
│ │ │ ├── ReactFlightWebpackLoader.ts
│ │ │ ├── ReactFlightWebpackNodeLoader.js
│ │ │ ├── ReactFlightWebpackNodeLoader.ts
│ │ │ ├── ReactFlightWebpackNodeRegister.js
│ │ │ ├── ReactFlightWebpackNodeRegister.ts
│ │ │ ├── ReactFlightWebpackPlugin.js
│ │ │ ├── ReactFlightWebpackPlugin.ts
│ │ │ └── __tests__/
│ │ │ ├── ReactFlightWebpackPlugin.spec.ts
│ │ │ └── fixture/
│ │ │ ├── Form.client.js
│ │ │ ├── FormServer.server.js
│ │ │ ├── entry.js
│ │ │ └── package.json
│ │ ├── public/
│ │ │ ├── index.html
│ │ │ ├── robots.txt
│ │ │ └── style.css
│ │ ├── razzle.config.js
│ │ ├── sandbox.config.json
│ │ ├── scripts/
│ │ │ └── seed.js
│ │ └── src/
│ │ ├── App.server.tsx
│ │ ├── Cache.client.tsx
│ │ ├── EditButton.client.tsx
│ │ ├── LocationContext.client.tsx
│ │ ├── Note.server.tsx
│ │ ├── NoteEditor.client.tsx
│ │ ├── NoteList.server.tsx
│ │ ├── NoteListSkeleton.tsx
│ │ ├── NotePreview.tsx
│ │ ├── NoteSkeleton.tsx
│ │ ├── Root.client.tsx
│ │ ├── SearchField.client.tsx
│ │ ├── SidebarNote.client.tsx
│ │ ├── SidebarNote.tsx
│ │ ├── Spinner.tsx
│ │ ├── TextWithMarkdown.tsx
│ │ ├── cli.server.js
│ │ ├── db.server.ts
│ │ ├── index.client.tsx
│ │ └── index.server.ts
│ ├── with-reason-react/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── bsconfig.json
│ │ ├── jsconfig.json
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.re
│ │ ├── CommentList.css
│ │ ├── CommentList.re
│ │ ├── CommentsPage.css
│ │ ├── CommentsPage.re
│ │ ├── NotFound.css
│ │ ├── NotFound.re
│ │ ├── StoryData.re
│ │ ├── StoryListItem.css
│ │ ├── StoryListItem.re
│ │ ├── TopStoriesPage.re
│ │ ├── Utils.re
│ │ ├── client.js
│ │ ├── index.js
│ │ ├── index.re
│ │ ├── link.re
│ │ ├── registerServiceWorker.js
│ │ └── server.js
│ ├── with-redux/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── client/
│ │ │ └── index.js
│ │ ├── common/
│ │ │ ├── actions/
│ │ │ │ └── index.js
│ │ │ ├── api/
│ │ │ │ └── counter.js
│ │ │ ├── components/
│ │ │ │ └── Counter.js
│ │ │ ├── containers/
│ │ │ │ └── App.js
│ │ │ ├── reducers/
│ │ │ │ ├── counter.js
│ │ │ │ └── index.js
│ │ │ └── store/
│ │ │ └── configureStore.js
│ │ ├── index.js
│ │ └── server/
│ │ └── index.js
│ ├── with-scss/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── App.scss
│ │ ├── App.test.js
│ │ ├── app.module.scss
│ │ ├── client.js
│ │ ├── index.js
│ │ ├── other.scss
│ │ └── server.js
│ ├── with-scss-options/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── App.scss
│ │ ├── App.test.js
│ │ ├── app.module.scss
│ │ ├── client.js
│ │ ├── index.js
│ │ ├── other.scss
│ │ ├── prepend.scss
│ │ └── server.js
│ ├── with-single-exposed-port/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-styled-components/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-svelte/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-tailwindcss/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-typeorm-graphql/
│ │ ├── .babelrc
│ │ ├── .eslintrc.js
│ │ ├── .gitignore
│ │ ├── .prettierrc
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ ├── src/
│ │ │ ├── App.css
│ │ │ ├── App.test.tsx
│ │ │ ├── App.tsx
│ │ │ ├── Home.css
│ │ │ ├── Home.tsx
│ │ │ ├── client.tsx
│ │ │ ├── database/
│ │ │ │ └── init_db.ts
│ │ │ ├── declarations.d.ts
│ │ │ ├── index.ts
│ │ │ ├── models/
│ │ │ │ ├── Abilities.ts
│ │ │ │ ├── Pokemon.ts
│ │ │ │ ├── PokemonAbilities.ts
│ │ │ │ ├── Types.ts
│ │ │ │ └── index.ts
│ │ │ ├── schema/
│ │ │ │ ├── Resolvers.ts
│ │ │ │ └── index.ts
│ │ │ ├── server.tsx
│ │ │ └── setupTests.ts
│ │ └── tsconfig.json
│ ├── with-typescript/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── src/
│ │ │ ├── App.css
│ │ │ ├── App.test.tsx
│ │ │ ├── App.tsx
│ │ │ ├── Home.css
│ │ │ ├── Home.tsx
│ │ │ ├── client.tsx
│ │ │ ├── declarations.d.ts
│ │ │ ├── index.ts
│ │ │ ├── server.tsx
│ │ │ └── setupTests.ts
│ │ └── tsconfig.json
│ ├── with-typescript-plugin/
│ │ ├── .eslintrc.js
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ ├── src/
│ │ │ ├── App.css
│ │ │ ├── App.test.tsx
│ │ │ ├── App.tsx
│ │ │ ├── Home.css
│ │ │ ├── Home.tsx
│ │ │ ├── client.tsx
│ │ │ ├── index.ts
│ │ │ └── server.tsx
│ │ ├── tsconfig.json
│ │ └── typings/
│ │ └── index.d.ts
│ ├── with-vendor-bundle/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-vue/
│ │ ├── .eslintrc
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── App.vue
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-vue-router/
│ │ ├── .eslintrc
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── About.vue
│ │ ├── App.js
│ │ ├── App.vue
│ │ ├── Home.vue
│ │ ├── PageNotFound.vue
│ │ ├── client.js
│ │ ├── index.js
│ │ ├── router.js
│ │ └── server.js
│ ├── with-webpack-dev-server-v4/
│ │ ├── README.md
│ │ ├── gitignore
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ └── with-webpack-public-path/
│ ├── README.md
│ ├── package.json
│ ├── public/
│ │ └── robots.txt
│ ├── sandbox.config.json
│ └── src/
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── client.js
│ ├── index.js
│ ├── init.client.js
│ ├── init.server.js
│ ├── real.client.js
│ ├── real.server.js
│ └── server.js
├── lerna.json
├── package.json
├── package.meta.json
├── packages/
│ ├── babel-preset-razzle/
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── babel-plugins/
│ │ │ ├── commonjs.js
│ │ │ ├── jsx-pragma.js
│ │ │ ├── no-anonymous-default-export.js
│ │ │ └── optimize-hook-destructuring.js
│ │ ├── index.js
│ │ └── package.json
│ ├── create-razzle-app/
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── bin/
│ │ │ └── create-razzle-app
│ │ ├── index.js
│ │ ├── lib/
│ │ │ ├── index.js
│ │ │ ├── messages.js
│ │ │ ├── officialExamples.js
│ │ │ └── utils/
│ │ │ ├── copy-dir.js
│ │ │ ├── get-install-cmd.js
│ │ │ ├── install.js
│ │ │ ├── load-example.js
│ │ │ ├── load-git-example.js
│ │ │ ├── load-github-example.js
│ │ │ ├── load-npm-example.js
│ │ │ └── output.js
│ │ ├── package.json
│ │ └── templates/
│ │ └── default/
│ │ ├── README.md
│ │ ├── gitignore
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── Home.css
│ │ ├── Home.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── razzle/
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── babel.js
│ │ ├── bin/
│ │ │ └── razzle.js
│ │ ├── config/
│ │ │ ├── babel-loader/
│ │ │ │ └── razzle-babel-loader.js
│ │ │ ├── createConfigAsync.js
│ │ │ ├── createJestConfig.js
│ │ │ ├── createRazzleTestConfig.js
│ │ │ ├── defaultOptions.js
│ │ │ ├── env.js
│ │ │ ├── jest/
│ │ │ │ ├── babelTransform.js
│ │ │ │ ├── cssTransform.js
│ │ │ │ └── fileTransform.js
│ │ │ ├── loadPlugins.js
│ │ │ ├── loadRazzleConfig.js
│ │ │ ├── modules.js
│ │ │ ├── paths.js
│ │ │ └── razzleDevServer.js
│ │ ├── package.json
│ │ └── scripts/
│ │ ├── build.js
│ │ ├── export.js
│ │ ├── start.js
│ │ └── test.js
│ ├── razzle-dev-utils/
│ │ ├── CHANGELOG.md
│ │ ├── FileSizeReporter.js
│ │ ├── FriendlyErrorsPlugin.js
│ │ ├── README.md
│ │ ├── WebpackConfigHelpers.js
│ │ ├── devServerMajor.js
│ │ ├── formatWebpackMessages.js
│ │ ├── logger.js
│ │ ├── makeLoaderFinder.js
│ │ ├── package.json
│ │ ├── prettyNodeErrors.js
│ │ ├── printErrors.js
│ │ ├── printWarnings.js
│ │ ├── resolveRequest.js
│ │ ├── setPorts.js
│ │ ├── webpackHotDevClient.js
│ │ ├── webpackHotDevClientV4.js
│ │ └── webpackMajor.js
│ ├── razzle-plugin-bundle-analyzer/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ ├── package.json
│ │ └── tests/
│ │ └── index.test.js
│ ├── razzle-plugin-css/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── razzle-plugin-devcert/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── razzle-plugin-elm/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── razzle-plugin-eslint/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── razzle-plugin-graphql/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── helpers.js
│ │ ├── index.js
│ │ ├── package.json
│ │ └── tests/
│ │ └── index.test.js
│ ├── razzle-plugin-inferno/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── razzle-plugin-less/
│ │ ├── .eslintrc
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── helpers.js
│ │ ├── index.js
│ │ ├── package.json
│ │ └── tests/
│ │ └── index.test.js
│ ├── razzle-plugin-manifest/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── razzle-plugin-mdx/
│ │ ├── .eslintrc
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── helpers.js
│ │ ├── index.js
│ │ ├── package.json
│ │ └── tests/
│ │ └── index.test.js
│ ├── razzle-plugin-php/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── razzle-plugin-preact/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── razzle-plugin-react/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── razzle-plugin-scss/
│ │ ├── .eslintrc
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── helpers.js
│ │ ├── index.js
│ │ ├── package.json
│ │ └── tests/
│ │ └── index.test.js
│ ├── razzle-plugin-svelte/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── helpers.js
│ │ ├── index.js
│ │ ├── package.json
│ │ └── tests/
│ │ └── index.test.js
│ ├── razzle-plugin-typescript/
│ │ ├── .eslintrc
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── helpers.js
│ │ ├── index.js
│ │ ├── package.json
│ │ └── tests/
│ │ └── index.test.js
│ ├── razzle-plugin-vue/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ └── razzle-start-server-webpack-plugin/
│ ├── .babelrc
│ ├── .nvmrc
│ ├── CHANGELOG.md
│ ├── LICENSE
│ ├── README.md
│ ├── dist/
│ │ ├── StartServerPlugin.js
│ │ ├── monitor-loader.js
│ │ └── monitor.js
│ ├── package.json
│ ├── src/
│ │ ├── StartServerPlugin.js
│ │ ├── monitor-loader.js
│ │ └── monitor.js
│ └── tests/
│ ├── SilentPlugin.js
│ ├── cases/
│ │ ├── test-project/
│ │ │ ├── index.js
│ │ │ └── webpack.config.js
│ │ └── test-project-hmr/
│ │ ├── index.js
│ │ └── webpack.config.js
│ ├── index.test.js
│ ├── js/
│ │ ├── test-project/
│ │ │ └── server.js
│ │ └── test-project-hmr/
│ │ └── server.js
│ ├── test-project.sh
│ └── utils.js
├── scripts/
│ ├── bootstrap-examples.js
│ ├── build-docs.js
│ ├── exampleDependencyVersions.json
│ ├── internalPeerDependencyVersions.json
│ ├── new-example.js
│ ├── publish-all.js
│ ├── publish-to-npm.js
│ ├── release-notes.js
│ ├── try-example.js
│ ├── update-examples.js
│ └── yalc-publish-all.js
├── test/
│ ├── e2e/
│ │ ├── create-razzle-app.test.js
│ │ ├── razzle-build.test.js
│ │ ├── razzle-start-spa.test.js
│ │ └── razzle-start.test.js
│ ├── examples/
│ │ └── isomorphic-examples.test.js
│ ├── fixtures/
│ │ ├── build-default/
│ │ │ ├── package.json
│ │ │ ├── public/
│ │ │ │ └── nothing.txt
│ │ │ └── src/
│ │ │ ├── client.css
│ │ │ ├── client.js
│ │ │ └── index.js
│ │ ├── build-default-spa/
│ │ │ ├── package.json
│ │ │ ├── public/
│ │ │ │ ├── index.html
│ │ │ │ └── nothing.txt
│ │ │ ├── razzle.config.js
│ │ │ └── src/
│ │ │ ├── client.css
│ │ │ └── client.js
│ │ ├── build-with-babelrc/
│ │ │ ├── .babelrc
│ │ │ ├── package.json
│ │ │ ├── public/
│ │ │ │ └── nothing.txt
│ │ │ └── src/
│ │ │ ├── client.css
│ │ │ ├── client.js
│ │ │ └── index.js
│ │ ├── build-with-custom-config/
│ │ │ ├── package.json
│ │ │ ├── public/
│ │ │ │ └── nothing.txt
│ │ │ ├── razzle.config.js
│ │ │ └── src/
│ │ │ ├── client.css
│ │ │ ├── client.js
│ │ │ └── index.js
│ │ ├── build-with-custom-config-invalid/
│ │ │ ├── package.json
│ │ │ ├── public/
│ │ │ │ └── nothing.txt
│ │ │ ├── razzle.config.js
│ │ │ └── src/
│ │ │ ├── client.css
│ │ │ ├── client.js
│ │ │ └── index.js
│ │ └── util.js
│ ├── jest.e2e.config.json
│ ├── jest.examples.config.js
│ └── utils/
│ └── psKill.js
└── website/
├── .babelrc
├── .github/
│ └── CODEOWNERS
├── .gitignore
├── .nextra/
│ ├── arrow-right.js
│ ├── babel-plugin-nextjs-mdx-patch.js
│ ├── config.js
│ ├── directories.js
│ ├── docsearch.js
│ ├── github-icon.js
│ ├── layout.js
│ ├── nextra-loader.js
│ ├── nextra.js
│ ├── search.js
│ ├── ssg.js
│ ├── styles.css
│ └── theme.js
├── components/
│ ├── features.js
│ ├── logo.js
│ └── video.js
├── jsconfig.json
├── next.config.js
├── nextra.config.js
├── package.json
├── pages/
│ ├── _app.js
│ ├── _document.js
│ ├── change-log.mdx
│ ├── deployment-options/
│ │ ├── aws.md
│ │ ├── azure.md
│ │ ├── layer0.md
│ │ ├── meta.json
│ │ ├── plesk.md
│ │ └── vercel.md
│ ├── docs/
│ │ ├── customization.md
│ │ ├── environment-variables.md
│ │ ├── experimental-features.md
│ │ ├── how-it-works.md
│ │ ├── meta.json
│ │ ├── single-page-applications.md
│ │ ├── static-export.md
│ │ └── upgrade-guide.md
│ ├── getting-started.mdx
│ ├── index.mdx
│ ├── meta.json
│ └── plugins/
│ └── meta.json
├── postcss.config.js
├── public/
│ └── favicon/
│ └── site.webmanifest
└── tailwind.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .all-contributorsrc
================================================
{
"projectName": "razzle",
"projectOwner": "jaredpalmer",
"files": [
"README.md"
],
"imageSize": 100,
"commit": true,
"contributors": [
{
"login": "jaredpalmer",
"name": "Jared Palmer",
"avatar_url": "https://avatars2.githubusercontent.com/u/4060187?v=4",
"profile": "http://jaredpalmer.com",
"contributions": [
"question",
"code",
"design",
"doc",
"example",
"ideas",
"review",
"test",
"tool"
]
},
{
"login": "Nimaa77",
"name": "Nima Arefi",
"avatar_url": "https://avatars1.githubusercontent.com/u/49443619?v=4",
"profile": "https://github.com/Nimaa77",
"contributions": [
"question",
"code",
"doc",
"example",
"ideas",
"review",
"test",
"tool"
]
},
{
"login": "fivethreeo",
"name": "Øyvind Saltvik",
"avatar_url": "https://avatars2.githubusercontent.com/u/410?v=4",
"profile": "https://github.com/fivethreeo/",
"contributions": [
"question",
"code",
"example",
"ideas",
"review",
"test",
"tool"
]
},
{
"login": "jariz",
"name": "Jari Zwarts",
"avatar_url": "https://avatars3.githubusercontent.com/u/1415847?v=4",
"profile": "https://jari.io",
"contributions": [
"question",
"code",
"ideas",
"plugin",
"review"
]
},
{
"login": "gaearon",
"name": "Dan Abramov",
"avatar_url": "https://avatars0.githubusercontent.com/u/810438?v=4",
"profile": "http://twitter.com/dan_abramov",
"contributions": [
"code",
"ideas"
]
},
{
"login": "ericclemmons",
"name": "Eric Clemmons",
"avatar_url": "https://avatars0.githubusercontent.com/u/15182?v=4",
"profile": "http://ericclemmons.github.com/",
"contributions": [
"code",
"ideas"
]
},
{
"login": "HofmannZ",
"name": "Zino Hofmann",
"avatar_url": "https://avatars3.githubusercontent.com/u/17142193?v=4",
"profile": "https://www.linkedin.com/in/zinohofmann/",
"contributions": [
"example"
]
},
{
"login": "lucasterra",
"name": "Lucas Terra",
"avatar_url": "https://avatars2.githubusercontent.com/u/441058?v=4",
"profile": "https://www.linkedin.com/in/lucasterra7/",
"contributions": [
"code",
"example",
"plugin"
]
},
{
"login": "rayandrews",
"name": "Ray Andrew",
"avatar_url": "https://avatars1.githubusercontent.com/u/4437323?v=4",
"profile": "https://www.linkedin.com/in/ray-andrew/",
"contributions": [
"code",
"example",
"plugin"
]
},
{
"login": "heithemmoumni",
"name": "Heithem Moumni",
"avatar_url": "https://avatars0.githubusercontent.com/u/18581851?v=4",
"profile": "https://www.linkedin.com/in/heithemmoumni/",
"contributions": [
"code",
"example",
"plugin"
]
},
{
"login": "silviubogan",
"name": "Silviu Bogan",
"avatar_url": "https://avatars.githubusercontent.com/u/198924?v=4",
"profile": "https://silviubogan.ro/",
"contributions": [
"code",
"example"
]
}
],
"repoType": "github",
"commitConvention": "none"
}
================================================
FILE: .changeset/config.json
================================================
{
"commit": false,
"updateInternalDependencies": "minor",
"linked": [],
"fixed": [["babel-preset-razzle","create-razzle-app","razzle", "razzle-*"]],
"access": "public",
"baseBranch": "master",
"ignore": [],
"changelog": ["@changesets/changelog-github", { "repo": "jaredpalmer/razzle" }]
}
================================================
FILE: .eslintignore
================================================
node_modules/
build
my-app*
test/fixtures
test/tests
packages/create-razzle-app/templates
examples
================================================
FILE: .eslintrc
================================================
{
"extends": "eslint:recommended",
"env": {
"browser": true,
"commonjs": true,
"node": true,
"es6": false
},
"parserOptions": {
"ecmaVersion": 6
},
"rules": {
"no-console": "off",
"strict": ["error", "global"],
"curly": "warn"
}
}
================================================
FILE: .github/CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
<!-- INSERT doctoc generated TOC please keep comment here to allow auto update -->
<!-- START doctoc generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn build-docs TO UPDATE -->
- [Contributor Covenant Code of Conduct](#contributor-covenant-code-of-conduct)
- [Our Pledge](#our-pledge)
- [Our Standards](#our-standards)
- [Our Responsibilities](#our-responsibilities)
- [Scope](#scope)
- [Enforcement](#enforcement)
- [Attribution](#attribution)
<!-- END doctoc generated instructions please keep comment here to allow auto update -->
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, gender identity and expression, level of experience,
nationality, personal appearance, race, religion, or sexual identity and
orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at [info@palmer.net](mailto:info@palmer.net). All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
================================================
FILE: .github/CONTRIBUTING.md
================================================
# Contributing to Razzle
Hi there! Thanks for your interest in Razzle. This guide will help you get started contributing.
<!-- INSERT doctoc generated TOC please keep comment here to allow auto update -->
<!-- START doctoc generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn build-docs TO UPDATE -->
- [Contributing to Razzle](#contributing-to-razzle)
- [Developing locally](#developing-locally)
- [optionally install add-dependencies](#optionally-install-add-dependencies)
- [Commands](#commands)
- [Workflow for working on razzle core with examples](#workflow-for-working-on-razzle-core-with-examples)
- [or](#or)
- [git checkout -b my-feature-branch master](#git-checkout--b-my-feature-branch-master)
- [git checkout -b my-feature-branch three](#git-checkout--b-my-feature-branch-three)
- [/home/oyvind/Documents/GitHub/razzle/](#homeoyvinddocumentsgithubrazzle)
- [to make sure tests pass](#to-make-sure-tests-pass)
- [to add a new example](#to-add-a-new-example)
- [to work on a example](#to-work-on-a-example)
- [if it is a example with webpack5 you need to do](#if-it-is-a-example-with-webpack5-you-need-to-do)
- [switch back to webpack4 later to work with webpack4](#switch-back-to-webpack4-later-to-work-with-webpack4)
- [then](#then)
- [if you want to add dependencies to the example](#if-you-want-to-add-dependencies-to-the-example)
- [if you make changes to startserver plugin](#if-you-make-changes-to-startserver-plugin)
- [to run example tests with unreleased razzle packages with specific webpack and specific tests](#to-run-example-tests-with-unreleased-razzle-packages-with-specific-webpack-and-specific-tests)
- [Commands being run during testing puts output and puppeteer screenshots in test-artifacts/](#commands-being-run-during-testing-puts-output-and-puppeteer-screenshots-in-test-artifacts)
- [Trouble with puppeteer?](#trouble-with-puppeteer)
- [Updating your fork](#updating-your-fork)
- [Adding examples](#adding-examples)
- [Use examples/basic as template](#use-examplesbasic-as-template)
- [Naming examples](#naming-examples)
- [How to get your example merged](#how-to-get-your-example-merged)
- [Guidelines](#guidelines)
- [Why wasn't my PR merged?](#why-wasnt-my-pr-merged)
- [Getting recognition](#getting-recognition)
- [Getting help](#getting-help)
<!-- END doctoc generated instructions please keep comment here to allow auto update -->
Razzle is monorepo made up of a several npm packages powered by Lerna.
- `examples`: All examples go in here.
- `packages`: This is where the magic happens
- `babel-preset-razzle`: Razzle's default Babel preset.
- `create-razzle-app`: Razzle's CLI tool responsible for initialization of new projects
- `razzle`: The core library
- `razzle-dev-utils`: Utilities and helpers
- `scripts`: Utility scripts related to cleaning and bootstrapping the repo
- `test`: End-to-end tests
## Developing locally
First, fork the repo to your GitHub account. Then clone your fork to your local
machine and make a new branch for your feature/bug/patch etc. It's a good idea to not develop directly on master so you can get updates.
```
git clone https://github.com/<YOUR_GITHUB_USERNAME>/razzle.git
cd razzle
git checkout -B <my-branch>
NODE_ENV=development yarn install ---ignore-engines
# optionally install add-dependencies
sudo npm install add-dependencies -g
```
This will install all `node_modules` in all the packages and symlink
inter-dependencies. Thus when you make local changes in any of the packages you can try them
immediately in all the examples. `add-dependencies` can be used to just add packages to `package.json`.
### Commands
- `yarn clean`: Clean up all `node_modules` and remove all symlinks from packages and examples.
- `yarn test --runInBand`: Runs all tests
- `yarn test:packages`: Runs tests for packages
- `yarn test:e2e`: Runs end-to-end tests
- `yarn build-docs`: Builds docs/ updates doc TOC
- `yarn publish-all-canary`: Does a `razzle@canary` release.
- `yarn publish-all-stable`: Does a a stable release(uses the npm version released of the packages)
- `yarn new-example`: Creates a new example from another example. `yarn new-example basic new-example`.
- `yarn bootstrap-examples`: Run `yarn` with specific examples as workspaces. Automatically symlinks inter-dependent modules. Run `yarn restrap` in the example to reinstall.
- `yarn test:examples:simple`: Runs tests for all simple examples (uses the npm version released of the packages)
- `yarn test:examples:complex`: Runs tests for all complex examples (uses the npm version released of the packages)
- `yarn test:examples`: Runs tests for all examples (uses the npm version released of the packages)
### Workflow for working on razzle core with examples
```bash
git clone https://github.com/<YOUR_GITHUB_USERNAME>/razzle.git
cd razzle
git checkout -b my-feature-branch canary
# or
# git checkout -b my-feature-branch master
# git checkout -b my-feature-branch three
sudo npm install add-dependencies yalc -g
pwd
# /home/oyvind/Documents/GitHub/razzle/
NODE_ENV=development yarn install ---ignore-engines
# to make sure tests pass
yarn test --runInBand
# to add a new example
yarn new-example existingexample with-somefeature
# to work on a example
cd examples/basic
example="$(basename $PWD)"
pushd ../..
# if it is a example with webpack5 you need to do
yarn add -W webpack@5.24.0 html-webpack-plugin@5.2.0
# switch back to webpack4 later to work with webpack4
yarn add -W webpack@4.46.0 html-webpack-plugin@4.5.2
# then
yarn bootstrap-examples $example
popd
yarn build
# if you want to add dependencies to the example
add-dependencies somedependency
yarn restrap
# if you make changes to startserver plugin
pushd ../..
cd packages/razzle-start-server-webpack-plugin
yarn build
popd
# to run example tests with unreleased razzle packages with specific webpack and specific tests
WEBPACK_DEPS="webpack@5.24.0 html-webpack-plugin@5.2.0" PACKAGE_MANAGER="yalc" NPM_TAG="development" yarn test:examples --runInBand -t with-tailwindcss
WEBPACK_DEPS="webpack@4.46.0 html-webpack-plugin@4.5.2" PACKAGE_MANAGER="yalc" NPM_TAG="development" yarn test:examples --runInBand -t with-tailwindcss
# Commands being run during testing puts output and puppeteer screenshots in test-artifacts/
# Trouble with puppeteer?
sudo sysctl -w kernel.unprivileged_userns_clone=1
```
### Updating your fork
When you want to pull down changes to your fork enter the following into your terminal:
```bash
git checkout master
git pull origin master
```
## Adding examples
### Use examples/basic as template
If you'd like to add an example, I suggest you duplicate the `examples/basic` folder `yarn new-example basic your-example`and use that as kind of base template. Before you start adding stuff, go ahead and change the name of the package in the your new example's `package.json`. Then go back to the project root and run `yarn bootstrap-examples your-example`. This will make sure that your new example is using your local version of all the `packages`.
### Naming examples
All example folders should be named `with-<thing-you-are-demonstrating>`. Each example's npm package name (found in it's `package.json`) should look like `razzle-examples-with-<thing-you-are-demonstrating>`.
### How to get your example merged
- Make sure to comment the important parts of your code and include a **well-written**
"Idea behind the example" section. This is more important to me than your actual code.
- Keep your example limited to one idea / library / feature (e.g. don't submit `with-styled-components-and-material-ui`). That being said, there are times when this rule will be relaxed such as if you are showing how to use Apollo and Redux or \<Flux Library\> + React Router.
- Your example **MUST** implement Hot Module Replacement. If it does not update when you make edits, you have broken something.
- Your example should be minimalistic and concise, or a direct copy of another prominent example from the original library (like copying an example directly from react-redux).
### Guidelines
[Commit message guidelines](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-guidelines)
## Why wasn't my PR merged?
I will do my best to write out my reasoning before closing a PR, but 80% of the time it falls under one of these...
- You did not read this document
- Your code breaks an internal application (I will be transparent about this)
- Your code conflicts with some future plans (I will be transparent about this too)
- You've said something inappropriate or have broken the Code of Conduct
## Getting recognition
We use the project README to recognize the contributions of members of the project community.
To add a contributor: `all-contributors add github_username doc,code`
[Valid contributing keys](https://allcontributors.org/docs/en/emoji-key)
## Getting help
Tweet / DM [@jaredpalmer](https://twitter.com/jaredpalmer)
Tweet / DM [@nima_arf](https://twitter.com/nima_arf)
Tweet / DM [@fivethreeo](https://twitter.com/fivethreeo)
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
open_collective: razzle
================================================
FILE: .github/ISSUE_TEMPLATE/Bug_report.md
================================================
---
name: "\U0001F41B Bug report"
about: Create a report to help make Razzle better
---
## 🐛 Bug report
### Current Behavior
<!-- If applicable, add screenshots to help explain your problem. -->
### Expected behavior
<!-- A clear and concise description of what you expected to happen. -->
### Reproducible example
<!-- Create A github repo and Send a link here -->
### Suggested solution(s)
<!-- How could we solve this bug? What changes would need to made to Razzle? -->
### Additional context
<!-- Add any other context about the problem here. -->
### Your environment
<!-- PLEASE FILL THIS OUT -->
| Software | Version(s) |
| ---------------- | ---------- |
| Razzle |
| Razzle Plugins |
| Node |
| Browser |
| npm/Yarn |
| Operating System |
| TypeScript |
| React |
================================================
FILE: .github/ISSUE_TEMPLATE/Documentation.md
================================================
---
name: "\U0001F41B Documentation"
about: Imrovements or suggestions of Razzle documentation
---
## 📖 Documentation
================================================
FILE: .github/ISSUE_TEMPLATE/Feature_request.md
================================================
---
name: "\U0001F680Feature request"
about: Suggest an idea for Razzle
---
## 🚀 Feature request
### Current Behavior
<!-- A clear and concise description of what is the current behavior / use. -->
### Desired Behavior
<!-- A clear and concise description of what you want to happen. -->
### Suggested Solution
<!-- Suggest a solution that the community/maintainers/you may take to enable the desired behavior -->
<!-- NOTE: Feature Requests without suggested solutions may not be addressed or treated with the same level of urgency as those that have suggested solutions. -->
### Who does this impact? Who is this for?
<!-- Who is this for? All users? TypeScript users? Beginners? Advanced? Yourself? People using X, Y, X, etc.? -->
### Describe alternatives you've considered
<!-- A clear and concise description of any alternative solutions or features you've considered. -->
### Additional context
<!-- Add any other context or links about the feature request here. -->
================================================
FILE: .github/ISSUE_TEMPLATE/Question.md
================================================
---
name: "❓Question"
about: 'Ask a Question!'
---
## ❓Question
================================================
FILE: .github/labels.yml
================================================
examples:
- examples/*
- examples/**/*
razzle:
- packages/razzle/*
- packages/razzle/**/*
webpack:
- packages/razzle/*
- packages/razzle/**/*
plugins:
- packages/razzle-plugin-*/*
- packages/razzle-plugin-*/**/*
repo:
- ./*
================================================
FILE: .github/stale.yml
================================================
# Number of days of inactivity before an issue becomes stale
daysUntilStale: 60
# Number of days of inactivity before a stale issue is closed
daysUntilClose: 14
# Issues with these labels will never be considered stale
exemptLabels:
- pinned
- security
# Label to use when marking an issue as stale
staleLabel: stale
# Comment to post when marking an issue as stale. Set to `false` to disable
markComment: false
# Comment to post when closing a stale issue. Set to `false` to disable
closeComment: Hi everyone, in an effort to clean up the issue list, this issue was closed due to inactivity. If this is still related / important to you please tag me: @ elliottjro. Thanks for understanding!
================================================
FILE: .github/workflows/examples.yml
================================================
name: Test examples on trigger
on:
workflow_dispatch:
inputs:
npm_tag:
description: 'The npm tag for create razzle app'
default: 'development'
jest_filter:
description: 'The filter for jest tests'
default: 'simple'
package_manager:
description: 'The package manager to use, yalc with yarn default'
default: 'yalc'
jobs:
build:
runs-on: ${{ matrix.os }}
strategy:
fail-fast: false
matrix:
node-version: [10.x, 12.x, 13.x, 14.x]
os: [ubuntu-latest, windows-latest, macOS-latest]
webpack: ["webpack@4.46.0 html-webpack-plugin@4.5.2" , "webpack@5.24.0 html-webpack-plugin@5.2.0"]
name: Test on node ${{ matrix.node-version }} and ${{ matrix.os }} with ${{ matrix.webpack }}
steps:
- name: Get current date
id: date
run: echo "::set-output name=date::$(date +'%Y-%m-%dT%H:%M:%S')"
- name: Log date
run: echo "${{ steps.date.outputs.date }}"
- name: Set default run status
run: echo "::set-output name=last_run_status::default" > last_run_status
- name: Restore last run status
id: last_run
uses: actions/cache@v2
with:
path: |
last_run_status
key: ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ steps.date.outputs.date }}
restore-keys: |
${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-
- name: Set last run status
id: last_run_status
run: cat last_run_status
- name: Checkout ref
uses: actions/checkout@v2
with:
ref: ${{ github.event.workflow_dispatch.ref }}
- name: Use Node.js ${{ matrix.node-version }}
if: steps.last_run_status.outputs.last_run_status != 'success'
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: Install yalc globally
if: steps.last_run_status.outputs.last_run_status != 'success'
run: npm install -g yalc
- name: Install elm globally
if: steps.last_run_status.outputs.last_run_status != 'success'
run: yarn global add elm
- name: Restore lerna
if: steps.last_run_status.outputs.last_run_status != 'success'
id: cache
uses: actions/cache@v2
with:
path: |
node_modules
*/*/node_modules
key: ${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ hashFiles('**/yarn.lock') }}
- name: Install and bootstrap packages
if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'
run: yarn install --frozen-lockfile --ignore-engines --network-timeout 1000000
- name: Install ${{ matrix.webpack }}
if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'
run: yarn add -WD ${{ matrix.webpack }} --ignore-engines --network-timeout 1000000
- name: Run tests
id: test_run
if: steps.last_run_status.outputs.last_run_status != 'success'
run: yarn test:examples -t ${{ github.event.inputs.jest_filter }} --runInBand
env:
WEBPACK_DEPS: "${{ matrix.webpack }}"
NPM_TAG: "${{ github.event.inputs.npm_tag }}"
PACKAGE_MANAGER: "${{ github.event.inputs.package_manager }}"
WARNINGS_ERRORS_DISABLE: true
- name: Upload test artifacts
uses: actions/upload-artifact@v2
if: ${{ always() && steps.last_run_status.outputs.last_run_status != 'success' }}
with:
name: ${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ github.event.inputs.npm_tag }}-${{ github.event.inputs.jest_filter }}-${{ github.event.inputs.package_manager }}
path: test-artifacts/
- name: Save run status
if: steps.last_run_status.outputs.last_run_status != 'success'
run: echo "::set-output name=last_run_status::${{ steps.test_run.outcome }}" > last_run_status
================================================
FILE: .github/workflows/examples_node14.yml
================================================
name: Test examples on trigger using node 14.x
on:
workflow_dispatch:
inputs:
npm_tag:
description: 'The npm tag for create razzle app'
default: 'development'
jest_filter:
description: 'The filter for jest tests'
default: 'simple'
package_manager:
description: 'The package manager to use, yalc with yarn default'
default: 'yalc'
jobs:
build:
runs-on: ${{ matrix.os }}
strategy:
fail-fast: false
matrix:
node-version: [14.x]
os: [ubuntu-latest, windows-latest, macOS-latest]
webpack: ["webpack@4.46.0 html-webpack-plugin@4.5.2" , "webpack@5.24.0 html-webpack-plugin@5.2.0"]
name: Test on node ${{ matrix.node-version }} and ${{ matrix.os }} with ${{ matrix.webpack }}
steps:
- name: Get current date
id: date
run: echo "::set-output name=date::$(date +'%Y-%m-%dT%H:%M:%S')"
- name: Log date
run: echo "${{ steps.date.outputs.date }}"
- name: Set default run status
run: echo "::set-output name=last_run_status::default" > last_run_status
- name: Restore last run status
id: last_run
uses: actions/cache@v2
with:
path: |
last_run_status
key: ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ steps.date.outputs.date }}
restore-keys: |
${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-
- name: Set last run status
id: last_run_status
run: cat last_run_status
- name: Checkout ref
uses: actions/checkout@v2
with:
ref: ${{ github.event.workflow_dispatch.ref }}
- name: Use Node.js ${{ matrix.node-version }}
if: steps.last_run_status.outputs.last_run_status != 'success'
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: Install yalc globally
if: steps.last_run_status.outputs.last_run_status != 'success'
run: npm install -g yalc
- name: Install elm globally
if: steps.last_run_status.outputs.last_run_status != 'success'
run: yarn global add elm
- name: Restore lerna
if: steps.last_run_status.outputs.last_run_status != 'success'
id: cache
uses: actions/cache@v2
with:
path: |
node_modules
*/*/node_modules
key: ${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ hashFiles('**/yarn.lock') }}
- name: Install and bootstrap packages
if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'
run: yarn install --frozen-lockfile --ignore-engines --network-timeout 1000000
- name: Install ${{ matrix.webpack }}
if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'
run: yarn add -WD ${{ matrix.webpack }} --ignore-engines --network-timeout 1000000
- name: Run tests
id: test_run
if: steps.last_run_status.outputs.last_run_status != 'success'
run: yarn test:examples -t ${{ github.event.inputs.jest_filter }} --runInBand
env:
WEBPACK_DEPS: "${{ matrix.webpack }}"
NPM_TAG: "${{ github.event.inputs.npm_tag }}"
PACKAGE_MANAGER: "${{ github.event.inputs.package_manager }}"
WARNINGS_ERRORS_DISABLE: true
- name: Upload test artifacts
uses: actions/upload-artifact@v2
if: ${{ always() && steps.last_run_status.outputs.last_run_status != 'success' }}
with:
name: ${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ github.event.inputs.npm_tag }}-${{ github.event.inputs.jest_filter }}-${{ github.event.inputs.package_manager }}
path: test-artifacts/
- name: Save run status
if: steps.last_run_status.outputs.last_run_status != 'success'
run: echo "::set-output name=last_run_status::${{ steps.test_run.outcome }}" > last_run_status
================================================
FILE: .github/workflows/label.yml
================================================
# Automatically label PRs every hour based on your .github/labels.yaml:
#
# This workflow will triage pull requests and apply a label based on the
# paths that are modified in the pull request.
#
# To use this workflow, you will need to set up a .github/labeler.yml
# file with configuration. For more information, see:
# https://github.com/actions/labeler/blob/master/README.md
name: "Label PRs from globs"
on:
schedule:
- cron: "0 1 * * *"
jobs:
execute:
runs-on: ubuntu-latest
steps:
- name: Label PRs
uses: jpmcb/prow-github-actions@v1.0.0
with:
jobs: 'pr-labeler'
github-token: "${{ secrets.GITHUB_TOKEN }}"
================================================
FILE: .github/workflows/nodejs.yml
================================================
name: Run tests on push
on: [push]
jobs:
build:
runs-on: ${{ matrix.os }}
strategy:
fail-fast: false
matrix:
node-version: [10.x, 12.x, 13.x, 14.x]
os: [ubuntu-latest, windows-latest, macOS-latest]
webpack: ["webpack@4.46.0 html-webpack-plugin@4.5.2" , "webpack@5.24.0 html-webpack-plugin@5.2.0"]
name: Test on node ${{ matrix.node-version }} and ${{ matrix.os }} with ${{ matrix.webpack }}
steps:
- name: Get current date
id: date
run: echo "::set-output name=date::$(date +'%Y-%m-%dT%H:%M:%S')"
- name: Log date
run: echo "${{ steps.date.outputs.date }}"
- name: Set default run status
run: echo "::set-output name=last_run_status::default" > last_run_status
- name: Restore last run status
id: last_run
uses: actions/cache@v2
with:
path: |
last_run_status
key: ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ steps.date.outputs.date }}
restore-keys: |
${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-
- name: Set last run status
id: last_run_status
run: cat last_run_status
- name: Log last run status
run: echo "${{ steps.last_run_status.outputs.last_run_status }}"
- uses: actions/checkout@v1
if: steps.last_run_status.outputs.last_run_status != 'success'
- name: Use Node.js ${{ matrix.node-version }}
if: steps.last_run_status.outputs.last_run_status != 'success'
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: Install elm globally
if: steps.last_run_status.outputs.last_run_status != 'success'
run: yarn global add elm
- name: Restore lerna
id: cache
if: steps.last_run_status.outputs.last_run_status != 'success'
uses: actions/cache@v2
with:
path: |
node_modules
*/*/node_modules
key: ${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ hashFiles('**/yarn.lock') }}
- name: Install and bootstrap packages
if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'
run: yarn install --frozen-lockfile --ignore-engines --network-timeout 1000000
- name: Install ${{ matrix.webpack }}
if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'
run: yarn add -WD ${{ matrix.webpack }} --ignore-engines --network-timeout 1000000
- name: Run tests
id: test_run
if: steps.last_run_status.outputs.last_run_status != 'success'
run: yarn test --runInBand --coverage
env:
CI: true
WARNINGS_ERRORS_DISABLE: true
- name: Save run status
if: steps.last_run_status.outputs.last_run_status != 'success'
run: echo "::set-output name=last_run_status::${{ steps.test_run.outcome }}" > last_run_status
================================================
FILE: .github/workflows/release.yml
================================================
name: Release
on:
push:
branches:
- master
jobs:
release:
name: Release
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout@v2
with:
# This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
fetch-depth: 0
- name: Setup Node.js 12.x
uses: actions/setup-node@v2
with:
node-version: 12.x
- name: Install Dependencies
run: yarn --frozen-lockfile
- name: Create Release Pull Request or Publish
uses: changesets/action@master
with:
publish: yarn changeset publish
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
================================================
FILE: .github/workflows/test-examples.yml
================================================
name: Test examples on trigger
on:
workflow_dispatch:
inputs:
logLevel:
description: 'Log level'
required: true
default: 'warning'
tags:
description: 'Test scenario tags'
jobs:
build:
runs-on: ${{ matrix.os }}
strategy:
fail-fast: false
matrix:
node-version: [8.x, 10.x, 12.x, 13.x, 14.x]
os: [ubuntu-latest, windows-latest, macOS-latest]
webpack: ["webpack@4.46.0 html-webpack-plugin@4.5.2" , "webpack@5.24.0 html-webpack-plugin@5.2.0"]
name: Test on node ${{ matrix.node-version }} and ${{ matrix.os }} with ${{ matrix.webpack }}
steps:
- name: Get current date
id: date
run: echo "::set-output name=date::$(date +'%Y-%m-%dT%H:%M:%S')"
- name: Log date
run: echo "${{ steps.date.outputs.date }}"
- name: Set default run status
run: echo "::set-output name=last_run_status::default" > last_run_status
- name: Restore last run status
id: last_run
uses: actions/cache@v2
with:
path: |
last_run_status
key: ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ steps.date.outputs.date }}
restore-keys: |
${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-
- name: Set last run status
id: last_run_status
run: cat last_run_status
- name: Log last run status
run: echo "${{ steps.last_run_status.outputs.last_run_status }}"
- uses: actions/checkout@v1
if: steps.last_run_status.outputs.last_run_status != 'success'
- name: Use Node.js ${{ matrix.node-version }}
if: steps.last_run_status.outputs.last_run_status != 'success'
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: Install elm globally
if: steps.last_run_status.outputs.last_run_status != 'success'
run: yarn global add elm
- name: Restore lerna
id: cache
if: steps.last_run_status.outputs.last_run_status != 'success'
uses: actions/cache@v2
with:
path: |
node_modules
*/*/node_modules
key: ${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ hashFiles('**/yarn.lock') }}
- name: Install and bootstrap packages
if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'
run: yarn install --frozen-lockfile --ignore-engines --network-timeout 1000000
- name: Install ${{ matrix.webpack }}
if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'
run: yarn add -WD ${{ matrix.webpack }} --ignore-engines --network-timeout 1000000
- name: Run tests
id: test_run
if: steps.last_run_status.outputs.last_run_status != 'success'
run: yarn test --runInBand --coverage
env:
CI: true
WARNINGS_ERRORS_DISABLE: true
- name: Save run status
if: steps.last_run_status.outputs.last_run_status != 'success'
run: echo "::set-output name=last_run_status::${{ steps.test_run.outcome }}" > last_run_status
================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
.DS_Store
stage-*
example/
# Runtime data
pids
*.pid
*.seed
test-artifacts
examples/*/cache
examples/*/build
*.sqlite3
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
.yarn
# node-waf configuration
.lock-wscript
# Dependency directory
node_modules
# Optional npm cache directory
.npm
# Optional REPL history
.node_repl_history
# Build Output
build
.vscode
# Editors
**/.idea
.vercel
================================================
FILE: .prettierrc
================================================
{
"trailingComma": "es5",
"singleQuote": true,
"semi": true
}
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2016 Jared Palmer
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: examples/.gitignore
================================================
yarn.lock
package-lock.json
================================================
FILE: examples/basic/README.md
================================================
# Razzle Basic Example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example basic basic
cd basic
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
## Idea behind the example
This is a basic, bare-bones example of how to use razzle. It satisfies the entry points
`src/index.js` for the server and and `src/client.js` for the browser.
================================================
FILE: examples/basic/gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
public/static
.env.*.local
================================================
FILE: examples/basic/package.json
================================================
{
"name": "razzle-examples-basic",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js"
},
"dependencies": {
"express": "^4.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"mini-css-extract-plugin": "^0.9.0",
"html-webpack-plugin": "^4.5.2",
"webpack": "^4.44.1",
"babel-preset-razzle": "4.2.15",
"webpack-dev-server": "^3.11.2"
}
}
================================================
FILE: examples/basic/public/robots.txt
================================================
User-agent: *
================================================
FILE: examples/basic/sandbox.config.json
================================================
{
"container": {
"port": 3000
}
}
================================================
FILE: examples/basic/src/App.css
================================================
body {
margin: 0;
padding: 0;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Helvetica,
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
}
================================================
FILE: examples/basic/src/App.js
================================================
import './App.css';
import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;
export default App;
================================================
FILE: examples/basic/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
describe('<App />', () => {
test('renders without exploding', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
});
================================================
FILE: examples/basic/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';
hydrate(<App />, document.getElementById('root'));
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/basic/src/index.js
================================================
import express from 'express';
let app = require('./server').default;
if (module.hot) {
module.hot.accept('./server', function() {
console.log('🔁 HMR Reloading `./server`...');
try {
app = require('./server').default;
} catch (error) {
console.error(error);
}
});
console.info('✅ Server-side HMR Enabled!');
}
const port = process.env.PORT || 3000;
export default express()
.use((req, res) => app.handle(req, res))
.listen(port, function(err) {
if (err) {
console.error(err);
return;
}
console.log(`> Started on port ${port}`);
});
================================================
FILE: examples/basic/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const cssLinksFromAssets = (assets, entrypoint) => {
return assets[entrypoint] ? assets[entrypoint].css ?
assets[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};
const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets[entrypoint] ? assets[entrypoint].js ?
assets[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};
export const renderApp = (req, res) => {
const markup = renderToString(<App />);
const html =
// prettier-ignore
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`;
return { html };
};
const server = express();
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
const { html } = renderApp(req, res);
res.send(html);
});
export default server;
================================================
FILE: examples/basic-server/README.md
================================================
# Razzle Basic Server Example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example basic-server basic-server
cd basic-server
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
## Idea behind the example
This is a basic, bare-bones example of how to use razzle. It satisfies the entry point
`src/index.js` for the server.
================================================
FILE: examples/basic-server/gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
public/static
.env.*.local
================================================
FILE: examples/basic-server/package.json
================================================
{
"name": "razzle-examples-basic-server",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js"
},
"dependencies": {
"express": "^4.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"mini-css-extract-plugin": "^0.9.0",
"html-webpack-plugin": "^4.5.2",
"webpack": "^4.44.1",
"babel-preset-razzle": "4.2.15",
"webpack-dev-server": "^3.11.2"
}
}
================================================
FILE: examples/basic-server/public/robots.txt
================================================
User-agent: *
================================================
FILE: examples/basic-server/razzle.config.js
================================================
'use strict';
module.exports = {
options: {
buildType: 'server-only',
}
};
================================================
FILE: examples/basic-server/sandbox.config.json
================================================
{
"container": {
"port": 3000
}
}
================================================
FILE: examples/basic-server/src/App.css
================================================
body {
margin: 0;
padding: 0;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Helvetica,
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
}
================================================
FILE: examples/basic-server/src/App.js
================================================
import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;
export default App;
================================================
FILE: examples/basic-server/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
describe('<App />', () => {
test('renders without exploding', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
});
================================================
FILE: examples/basic-server/src/index.js
================================================
import express from 'express';
let app = require('./server').default;
if (module.hot) {
module.hot.accept('./server', function() {
console.log('🔁 HMR Reloading `./server`...');
try {
app = require('./server').default;
} catch (error) {
console.error(error);
}
});
console.info('✅ Server-side HMR Enabled!');
}
const port = process.env.PORT || 3000;
export default express()
.use((req, res) => app.handle(req, res))
.listen(port, function(err) {
if (err) {
console.error(err);
return;
}
console.log(`> Started on port ${port}`);
});
================================================
FILE: examples/basic-server/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';
export const renderApp = (req, res) => {
const markup = renderToString(<App />);
const html =
// prettier-ignore
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="root">${markup}</div>
</body>
</html>`;
return { html };
};
const server = express();
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
const { html } = renderApp(req, res);
res.send(html);
});
export default server;
================================================
FILE: examples/basic-serverless/README.md
================================================
# Razzle Basic Example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example basic basic
cd basic
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
## Idea behind the example
This is a basic, bare-bones example of how to use razzle. It satisfies the entry points
`src/index.js` for the server and and `src/client.js` for the browser.
================================================
FILE: examples/basic-serverless/gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
public/static
.env.*.local
================================================
FILE: examples/basic-serverless/package.json
================================================
{
"name": "razzle-examples-basic-serverless",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js"
},
"dependencies": {
"ejs": "^3.1.6",
"express": "^4.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"babel-preset-razzle": "4.2.15",
"html-webpack-plugin": "^4.5.2",
"mini-css-extract-plugin": "^0.9.0",
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"webpack": "^4.44.1",
"webpack-dev-server": "^3.11.2"
}
}
================================================
FILE: examples/basic-serverless/public/robots.txt
================================================
User-agent: *
================================================
FILE: examples/basic-serverless/razzle.config.js
================================================
'use strict';
const path = require('path');
module.exports = {
options: {
buildType: 'iso-serverless'
},
modifyWebpackConfig(opts) {
const config = opts.webpackConfig;
if (opts.env.target === 'node') {
config.plugins.push(
new opts.webpackObject.ContextReplacementPlugin(
// we want to replace context
/express\/lib/, // and replace all searches in
// express/lib/*
path.resolve('node_modules'), // to look in folder 'node_modules'
{ // and return a map
'ejs': 'ejs' // which resolves request for 'ejs'
} // to module 'ejs'
) // __webpack_require__(...)(mod)
// we set `mod = 'ejs'`
)
}
return config;
}
};
================================================
FILE: examples/basic-serverless/sandbox.config.json
================================================
{
"container": {
"port": 3000
}
}
================================================
FILE: examples/basic-serverless/src/App.css
================================================
body {
margin: 0;
padding: 0;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Helvetica,
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
}
================================================
FILE: examples/basic-serverless/src/App.js
================================================
import './App.css';
import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;
export default App;
================================================
FILE: examples/basic-serverless/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
describe('<App />', () => {
test('renders without exploding', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
});
================================================
FILE: examples/basic-serverless/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';
hydrate(<App />, document.getElementById('root'));
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/basic-serverless/src/index.js
================================================
import express from 'express';
let app = require('./server').default;
if (module.hot) {
module.hot.accept('./server', function() {
console.log('🔁 HMR Reloading `./server`...');
try {
app = require('./server').default;
} catch (error) {
console.error(error);
}
});
console.info('✅ Server-side HMR Enabled!');
}
const port = process.env.PORT || 3000;
export default express()
.use((req, res) => app.handle(req, res))
.listen(port, function(err) {
if (err) {
console.error(err);
return;
}
console.log(`> Started on port ${port}`);
});
================================================
FILE: examples/basic-serverless/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const cssLinksFromAssets = (assets, entrypoint) => {
return assets[entrypoint] ? assets[entrypoint].css ?
assets[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};
const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets[entrypoint] ? assets[entrypoint].js ?
assets[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};
export const renderApp = (req, res) => {
const markup = renderToString(<App />);
const html =
// prettier-ignore
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`;
return { html };
};
const server = express();
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
const { html } = renderApp(req, res);
res.send(html);
});
export default server;
================================================
FILE: examples/basic-spa/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
public/static
.env.*.local
================================================
FILE: examples/basic-spa/README.md
================================================
# Razzle Single Page App Example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example basic-spa basic-spa
cd basic-spa
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
## Idea behind the example
This is a basic, bare-bones example of how to use razzle to build a single page application (instead of a universal/isomorphic application). It satisfies the entry point `src/client.js` for the browser and includes a template HTML file in `public/index.html`.
================================================
FILE: examples/basic-spa/package.json
================================================
{
"name": "razzle-examples-basic-spa",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "serve -s build/public"
},
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"babel-preset-razzle": "4.2.15",
"html-webpack-plugin": "5.2.0",
"mini-css-extract-plugin": "^0.9.0",
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"serve": "^11.3.2",
"webpack": "5.24.0",
"webpack-dev-server": "^3.11.2"
}
}
================================================
FILE: examples/basic-spa/public/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="<%= process.env.PUBLIC_PATH %>favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="theme-color" content="#000000" />
<%= htmlWebpackPlugin.tags.headTags %>
<!--
Notice the use of <%= process.env.PUBLIC_PATH %> in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "<%= process.env.PUBLIC_PATH %>/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<%= htmlWebpackPlugin.tags.bodyTags %>
</body>
</html>
================================================
FILE: examples/basic-spa/public/robots.txt
================================================
User-agent: *
================================================
FILE: examples/basic-spa/razzle.config.js
================================================
'use strict';
module.exports = {
options: {
buildType: 'single-page-application',
}
};
================================================
FILE: examples/basic-spa/src/App.css
================================================
body {
margin: 0;
padding: 0;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Helvetica,
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
}
================================================
FILE: examples/basic-spa/src/App.js
================================================
import './App.css';
import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;
export default App;
================================================
FILE: examples/basic-spa/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
describe('<App />', () => {
test('renders without exploding', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
});
================================================
FILE: examples/basic-spa/src/client.js
================================================
import React from 'react';
import { render } from 'react-dom';
import App from './App';
render(<App />, document.getElementById('root'));
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/with-afterjs/README.md
================================================
# with-afterjs example
This example have been moved here: [jaredpalmer/after.js](https://github.com/jaredpalmer/after.js/blob/master/examples/basic)
================================================
FILE: examples/with-custom-babel-config/.babelrc
================================================
{
"presets": [
"razzle/babel"
],
"plugins": [
"@babel/plugin-proposal-do-expressions"
]
}
================================================
FILE: examples/with-custom-babel-config/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
public/static
.env.*.local
================================================
FILE: examples/with-custom-babel-config/README.md
================================================
# Razzle Custom Babel Configuration Example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example with-custom-babel-config with-custom-babel-config
cd with-custom-babel-config
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
## Idea behind the example
This is an example of how to extend Razzle with a custom `.babelrc` file.
================================================
FILE: examples/with-custom-babel-config/package.json
================================================
{
"name": "razzle-examples-with-custom-babel-config",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js"
},
"dependencies": {
"express": "^4.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.1.2",
"serialize-javascript": "^3.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/plugin-proposal-do-expressions": "^7.8.3",
"babel-preset-razzle": "4.2.15",
"mini-css-extract-plugin": "^0.9.0",
"html-webpack-plugin": "^4.5.2",
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"webpack": "^4.44.1",
"webpack-dev-server": "^3.11.2"
}
}
================================================
FILE: examples/with-custom-babel-config/razzle.config.js
================================================
module.exports = {
options: {
verbose: true
},
}
================================================
FILE: examples/with-custom-babel-config/src/App.js
================================================
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
const App = () => (
<Switch>
<Route exact path="/" component={Home} />
</Switch>
);
export default App;
================================================
FILE: examples/with-custom-babel-config/src/Home.js
================================================
import React from "react";
export default class MyLuckNo extends React.Component {
state = { randomNo: null };
componentDidMount() {
this.recalculate();
}
recalculate() {
this.setState({
randomNo: Math.ceil(Math.random() * 100),
});
}
render() {
const { randomNo } = this.state;
if (randomNo === null) {
return <p>Please wait..</p>;
}
// This is an experimental JavaScript feature where we can get with
// using babel-preset-stage-0
const message = do {
if (randomNo < 30) {
// eslint-disable-next-line no-unused-expressions
("Do not give up. Try again.");
} else if (randomNo < 60) {
// eslint-disable-next-line no-unused-expressions
("You are a lucky guy");
} else {
// eslint-disable-next-line no-unused-expressions
("You are soooo lucky!");
}
};
return (
<div>
<h3>Your Lucky number is: "{randomNo}"</h3>
<p>{message}</p>
<button onClick={() => this.recalculate()}>Try Again</button>
</div>
);
}
}
================================================
FILE: examples/with-custom-babel-config/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
hydrate(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/with-custom-babel-config/src/index.js
================================================
import express from 'express';
let app = require('./server').default;
if (module.hot) {
module.hot.accept('./server', function() {
console.log('🔁 HMR Reloading `./server`...');
try {
app = require('./server').default;
} catch (error) {
console.error(error);
}
});
console.info('✅ Server-side HMR Enabled!');
}
const port = process.env.PORT || 3000;
export default express()
.use((req, res) => app.handle(req, res))
.listen(port, function(err) {
if (err) {
console.error(err);
return;
}
console.log(`> Started on port ${port}`);
});
================================================
FILE: examples/with-custom-babel-config/src/server.js
================================================
import { StaticRouter } from 'react-router-dom';
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const cssLinksFromAssets = (assets, entrypoint) => {
return assets[entrypoint] ? assets[entrypoint].css ?
assets[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};
const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets[entrypoint] ? assets[entrypoint].js ?
assets[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};
export const renderApp = (req, res) => {
const context = {};
const markup = renderToString(
<StaticRouter context={context} location={req.url}>
<App />
</StaticRouter>
);
if (context.url) {
return { redirect: context.url };
} else {
const html =
// prettier-ignore
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`;
return { html };
}
};
const server = express();
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
const { html = '', redirect = false } = renderApp(req, res);
if (redirect) {
res.redirect(redirect);
} else {
res.send(html);
}
});
export default server;
================================================
FILE: examples/with-custom-devserver-options/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local
================================================
FILE: examples/with-custom-devserver-options/README.md
================================================
# Razzle Custom Webpack Configuration Example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example with-custom-devserver-options with-custom-devserver-options
cd with-custom-devserver-options
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
## Idea behind the example
This example demonstrates how to use a `razzle.config.js` file to modify Razzle's
underlying webpack devServer configuration. It modifies the port of the devServer
in dev (`razzle start`).
Note that this file is not transpiled, and so you must write it with vanilla
Node.js-compatible JavaScript.
```js
// razzle.config.js
'use strict';
module.exports = {
modifyWebpackConfig(opts) {
const config = opts.webpackConfig;
if (opts.env.target === 'web' && opts.env.dev) {
config.devServer.port = 3002;
// If behind a proxy on a public domain
// config.devServer.public = 'example.com:8080';
}
return config;
},
};
```
================================================
FILE: examples/with-custom-devserver-options/package.json
================================================
{
"name": "razzle-examples-with-custom-devserver-options",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "cross-env CLIENT_PUBLIC_PATH=http://localhost:3002/ razzle start",
"start:proxied": "cross-env CLIENT_PUBLIC_PATH=http://example.com:8080/ razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js"
},
"dependencies": {
"express": "^4.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"cross-env": "^7.0.3",
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"mini-css-extract-plugin": "^0.9.0",
"html-webpack-plugin": "^4.5.2",
"webpack": "^4.44.1",
"babel-preset-razzle": "4.2.15",
"webpack-dev-server": "^3.11.2"
}
}
================================================
FILE: examples/with-custom-devserver-options/public/robots.txt
================================================
User-agent: *
================================================
FILE: examples/with-custom-devserver-options/razzle.config.js
================================================
'use strict';
module.exports = {
modifyWebpackConfig(opts) {
const config = opts.webpackConfig;
if (opts.env.target === 'web' && opts.env.dev) {
config.devServer.port = 3002;
// If behind a proxy on a public domain
// config.devServer.public = 'example.com:8080';
}
return config;
},
};
================================================
FILE: examples/with-custom-devserver-options/src/App.js
================================================
import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;
export default App;
================================================
FILE: examples/with-custom-devserver-options/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';
hydrate(<App />, document.getElementById('root'));
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/with-custom-devserver-options/src/index.js
================================================
import express from 'express';
let app = require('./server').default;
if (module.hot) {
module.hot.accept('./server', function() {
console.log('🔁 HMR Reloading `./server`...');
try {
app = require('./server').default;
} catch (error) {
console.error(error);
}
});
console.info('✅ Server-side HMR Enabled!');
}
const port = process.env.PORT || 3000;
export default express()
.use((req, res) => app.handle(req, res))
.listen(port, function(err) {
if (err) {
console.error(err);
return;
}
console.log(`> Started on port ${port}`);
});
================================================
FILE: examples/with-custom-devserver-options/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const cssLinksFromAssets = (assets, entrypoint) => {
return assets[entrypoint] ? assets[entrypoint].css ?
assets[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};
const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets[entrypoint] ? assets[entrypoint].js ?
assets[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};
export const renderApp = (req, res) => {
const markup = renderToString(<App />);
const html =
// prettier-ignore
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`;
return { html };
};
const server = express();
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
const { html } = renderApp(req, res);
res.send(html);
});
export default server;
================================================
FILE: examples/with-custom-environment-variables/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local
================================================
FILE: examples/with-custom-environment-variables/README.md
================================================
# Razzle Custom Environment Variables Example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example with-custom-environment-variables with-custom-environment-variables
cd with-custom-environment-variables
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
## Idea behind the example
This example shows how you can use `.env` files to set environment-specific
**build-time** variables.
> Note: Razzle's `.env` setup is alsmost identically to [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables).
```bash
# .env
HOST=10.69.107.189 # HOST sets the host IP address
PORT=4000 # Serve on :4000
VERBOSE=true # Show verbose logging output (will not clear console between compiles)
RAZZLE_MY_CUSTOM_VARIABLE=XXXXXX # Will be available on server and client as process.env.RAZZLE_MY_CUSTOM_VARIABLE
```
================================================
FILE: examples/with-custom-environment-variables/package.json
================================================
{
"name": "razzle-examples-with-custom-environment-variables",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js"
},
"dependencies": {
"express": "^4.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"mini-css-extract-plugin": "^0.9.0",
"html-webpack-plugin": "^4.5.2",
"webpack": "^4.44.1",
"babel-preset-razzle": "4.2.15",
"webpack-dev-server": "^3.11.2"
},
"razzle_meta": {
"port": "4000"
}
}
================================================
FILE: examples/with-custom-environment-variables/public/robots.txt
================================================
User-agent: *
================================================
FILE: examples/with-custom-environment-variables/src/App.js
================================================
import React from 'react';
const App = () => <div>{process.env.RAZZLE_CUSTOM_VAR}</div>;
export default App;
================================================
FILE: examples/with-custom-environment-variables/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';
hydrate(<App />, document.getElementById('root'));
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/with-custom-environment-variables/src/index.js
================================================
import express from 'express';
let app = require('./server').default;
if (module.hot) {
module.hot.accept('./server', function() {
console.log('🔁 HMR Reloading `./server`...');
try {
app = require('./server').default;
} catch (error) {
console.error(error);
}
});
console.info('✅ Server-side HMR Enabled!');
}
const port = process.env.PORT || 3000;
export default express()
.use((req, res) => app.handle(req, res))
.listen(port, function(err) {
if (err) {
console.error(err);
return;
}
console.log(`> Started on port ${port}`);
});
================================================
FILE: examples/with-custom-environment-variables/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const cssLinksFromAssets = (assets, entrypoint) => {
return assets[entrypoint] ? assets[entrypoint].css ?
assets[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};
const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets[entrypoint] ? assets[entrypoint].js ?
assets[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};
export const renderApp = (req, res) => {
const markup = renderToString(<App />);
const html =
// prettier-ignore
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`;
return { html };
};
const server = express();
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
const { html } = renderApp(req, res);
res.send(html);
});
export default server;
================================================
FILE: examples/with-custom-target-babel-config/.babelrc.node
================================================
{
"presets": [
"razzle/babel"
],
"plugins": [
"@babel/plugin-proposal-do-expressions"
]
}
================================================
FILE: examples/with-custom-target-babel-config/.babelrc.web
================================================
{
"presets": [
"razzle/babel"
],
"plugins": [
"@babel/plugin-proposal-do-expressions"
]
}
================================================
FILE: examples/with-custom-target-babel-config/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
public/static
.env.*.local
================================================
FILE: examples/with-custom-target-babel-config/README.md
================================================
# Razzle Custom Target Babel Configuration Example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example with-custom-target-babel-config with-custom-target-babel-config
cd with-custom-target-babel-config
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
## Idea behind the example
This is an example of how to extend Razzle with a custom `.babelrc.node` and a `.babelrc.web` file.
================================================
FILE: examples/with-custom-target-babel-config/package.json
================================================
{
"name": "razzle-examples-with-custom-target-babel-config",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js"
},
"dependencies": {
"express": "^4.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.1.2",
"serialize-javascript": "^3.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/plugin-proposal-do-expressions": "^7.8.3",
"babel-preset-razzle": "4.2.15",
"mini-css-extract-plugin": "^0.9.0",
"html-webpack-plugin": "^4.5.2",
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"webpack": "^4.44.1",
"webpack-dev-server": "^3.11.2"
}
}
================================================
FILE: examples/with-custom-target-babel-config/razzle.config.js
================================================
module.exports = {
options: {
verbose: true,
enableTargetBabelrc: true
},
}
================================================
FILE: examples/with-custom-target-babel-config/src/App.js
================================================
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
const App = () => (
<Switch>
<Route exact path="/" component={Home} />
</Switch>
);
export default App;
================================================
FILE: examples/with-custom-target-babel-config/src/Home.js
================================================
import React from "react";
export default class MyLuckNo extends React.Component {
state = { randomNo: null };
componentDidMount() {
this.recalculate();
}
recalculate() {
this.setState({
randomNo: Math.ceil(Math.random() * 100),
});
}
render() {
const { randomNo } = this.state;
if (randomNo === null) {
return <p>Please wait..</p>;
}
// This is an experimental JavaScript feature where we can get with
// using babel-preset-stage-0
const message = do {
if (randomNo < 30) {
// eslint-disable-next-line no-unused-expressions
("Do not give up. Try again.");
} else if (randomNo < 60) {
// eslint-disable-next-line no-unused-expressions
("You are a lucky guy");
} else {
// eslint-disable-next-line no-unused-expressions
("You are soooo lucky!");
}
};
return (
<div>
<h3>Your Lucky number is: "{randomNo}"</h3>
<p>{message}</p>
<button onClick={() => this.recalculate()}>Try Again</button>
</div>
);
}
}
================================================
FILE: examples/with-custom-target-babel-config/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
hydrate(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/with-custom-target-babel-config/src/index.js
================================================
import express from 'express';
let app = require('./server').default;
if (module.hot) {
module.hot.accept('./server', function() {
console.log('🔁 HMR Reloading `./server`...');
try {
app = require('./server').default;
} catch (error) {
console.error(error);
}
});
console.info('✅ Server-side HMR Enabled!');
}
const port = process.env.PORT || 3000;
export default express()
.use((req, res) => app.handle(req, res))
.listen(port, function(err) {
if (err) {
console.error(err);
return;
}
console.log(`> Started on port ${port}`);
});
================================================
FILE: examples/with-custom-target-babel-config/src/server.js
================================================
import { StaticRouter } from 'react-router-dom';
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const cssLinksFromAssets = (assets, entrypoint) => {
return assets[entrypoint] ? assets[entrypoint].css ?
assets[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};
const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets[entrypoint] ? assets[entrypoint].js ?
assets[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};
export const renderApp = (req, res) => {
const context = {};
const markup = renderToString(
<StaticRouter context={context} location={req.url}>
<App />
</StaticRouter>
);
const html =
// prettier-ignore
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`;
return { html };
};
const server = express();
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
const { html } = renderApp(req, res);
res.send(html);
});
export default server;
================================================
FILE: examples/with-custom-webpack-config/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local
================================================
FILE: examples/with-custom-webpack-config/README.md
================================================
# Razzle Custom Webpack Configuration Example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example with-custom-webpack-config with-custom-webpack-config
cd with-custom-webpack-config
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
## Idea behind the example
This example demonstrates how to use a `razzle.config.js` file to modify Razzle's
underlying webpack configuration. It modifies the name of the server's output file
in production (`razzle build`).
Note that this file is not transpiled, and so you must write it with vanilla
Node.js-compatible JavaScript.
```js
// razzle.config.js
'use strict';
module.exports = {
modifyWebpackConfig(opts) {
const config = opts.webpackConfig;
// Change the name of the server output file in production
if (opts.env.target === 'node' && !opts.env.dev) {
config.output.filename = 'custom.js';
}
return config;
},
};
```
================================================
FILE: examples/with-custom-webpack-config/package.json
================================================
{
"name": "razzle-examples-with-custom-webpack-config",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/custom.js"
},
"dependencies": {
"express": "^4.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"mini-css-extract-plugin": "^0.9.0",
"html-webpack-plugin": "^4.5.2",
"webpack": "^4.44.1",
"babel-preset-razzle": "4.2.15",
"webpack-dev-server": "^3.11.2"
}
}
================================================
FILE: examples/with-custom-webpack-config/public/robots.txt
================================================
User-agent: *
================================================
FILE: examples/with-custom-webpack-config/razzle.config.js
================================================
'use strict';
module.exports = {
modifyWebpackConfig(opts) {
const config = opts.webpackConfig;
// Change the name of the server output file in production
if (opts.env.target === 'node' && !opts.env.dev) {
config.output.filename = 'custom.js';
}
return config;
},
};
================================================
FILE: examples/with-custom-webpack-config/src/App.js
================================================
import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;
export default App;
================================================
FILE: examples/with-custom-webpack-config/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';
hydrate(<App />, document.getElementById('root'));
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/with-custom-webpack-config/src/index.js
================================================
import express from 'express';
let app = require('./server').default;
if (module.hot) {
module.hot.accept('./server', function() {
console.log('🔁 HMR Reloading `./server`...');
try {
app = require('./server').default;
} catch (error) {
console.error(error);
}
});
console.info('✅ Server-side HMR Enabled!');
}
const port = process.env.PORT || 3000;
export default express()
.use((req, res) => app.handle(req, res))
.listen(port, function(err) {
if (err) {
console.error(err);
return;
}
console.log(`> Started on port ${port}`);
});
================================================
FILE: examples/with-custom-webpack-config/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const cssLinksFromAssets = (assets, entrypoint) => {
return assets[entrypoint] ? assets[entrypoint].css ?
assets[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};
const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets[entrypoint] ? assets[entrypoint].js ?
assets[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};
export const renderApp = (req, res) => {
const markup = renderToString(<App />);
const html =
// prettier-ignore
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`;
return { html };
};
const server = express();
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
const { html } = renderApp(req, res);
res.send(html);
});
export default server;
================================================
FILE: examples/with-devcert-https/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local
================================================
FILE: examples/with-devcert-https/README.md
================================================
# Razzle Devcert Https Example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example with-devcert-https with-devcert-https
cd with-devcert-https
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
## Idea behind the example
This example demonstrates how to use a `razzle.config.js` file to modify Razzle's
underlying configuration using a promise. It modifies the name of the server's output file
in production (`razzle build`).
Note that this file is not transpiled, and so you must write it with vanilla
Node.js-compatible JavaScript.
```js
// razzle.config.js
'use strict';
module.exports = {
modifyWebpackOptions(opts) {
const options = opts.webpackOptions;
return new Promise(async (resolve) => {
const httpsCredentials = await devcert.certificateFor('localhost');
const stringHttpsCredentials = {
key: httpsCredentials.key.toString(),
cert: httpsCredentials.cert.toString()
};
if (opts.env.target === 'node' && opts.env.dev) {
options.definePluginOptions.HTTPS_CREDENTIALS = JSON.stringify(stringHttpsCredentials);
}
if (opts.env.target === 'web' && opts.env.dev) {
options.HTTPS_CREDENTIALS = httpsCredentials;
}
resolve(options);
});
},
modifyWebpackConfig(opts) {
const config = opts.webpackConfig;
const options = opts.webpackOptions;
if (opts.env.target === 'web' && opts.env.dev) {
config.devServer.https = options.HTTPS_CREDENTIALS;
}
return config;
},
};
```
================================================
FILE: examples/with-devcert-https/package.json
================================================
{
"name": "razzle-examples-with-devcert-https",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/custom.js"
},
"dependencies": {
"cors": "^2.8.5",
"express": "^4.17.1",
"https": "^1.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"babel-preset-razzle": "4.2.15",
"devcert": "^1.1.3",
"mini-css-extract-plugin": "^0.9.0",
"html-webpack-plugin": "^4.5.2",
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"webpack": "^4.44.1",
"webpack-dev-server": "^3.11.2"
}
}
================================================
FILE: examples/with-devcert-https/public/robots.txt
================================================
User-agent: *
================================================
FILE: examples/with-devcert-https/razzle.config.js
================================================
'use strict';
const devcert = require('devcert');
const cors = require('cors');
const whitelist = ['https://localhost:3000', 'https://localhost:3001']; //white list consumers
const corsOptions = {
origin: '*',
// function (origin, callback) {
// console.log(origin);
// if (whitelist.indexOf(origin) !== -1) {
// callback(null, true);
// } else {
// callback(null, false);
// }
// },
methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'],
optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
credentials: true, //Credentials are cookies, authorization headers or TLS client certificates.
allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'device-remember-token', 'Access-Control-Allow-Origin', 'Origin', 'Accept']
};
module.exports = {
modifyOptions(opts) { // use modifyOptions so certificateFor is called once
const options = opts.options.razzleOptions;
return new Promise(async (resolve) => {
const httpsCredentials = await devcert.certificateFor('localhost');
const stringHttpsCredentials = {
key: httpsCredentials.key.toString(),
cert: httpsCredentials.cert.toString()
};
options.HTTPS_CREDENTIALS = stringHttpsCredentials;
resolve(options);
});
},
modifyWebpackOptions(opts) {
const razzleOptions = opts.options.razzleOptions;
const webpackOptions = opts.options.webpackOptions;
if (opts.env.target === 'node' && opts.env.dev) {
webpackOptions.definePluginOptions.HTTPS_CREDENTIALS = JSON.stringify(razzleOptions.HTTPS_CREDENTIALS);
}
return webpackOptions;
},
modifyWebpackConfig(opts) {
const config = opts.webpackConfig;
const options = opts.options.razzleOptions;
if (opts.env.target === 'web' && opts.env.dev) {
config.devServer.https = options.HTTPS_CREDENTIALS;
// config.devServer.before = function (app, server, compiler) {
// app.use(cors('*')); console.log('web');
//
// }
config.devServer.headers = {
"Access-Control-Allow-Origin": "*",
https: true
}
}
return config;
},
};
================================================
FILE: examples/with-devcert-https/src/App.css
================================================
body {
margin: 0;
padding: 0;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Helvetica,
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
}
================================================
FILE: examples/with-devcert-https/src/App.js
================================================
import './App.css';
import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;
export default App;
================================================
FILE: examples/with-devcert-https/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';
hydrate(<App />, document.getElementById('root'));
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/with-devcert-https/src/index.js
================================================
import express from 'express';
import https from 'https';
let app = require('./server').default;
if (module.hot) {
module.hot.accept('./server', function() {
console.log('🔁 HMR Reloading `./server`...');
try {
app = require('./server').default;
} catch (error) {
console.error(error);
}
});
console.info('✅ Server-side HMR Enabled!');
}
const port = process.env.PORT || 3000;
const credentials = HTTPS_CREDENTIALS || {};
export default https.createServer(credentials,app)
.listen(port, function(err) {
if (err) {
console.error(err);
return;
}
console.log(`> Started on port ${port}`);
});
================================================
FILE: examples/with-devcert-https/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import cors from 'cors';
import { renderToString } from 'react-dom/server';
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const cssLinksFromAssets = (assets, entrypoint) => {
return assets[entrypoint] ? assets[entrypoint].css ?
assets[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};
const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets[entrypoint] ? assets[entrypoint].js ?
assets[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};
export const renderApp = (req, res) => {
const markup = renderToString(<App />);
const html =
// prettier-ignore
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`;
return { html };
};
const whitelist = ['https://localhost:3000', 'https://localhost:3001']; //white list consumers
const corsOptions = {
origin: function (origin, callback) {
if (whitelist.indexOf(origin) !== -1) {
callback(null, true);
} else {
callback(null, false);
}
},
methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'],
optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
credentials: true, //Credentials are cookies, authorization headers or TLS client certificates.
allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'device-remember-token', 'Access-Control-Allow-Origin', 'Origin', 'Accept']
};
const server = express();
server
.disable('x-powered-by')
.use(cors(corsOptions))
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
const { html } = renderApp(req, res);
res.send(html);
});
export default server;
================================================
FILE: examples/with-development-build/README.md
================================================
# Razzle Basic Example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->
This is the canary release documentation for this example
Create and start the example:
```bash
npx create-razzle-app@canary --example basic basic
cd basic
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
## Idea behind the example
This is a basic, bare-bones example of how to use razzle to produce a development build. It satisfies the entry points
`src/index.js` for the server and and `src/client.js` for the browser.
The only differences between this example and the `basic` example are that the `razzle build` command is replaced with `razzle build --node-env=development` and that there is a new `start:dev` command for running the development build.
You can use this command separately in a new script inside the `scripts` section of the project's `package.json` file, if you find it useful.
================================================
FILE: examples/with-development-build/gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
public/static
.env.*.local
================================================
FILE: examples/with-development-build/package.json
================================================
{
"name": "razzle-examples-with-development-build",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "razzle start",
"build": "razzle build --node-env=development",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js",
"start:dev": "NODE_ENV=development node build/server.js"
},
"dependencies": {
"express": "^4.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"mini-css-extract-plugin": "^0.9.0",
"html-webpack-plugin": "^4.5.2",
"webpack": "^4.44.1",
"babel-preset-razzle": "4.2.15",
"webpack-dev-server": "^3.11.2"
}
}
================================================
FILE: examples/with-development-build/public/robots.txt
================================================
User-agent: *
================================================
FILE: examples/with-development-build/sandbox.config.json
================================================
{
"container": {
"port": 3000
}
}
================================================
FILE: examples/with-development-build/src/App.css
================================================
body {
margin: 0;
padding: 0;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Helvetica,
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
}
================================================
FILE: examples/with-development-build/src/App.js
================================================
import './App.css';
import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;
export default App;
================================================
FILE: examples/with-development-build/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
describe('<App />', () => {
test('renders without exploding', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
});
================================================
FILE: examples/with-development-build/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';
hydrate(<App />, document.getElementById('root'));
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/with-development-build/src/index.js
================================================
import express from 'express';
let app = require('./server').default;
if (module.hot) {
module.hot.accept('./server', function() {
console.log('🔁 HMR Reloading `./server`...');
try {
app = require('./server').default;
} catch (error) {
console.error(error);
}
});
console.info('✅ Server-side HMR Enabled!');
}
const port = process.env.PORT || 3000;
export default express()
.use((req, res) => app.handle(req, res))
.listen(port, function(err) {
if (err) {
console.error(err);
return;
}
console.log(`> Started on port ${port}`);
});
================================================
FILE: examples/with-development-build/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const cssLinksFromAssets = (assets, entrypoint) => {
return assets[entrypoint] ? assets[entrypoint].css ?
assets[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};
const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets[entrypoint] ? assets[entrypoint].js ?
assets[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};
export const renderApp = (req, res) => {
const markup = renderToString(<App />);
const html =
// prettier-ignore
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`;
return { html };
};
const server = express();
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
const { html } = renderApp(req, res);
res.send(html);
});
export default server;
================================================
FILE: examples/with-elm/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
coverage
node_modules
build
.env.local
.env.development.local
.env.test.local
.env.production.local
.elm-static-html
build
# Optional npm cache directory
.npm
yarn.lock
# Optional REPL history
.node_repl_history
# elm-package generated files
elm-stuff/
# elm-repl generated files
repl-temp-*
ignore
dist
================================================
FILE: examples/with-elm/README.md
================================================
# Razzle Elm Example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example with-elm with-elm
cd with-elm
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
## Idea behind the example
This is a basic example of how to use Razzle and Elm, it uses:
* [elm-static-html](https://github.com/eeue56/elm-static-html-lib) to convert Elm views into raw html
* [elm-webpack-loader](https://github.com/elm-community/elm-webpack-loader) load elm files and import them into javascript
* [elm-hot-loader](https://github.com/fluxxu/elm-hot-loader) hot reload all Elm files while dev
`src/client.js` contains all the js code required to load Elm, you can configure Elm ports here
`src/server.js` the server side, here call `elm-static-html-lib` with the respective module to render the view
---
If you want to activate the Elm debug mode or other tooling and debug utilites of Elm edit `razzle.config.js`:
```js
{
loader: 'elm-webpack-loader',
options: { //Edit here
verbose: true,
warn: true,
pathToMake: require('elm/platform').executablePaths['elm-make'],
forceWatch: true
}
}
```
As of Razzle 2.0, you can now use [razzle-plugin-elm](../../packages/razzle-plugin-elm/README.md) instead of adding the webpack loaders on your own.
================================================
FILE: examples/with-elm/elm-package.json
================================================
{
"version": "1.0.0",
"summary": "helpful summary of your project, less than 80 characters",
"repository": "https://github.com/user/project.git",
"license": "BSD3",
"source-directories": [
"src"
],
"exposed-modules": [],
"dependencies": {
"elm-lang/core": "5.1.1 <= v < 6.0.0",
"elm-lang/html": "2.0.0 <= v < 3.0.0",
"eeue56/elm-html-in-elm":"2.0.0 <= v < 3.0.0"
},
"elm-version": "0.18.0 <= v < 0.19.0"
}
================================================
FILE: examples/with-elm/package.json
================================================
{
"name": "razzle-examples-with-elm",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"postinstall": "elm-package install -y",
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "set NODE_ENV=production&&node build/server.js"
},
"dependencies": {
"elm-static-html-lib": "^0.1.0",
"express": "^4.17.1"
},
"devDependencies": {
"elm-hot-loader": "^0.5.4",
"elm-webpack-loader": "4.5.0",
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"mini-css-extract-plugin": "^0.9.0",
"html-webpack-plugin": "^4.5.2",
"webpack": "^4.44.1",
"babel-preset-razzle": "4.2.15",
"webpack-dev-server": "^3.11.2"
}
}
================================================
FILE: examples/with-elm/public/robots.txt
================================================
User-agent: *
================================================
FILE: examples/with-elm/razzle.config.js
================================================
'use strict';
module.exports = {
modifyWebpackOptions({
env: {
target, // the target 'node' or 'web'
dev, // is this a development build? true or false
},
webpackObject, // the imported webpack node module
options: {
razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})
webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins
},
paths, // the modified paths that will be used by Razzle.
}) {
webpackOptions.fileLoaderExclude.push(/\.(elm)$/);
return webpackOptions;
},
modifyWebpackConfig(opts) {
const config = opts.webpackConfig;
config.module.noParse = [/.elm$/];
config.resolve.extensions.push('.elm');
if (opts.env.dev) {
config.module.rules.push({
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
use: [
{
loader: 'elm-webpack-loader',
options: {
verbose: true,
warn: true,
pathToMake: require('elm/platform').executablePaths['elm-make'],
forceWatch: true,
},
},
],
});
} else {
// Production
config.module.rules.push({
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
use: [
{
loader: 'elm-webpack-loader',
options: {
pathToMake: require('elm/platform').executablePaths['elm-make'],
},
},
],
});
}
return config;
},
};
================================================
FILE: examples/with-elm/src/App.elm
================================================
module App exposing (..)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Json.Decode
type alias Model =
{counter: Int}
init : ( Model, Cmd Msg )
init =
( Model 0, Cmd.none )
decodeModel : Json.Decode.Decoder Model
decodeModel =
Json.Decode.map Model
(Json.Decode.field "counter" Json.Decode.int)
-- UPDATE
type Msg
= Inc
update : Msg -> Model -> ( Model, Cmd Msg )
update message model =
case message of
Inc ->
{model | counter = model.counter + 1} ! []
-- VIEW
view : Model -> Html Msg
view model =
div [ class "container" ]
[ h1 []
[ text "Elm SSR example"
]
, p [] [ text "Click on the button below to increment the state." ]
, div []
[ button
[ class "btn btn-primary"
, onClick Inc
]
[ text "+ 1" ]
, text <| toString model
]
, p [] [ text "A simple example of how to make Razzle and Elm work together!" ]
]
================================================
FILE: examples/with-elm/src/Main.elm
================================================
module Main exposing (main)
import Html
import App exposing (init, update, view)
main : Program Never App.Model App.Msg
main =
Html.program
{ init = init
, update = update
, view = view
, subscriptions = always Sub.none
}
================================================
FILE: examples/with-elm/src/client.js
================================================
import Elm from './Main';
// We need embed the Elm app to the div, if we call fullscreen we will have duplicated html
Elm.Main.embed(document.getElementById('root'));
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/with-elm/src/index.js
================================================
import express from 'express';
let app = require('./server').default;
if (module.hot) {
module.hot.accept('./server', function() {
console.log('🔁 HMR Reloading `./server`...');
try {
app = require('./server').default;
} catch (error) {
console.error(error);
}
});
console.info('✅ Server-side HMR Enabled!');
}
const port = process.env.PORT || 3000;
export default express()
.use((req, res) => app.handle(req, res))
.listen(port, function(err) {
if (err) {
console.error(err);
return;
}
console.log(`> Started on port ${port}`);
});
================================================
FILE: examples/with-elm/src/server.js
================================================
import elmStaticHtml from "elm-static-html-lib";
import express from 'express';
require('./Main');
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const model = { counter: 5 };
const options = { model : model, decoder: "App.decodeModel" };
const cssLinksFromAssets = (assets, entrypoint) => {
return assets[entrypoint] ? assets[entrypoint].css ?
assets[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};
const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets[entrypoint] ? assets[entrypoint].js ?
assets[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};
export const renderApp = (req, res) => {
return new Promise((resolve, reject) {
elmStaticHtml(process.cwd(), "App.view", options)
.then((markup) => {
const html =
// prettier-ignore
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`;
resolve({ html, status: 200 });
}).catch((error) => {
resolve({ html: `<h1>An error ocurred on server, please try later, or contact support</h1>`, status: 500 });
});
})
};
const server = express();
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', async (req, res) => {
const { html, status } = await renderApp(req, res);
res.status(status).send(html);
});
export default server;
================================================
FILE: examples/with-esbuild-loader/.eslintrc.js
================================================
module.exports =
{
"env": {
"node": true,
"browser": true,
"es6": true
},
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": ["react", "@typescript-eslint", "prettier"],
"extends": [
"plugin:react/recommended",
"airbnb",
"plugin:prettier/recommended",
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": ["error"],
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
],
"rules": {
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
],
"prettier/prettier": "error",
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/no-unused-vars": "off",
"react/jsx-filename-extension": [
1,
{ "extensions": [".js", ".jsx", ".ts", ".tsx"] }
]
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
};
================================================
FILE: examples/with-esbuild-loader/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local
================================================
FILE: examples/with-esbuild-loader/README.md
================================================
# Razzle Esbuild Loader Example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example with-esbuild-loader with-esbuild-loader
cd with-esbuild-loader
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
## Idea behind the example
This is an of how to use Razzle with [TypeScript](https://github.com/Microsoft/TypeScript).
In `razzle.config.js`, we locate the part of the webpack configuration
that is running `babel-loader` and swap it out for `ts-loader`.
Additionally, we make sure Razzle knows how to resolve `.ts` and `.tsx` files.
Lastly, we also need to modify our Jest configuration to handle typescript files.
Thus we add `ts-jest` and `@types/jest` to our dev dependencies. Then we augment Razzle's default jest setup by adding a field in our `package.json`.
```json
// package.json
{
...
"jest": {
"transform": {
"\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js",
"\\.css$": "<rootDir>/node_modules/razzle/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/node_modules/razzle/config/jest/fileTransform.js"
},
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.(ts|js)?(x)",
"<rootDir>/src/**/?(*.)(spec|test).(ts|js)?(x)"
],
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"json"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}"
]
}
}
```
The `tslint.json` and `tsconfig.json` are taken from Microsoft's official
[TypeScript-React-Starter](https://github.com/Microsoft/TypeScript-React-Starter).
Note: You do not techincally _need_ to fully replace `babel-loader` with
`ts-loader` to use TypeScript. Both TS and Babel transpile ES6 code,
so when you run both webpack loaders you are making Razzle do twice the work. From our testing,
this can make HMR extremely slow on larger apps. Thus, this example overwrites
`babel-loader` with `ts-loader`. However, if you are incrementally moving to typescript you may want to run both loaders side by side. If you are running both, add this to your `jest.transform` setup in `package.json`:
```
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/razzle/config/jest/babelTransform.js",
```
This will continue to transform .js files through babel.
================================================
FILE: examples/with-esbuild-loader/package.json
================================================
{
"name": "razzle-examples-with-typescript",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js"
},
"dependencies": {
"express": "^4.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.0.1"
},
"devDependencies": {
"@types/express": "^4.17.0",
"@types/jest": "^26.0.20",
"@types/node": "^14.14.22",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/react-router-dom": "^5.1.7",
"@types/webpack-env": "^1.14.0",
"@typescript-eslint/eslint-plugin": "^4.14.1",
"@typescript-eslint/parser": "^4.14.1",
"esbuild-loader": "^2.11.1",
"eslint": "^7.18.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"html-webpack-plugin": "^4.5.2",
"mini-css-extract-plugin": "^0.9.0",
"prettier": "^2.2.1",
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"razzle-plugin-typescript": "4.2.15",
"ts-jest": "^26.5.0",
"typescript": "^4.1.3",
"webpack": "^4.44.1",
"webpack-dev-server": "^3.11.2"
},
"jest": {
"transform": {
"\\.(ts|tsx)$": "ts-jest",
"\\.css$": "<rootDir>/node_modules/razzle/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/node_modules/razzle/config/jest/fileTransform.js"
},
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.(ts|js)?(x)",
"<rootDir>/src/**/?(*.)(spec|test).(ts|js)?(x)"
],
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"json"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}"
]
}
}
================================================
FILE: examples/with-esbuild-loader/public/robots.txt
================================================
User-agent: *
================================================
FILE: examples/with-esbuild-loader/razzle.config.js
================================================
'use strict';
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
module.exports = {
modifyWebpackConfig(opts) {
const config = Object.assign({}, opts.webpackConfig);
config.resolve.extensions = [...config.resolve.extensions, '.ts', '.tsx'];
// Safely locate Babel-Loader in Razzle's webpack internals
const babelLoaderFinder = makeLoaderFinder('babel-loader');
const babelLoader = config.module.rules.find(babelLoaderFinder);
// Get the correct `include` option, since that hasn't changed.
// This tells Razzle which directories to transform.
const { include } = babelLoader;
// Configure esbuild-loader
const esbuildLoader = {
include,
test: /\.tsx?$/,
use: [
{
loader: require.resolve('esbuild-loader'),
options: {
loader: 'tsx',
target: opts.env.target === 'web' ? 'es6' : 'node12',
tsconfigRaw: require('./tsconfig.json'),
},
},
],
};
// Remove babel
config.module.rules = config.module.rules.filter(
(rule) => !babelLoaderFinder(rule)
);
config.module.rules.push(esbuildLoader);
// Do typechecking in a separate process,
// We can run it only in client builds.
if (opts.env.target === 'web') {
config.plugins.push(
new ForkTsCheckerWebpackPlugin({
typescript: {
build: true,
configFile: './tsconfig.json',
},
})
);
if (opts.env.dev) {
// As suggested by Microsoft's Outlook team, these optimizations
// crank up Webpack x TypeScript perf.
// @see https://medium.com/@kenneth_chau/speeding-up-webpack-typescript-incremental-builds-by-7x-3912ba4c1d15
config.output.pathinfo = false;
config.optimization = {
removeAvailableModules: false,
removeEmptyChunks: false,
splitChunks: false,
};
}
}
return config;
},
};
================================================
FILE: examples/with-esbuild-loader/src/App.css
================================================
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
================================================
FILE: examples/with-esbuild-loader/src/App.test.tsx
================================================
import React from 'react';
import { render } from 'react-dom';
import App from './App';
import { MemoryRouter } from 'react-router-dom';
describe('<App />', () => {
test('renders without exploding', () => {
const div = document.createElement('div');
render(
<MemoryRouter>
<App />
</MemoryRouter>,
div
);
});
});
================================================
FILE: examples/with-esbuild-loader/src/App.tsx
================================================
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import './App.css';
const App = () => (
<Switch>
<Route exact={true} path="/" component={Home} />
</Switch>
);
export default App;
================================================
FILE: examples/with-esbuild-loader/src/Home.css
================================================
.Home {
text-align: center;
}
.Home-logo {
animation: Home-logo-spin infinite 20s linear;
height: 80px;
}
.Home-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.Home-intro {
font-size: large;
}
.Home-resources {
list-style: none;
}
.Home-resources > li {
display: inline-block;
padding: 1rem;
}
@keyframes Home-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
================================================
FILE: examples/with-esbuild-loader/src/Home.tsx
================================================
import React from 'react';
import logo from './react.svg';
import './Home.css';
class Home extends React.Component<{}, {}> {
public render() {
return (
<div className="Home">
<div className="Home-header">
<img src={logo} className="Home-logo" alt="logo" />
<h2>Welcome to Razzle</h2>
</div>
<p className="Home-intro">
To get started, edit <code>src/App.tsx</code> or{' '}
<code>src/Home.tsx</code> and save to reload.
</p>
<ul className="Home-resources">
<li>
<a href="https://github.com/jaredpalmer/razzle">Docs</a>
</li>
<li>
<a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
</li>
<li>
<a href="https://palmer.chat">Community Slack</a>
</li>
</ul>
</div>
);
}
}
export default Home;
================================================
FILE: examples/with-esbuild-loader/src/client.tsx
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
hydrate(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/with-esbuild-loader/src/index.ts
================================================
import express from 'express';
// this require is necessary for server HMR to recover from error
// tslint:disable-next-line:no-var-requires
let app = require('./server').default;
if (module.hot) {
module.hot.accept('./server', () => {
console.log('🔁 HMR Reloading `./server`...');
try {
app = require('./server').default;
} catch (error) {
console.error(error);
}
});
console.info('✅ Server-side HMR Enabled!');
}
const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;
export default express()
.use((req, res) => app.handle(req, res))
.listen(port, (err: Error) => {
if (err) {
console.error(err);
return;
}
console.log(`> Started on port ${port}`);
});
================================================
FILE: examples/with-esbuild-loader/src/server.tsx
================================================
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import App from './App';
let assets: any;
const syncLoadAssets = () => {
assets = require(process.env.RAZZLE_ASSETS_MANIFEST!);
};
syncLoadAssets();
const cssLinksFromAssets = (assets, entrypoint) => {
return assets[entrypoint] ? assets[entrypoint].css ?
assets[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};
const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets[entrypoint] ? assets[entrypoint].js ?
assets[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};
export const renderApp = (req: express.Request, res: express.Response) => {
const context: any = {};
const markup = renderToString(
<StaticRouter context={context} location={req.url}>
<App />
</StaticRouter>
);
if (context.url) {
return { redirect: context.url };
} else {
const html =
// prettier-ignore
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`;
return { html };
}
};
const server = express()
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR!))
.get('/*', (req: express.Request, res: express.Response) => {
const { html = '', redirect = false } = renderApp(req, res);
if (redirect) {
res.redirect(redirect);
} else {
res.send(html);
}
});
export default server;
================================================
FILE: examples/with-esbuild-loader/tsconfig.json
================================================
{
"compilerOptions": {
"allowJs": true,
"allowUnreachableCode": false,
"noFallthroughCasesInSwitch": true,
"allowSyntheticDefaultImports": true,
"downlevelIteration": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"jsx": "react",
"lib": ["es6", "es2015", "es2017", "dom"],
"module": "commonjs",
"moduleResolution": "Node",
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noUnusedLocals": false,
"sourceMap": true,
"strictNullChecks": true,
"strict": false,
"pretty": true,
"suppressImplicitAnyIndexErrors": true,
"target": "esnext"
},
"exclude": [
"node_modules",
"build",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"razzle.config.js"
],
"types": ["typePatches", "node", "webpack-env"]
}
================================================
FILE: examples/with-esbuild-loader/typings/index.d.ts
================================================
declare module '*.svg' {
const content: any;
export default content;
}
================================================
FILE: examples/with-eslint/.eslintrc.json
================================================
{
"extends": "eslint:recommended",
"env": {
"browser": true,
"commonjs": true,
"node": true,
"es6": false
},
"parserOptions": {
"ecmaVersion": 6
},
"rules": {
"no-console": "off",
"strict": ["error", "global"],
"curly": "warn"
}
}
================================================
FILE: examples/with-eslint/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
public/static
.env.*.local
================================================
FILE: examples/with-eslint/README.md
================================================
# Razzle Basic Example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example with-eslint with-eslint
cd with-eslint
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
## Idea behind the example
This is a basic, bare-bones example of how to use razzle. It satisfies the entry points
`src/index.js` for the server and and `src/client.js` for the browser.
================================================
FILE: examples/with-eslint/package.json
================================================
{
"name": "razzle-examples-with-eslint",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js"
},
"dependencies": {
"express": "^4.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.0.0",
"@typescript-eslint/parser": "^4.14.1",
"babel-eslint": "^10.1.0",
"babel-preset-razzle": "4.2.15",
"eslint": "^7.18.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-webpack-plugin": "^2.1.0",
"mini-css-extract-plugin": "^0.9.0",
"html-webpack-plugin": "^4.5.2",
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"razzle-plugin-eslint": "4.2.15",
"react-dev-utils": "^11.0.1",
"webpack": "^4.44.1",
"webpack-dev-server": "^3.11.2"
}
}
================================================
FILE: examples/with-eslint/public/robots.txt
================================================
User-agent: *
================================================
FILE: examples/with-eslint/razzle.config.js
================================================
'use strict';
module.exports = {
options: { verbose: true },
plugins: ['eslint'],
};
================================================
FILE: examples/with-eslint/sandbox.config.json
================================================
{
"container": {
"port": 3000
}
}
================================================
FILE: examples/with-eslint/src/App.css
================================================
body {
margin: 0;
padding: 0;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Helvetica,
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
}
================================================
FILE: examples/with-eslint/src/App.js
================================================
import './App.css';
import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;
export default App;
================================================
FILE: examples/with-eslint/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
describe('<App />', () => {
test('renders without exploding', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
});
================================================
FILE: examples/with-eslint/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';
hydrate(<App />, document.getElementById('root'));
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/with-eslint/src/index.js
================================================
import express from 'express';
let app = require('./server').default;
if (module.hot) {
module.hot.accept('./server', function() {
console.log('🔁 HMR Reloading `./server`...');
try {
app = require('./server').default;
} catch (error) {
console.error(error);
}
});
console.info('✅ Server-side HMR Enabled!');
}
const port = process.env.PORT || 3000;
export default express()
.use((req, res) => app.handle(req, res))
.listen(port, function(err) {
if (err) {
console.error(err);
return;
}
console.log(`> Started on port ${port}`);
});
================================================
FILE: examples/with-eslint/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const cssLinksFromAssets = (assets, entrypoint) => {
return assets[entrypoint] ? assets[entrypoint].css ?
assets[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};
const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets[entrypoint] ? assets[entrypoint].js ?
assets[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};
export const renderApp = (req, res) => {
const markup = renderToString(<App />);
const html =
// prettier-ignore
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`;
return { html };
};
const server = express();
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
const { html } = renderApp(req, res);
res.send(html);
});
export default server;
================================================
FILE: examples/with-experimental-refresh/README.md
================================================
# Razzle Experimental React Refresh Example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example with-experimental-refresh with-experimental-refresh
cd with-experimental-refresh
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
## Idea behind the example
This is a basic, bare-bones example of how to use razzle. It satisfies the entry points
`src/index.js` for the server and and `src/client.js` for the browser.
This is an **experimental** demo of React Fast Refresh.
Please do not use these features in your application or project (yet).
================================================
FILE: examples/with-experimental-refresh/package.json
================================================
{
"name": "razzle-examples-with-experimental-refresh",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "razzle start --verbose",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js"
},
"dependencies": {
"express": "^4.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"mini-css-extract-plugin": "^0.9.0",
"html-webpack-plugin": "^4.5.2",
"webpack": "^4.44.1",
"babel-preset-razzle": "4.2.15",
"webpack-dev-server": "^3.11.2"
}
}
================================================
FILE: examples/with-experimental-refresh/razzle.config.js
================================================
module.exports = {
options: {
enableReactRefresh: true,
},
}
================================================
FILE: examples/with-experimental-refresh/src/App.css
================================================
body {
margin: 0;
padding: 0;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Helvetica,
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
}
================================================
FILE: examples/with-experimental-refresh/src/App.js
================================================
import * as React from 'react'
import { useCallback, useEffect, useState } from 'react'
import ClickCount from './components/ClickCount'
import './global.css'
import styles from './components/ClickCount.module.css'
function a() {
console.log(
// hello
document.body()
)
}
function foo() {
a()
}
function App() {
const [count, setCount] = useState(0)
const increment = useCallback(() => {
setCount(v => v + 1)
}, [setCount])
useEffect(() => {
const r = setInterval(() => {
increment()
}, 250)
return () => {
clearInterval(r)
}
}, [increment])
return (
<main>
<h1>Home</h1>
<div>
<p>Auto Incrementing Value</p>
<p>Current value: {count}</p>
</div>
<hr />
<div>
<p>Component with State</p>
<ClickCount />
</div>
<hr />
<div>
<button
className={styles.btn}
type="button"
onClick={e => {
setTimeout(() => document.parentNode(), 0)
foo()
}}
>
Throw an Error
</button>
</div>
</main>
)
}
export default App;
================================================
FILE: examples/with-experimental-refresh/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
describe('<App />', () => {
test('renders without exploding', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
});
================================================
FILE: examples/with-experimental-refresh/src/client.js
================================================
import * as React from 'react'
import { hydrate } from 'react-dom';
import App from './App';
hydrate(<App />, document.getElementById('root'));
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/with-experimental-refresh/src/components/ClickCount.js
================================================
import * as React from 'react'
import { useCallback, useState } from 'react'
import styles from './ClickCount.module.css'
export default function ClickCount() {
const [count, setCount] = useState(0)
const increment = useCallback(() => {
setCount(v => v + 1)
}, [setCount])
return (
<button className={styles.btn} type="button" onClick={increment}>
Clicks: {count}
</button>
)
}
================================================
FILE: examples/with-experimental-refresh/src/components/ClickCount.module.css
================================================
button.btn {
margin: 0;
border: 1px solid #d1d1d1;
border-radius: 5px;
padding: 0.5em;
vertical-align: middle;
white-space: normal;
background: none;
line-height: 1;
font-size: 1rem;
font-family: inherit;
transition: all 0.2s ease;
}
button.btn {
padding: 0.65em 1em;
background: #0076ff;
color: #fff;
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
button.btn:focus {
outline: 0;
border-color: #0076ff;
}
button.btn:hover {
background: rgba(0, 118, 255, 0.8);
}
button.btn:focus {
box-shadow: 0 0 0 2px rgba(0, 118, 255, 0.5);
}
================================================
FILE: examples/with-experimental-refresh/src/global.css
================================================
body {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
'Arial', sans-serif;
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
font-size: 16px;
line-height: 1.65;
word-break: break-word;
font-kerning: auto;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
hyphens: auto;
}
h2,
h3,
h4 {
margin-top: 1.5em;
}
code,
pre {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace, serif;
font-size: 0.92em;
color: #d400ff;
}
code:before,
code:after {
content: '`';
}
hr {
border: none;
border-bottom: 1px solid #efefef;
margin: 5em auto;
}
================================================
FILE: examples/with-experimental-refresh/src/index.js
================================================
import express from 'express';
let app = require('./server').default;
if (module.hot) {
module.hot.accept('./server', function() {
console.log('🔁 HMR Reloading `./server`...');
try {
app = require('./server').default;
} catch (error) {
console.error(error);
}
});
console.info('✅ Server-side HMR Enabled!');
}
const port = process.env.PORT || 3000;
export default express()
.use((req, res) => app.handle(req, res))
.listen(port, function(err) {
if (err) {
console.error(err);
return;
}
console.log(`> Started on port ${port}`);
});
================================================
FILE: examples/with-experimental-refresh/src/server.js
================================================
import App from './App';
import * as React from 'react'
import express from 'express';
import { renderToString } from 'react-dom/server';
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const cssLinksFromAssets = (assets, entrypoint) => {
return assets[entrypoint] ? assets[entrypoint].css ?
assets[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};
const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets[entrypoint] ? assets[entrypoint].js ?
assets[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};
export const renderApp = (req, res) => {
const markup = renderToString(<App />);
const html =
// prettier-ignore
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`;
return { html };
};
const server = express();
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
const { html } = renderApp(req, res);
res.send(html);
});
export default server;
================================================
FILE: examples/with-fastify/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local
================================================
FILE: examples/with-fastify/README.md
================================================
# Razzle Fastify Example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example with-fastify with-fastify
cd with-fastify
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
## Idea behind the example
This is an example of how to use Razzle with [Fastify](https://www.fastify.io/) and includes [TypeScript](https://github.com/Microsoft/TypeScript).
It is a very similar implementation to `with-koa` but with help from that example itself (found [here](https://github.com/jaredpalmer/razzle/blob/master/examples/with-koa/src/index.js)) and from the Fastify docs for serverless application [Serverless](https://www.fastify.io/docs/latest/Serverless/#should-you-use-fastify-in-a-serverless-platform#Vercel).
### TypeScript
Basic razzle will uses Babel to transform TypeScript to plain JavaScript ( with babel-loader ), and uses TypeScript for type-checking.
Razzle knows how to resolve `.ts` and `.tsx` files out of the box.
================================================
FILE: examples/with-fastify/package.json
================================================
{
"name": "razzle-examples-with-fastify",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js"
},
"dependencies": {
"fastify": "^3.20.2",
"fastify-static": "^4.2.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.1.2"
},
"devDependencies": {
"@testing-library/dom": "^7.29.4",
"@testing-library/jest-dom": "^5.5.0",
"@testing-library/react": "^10.0.3",
"@testing-library/user-event": "^10.1.0",
"@types/express": "^4.17.6",
"@types/jest": "^25.2.1",
"@types/node": "^13.13.2",
"@types/react": "^16.9.34",
"@types/react-dom": "^16.9.6",
"@types/react-router-dom": "^5.1.4",
"@types/webpack-env": "^1.15.2",
"babel-preset-razzle": "4.2.15",
"cross-env": "^7.0.3",
"express": "^4.17.1",
"html-webpack-plugin": "^4.5.2",
"mini-css-extract-plugin": "^0.9.0",
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"typescript": "^4.0.3",
"webpack": "^4.44.1",
"webpack-dev-server": "^3.11.2"
}
}
================================================
FILE: examples/with-fastify/public/robots.txt
================================================
User-agent: *
================================================
FILE: examples/with-fastify/src/App.css
================================================
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
================================================
FILE: examples/with-fastify/src/App.test.tsx
================================================
import { render } from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import App from './App';
test('renders learn react link', () => {
const { getByText } = render(
<MemoryRouter>
<App />
</MemoryRouter>
);
const linkElement = getByText(/welcome to razzles/i);
expect(linkElement).toBeInTheDocument();
});
================================================
FILE: examples/with-fastify/src/App.tsx
================================================
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import './App.css';
import Home from './Home';
const App = () => (
<Switch>
<Route exact={true} path="/" component={Home} />
</Switch>
);
export default App;
================================================
FILE: examples/with-fastify/src/Home.css
================================================
.Home {
text-align: center;
}
.Home-logo {
animation: Home-logo-spin infinite 20s linear;
height: 80px;
}
.Home-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.Home-intro {
font-size: large;
}
.Home-resources {
list-style: none;
}
.Home-resources > li {
display: inline-block;
padding: 1rem;
}
@keyframes Home-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
================================================
FILE: examples/with-fastify/src/Home.tsx
================================================
import React from 'react';
import './Home.css';
import logo from './react.svg';
class Home extends React.Component<{}, {}> {
public render() {
return (
<div className="Home">
<div className="Home-header">
<img src={logo} className="Home-logo" alt="logo" />
<h2>Welcome to Razzle</h2>
</div>
<p className="Home-intro">
To get started, edit <code>src/App.tsx</code> or{' '}
<code>src/Home.tsx</code> and save to reload.
</p>
<ul className="Home-resources">
<li>
<a href="https://github.com/jaredpalmer/razzle">Docs</a>
</li>
<li>
<a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
</li>
<li>
<a href="https://palmer.chat">Community Slack</a>
</li>
</ul>
</div>
);
}
}
export default Home;
================================================
FILE: examples/with-fastify/src/client.tsx
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
hydrate(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/with-fastify/src/index.ts
================================================
import http from 'http';
/**
* This implementation is similar to the `with-koa` example,
* but Fastify does not have a `app#callback()` method.
* Thus, this import implements a similar implementation.
* See `./server.tsx` for more information.
*/
let currentHandler: http.RequestListener = require('./server').default;
const server = http.createServer(currentHandler);
const port = process.env.PORT || 3000;
server.listen(port, () => {
console.log(`🚀 Server Started on Port ${port}`);
});
if (module.hot) {
module.hot.accept('./server', async function() {
console.log('🔁 HMR Reloading `./server`...');
try {
const newHandler: http.RequestListener = require('./server').default;
server.removeListener('request', currentHandler);
server.on('request', newHandler);
currentHandler = newHandler;
} catch (error) {
console.error('ERROR', error);
}
console.log('🚀 Server-side HMR Complete');
});
console.info('✅ Server-side HMR Enabled!');
}
================================================
FILE: examples/with-fastify/src/server.tsx
================================================
import fastify from "fastify";
import fastifyStatic from "fastify-static";
import type { IncomingMessage, ServerResponse } from "http";
import React from "react";
import { renderToString } from "react-dom/server";
import { StaticRouter } from "react-router-dom";
import App from "./App";
let assetsImport: Record<string, any>;
import(process.env.RAZZLE_ASSETS_MANIFEST!).then((res) => {
assetsImport = res.default;
});
const cssLinksFromAssets = (assets: Record<string, any>, entryPoint: string) =>
(assets && assets[entryPoint]?.css?.map((asset: string) => `<link rel="stylesheet" href="${asset}">`).join("")) || "";
const jsScriptTagsFromAssets = (assets: Record<string, any>, entryPoint: string, extra = "") =>
(assets && assets[entryPoint]?.js.map((asset: string) => `<script src="${asset}"${extra}></script>`).join("")) || "";
const app = fastify()
.register(fastifyStatic, { root: process.env.RAZZLE_PUBLIC_DIR!, prefix: "/public" })
.get("/*", async (req, res) => {
const context: { url?: string } = {};
const markup = renderToString(
<StaticRouter context={context} location={req.url}>
<App />
</StaticRouter>,
);
if (context.url) {
return res.redirect(context.url);
}
res
.status(200)
.type("text/html")
.send(
`
<!doctype html>
<html lang="en-GB">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${cssLinksFromAssets(assetsImport, "client")}
</head>
<body>
<div id="root">${markup}</div>
${jsScriptTagsFromAssets(assetsImport, "client", " defer crossorigin")}
</body>
</html>
`,
);
});
/**
* This is a similar implementation to the one found in the Fastify docs,
* which can be found [here]{@link https://www.fastify.io/docs/latest/Serverless/#should-you-use-fastify-in-a-serverless-platform#Vercel}.
* The `app#ready()` is to indicate that all plugins have been loaded and the server is ready,
* then the `app#server#emit()` method is called to handle the incoming request and Fastify handles it from there.
*/
export default async (req: IncomingMessage, res: ServerResponse): Promise<void> => {
await app.ready();
app.server.emit("request", req, res);
};
================================================
FILE: examples/with-fastify/src/setupTests.ts
================================================
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect';
================================================
FILE: examples/with-fastify/tsconfig.json
================================================
{
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"typeRoots": ["node_modules/@types", "typings"]
},
"include": ["src", "typings/*"]
}
================================================
FILE: examples/with-fastify/typings/svg.d.ts
================================================
// https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules
declare module '*.svg' {
const src: string;
export default src;
}
================================================
FILE: examples/with-firebase-functions/.firebaserc
================================================
{
"projects": {
"default": "<firebase-project-id>"
}
}
================================================
FILE: examples/with-firebase-functions/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
public/static
.env.*.local
================================================
FILE: examples/with-firebase-functions/README.md
================================================
# Razzle with Cloud Functions for Firebase example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example with-firebase-functions with-firebase-functions
cd with-firebase-functions
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
Build client and server
```bash
yarn build
```
Deploy to firebase
```bash
yarn deploy
```
Access your app at `<firebase-project-id>.firebaseapp.com`
## Idea behind the example
This is a basic example of how to use razzle with firebase functions and firebase hosting.
================================================
FILE: examples/with-firebase-functions/firebase.json
================================================
{
"hosting": {
"public": "build/public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**/**",
"function": "app"
}
]
},
"functions": {
"source": "."
}
}
================================================
FILE: examples/with-firebase-functions/index.js
================================================
'use strict'
const functions = require('firebase-functions');
const app = require('./server/build/server.bundle.js').default;
exports.app = functions.https.onRequest(app)
================================================
FILE: examples/with-firebase-functions/package.json
================================================
{
"name": "razzle-examples-with-firebase-functions",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"predeploy": "npm run build",
"deploy": "firebase deploy"
},
"dependencies": {
"express": "^4.17.1",
"firebase-admin": "^8.11.0",
"firebase-functions": "^3.6.1",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"mini-css-extract-plugin": "^0.9.0",
"html-webpack-plugin": "^4.5.2",
"webpack": "^4.44.1",
"babel-preset-razzle": "4.2.15",
"webpack-dev-server": "^3.11.2"
}
}
================================================
FILE: examples/with-firebase-functions/public/robots.txt
================================================
User-agent: *
================================================
FILE: examples/with-firebase-functions/razzle.config.js
================================================
'use strict';
const path = require('path');
module.exports = {
modifyWebpackConfig(opts) {
const config = opts.webpackConfig;
if (opts.env.target === 'node' && !opts.env.dev) {
config.entry = path.resolve(__dirname, './src/server.js');
config.output.filename = 'server.bundle.js';
config.output.path = path.resolve(__dirname, './server/build');
config.output.libraryTarget = 'commonjs2';
}
return config;
},
}
================================================
FILE: examples/with-firebase-functions/src/App.css
================================================
body {
margin: 0;
padding: 0;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Helvetica,
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
}
================================================
FILE: examples/with-firebase-functions/src/App.js
================================================
import './App.css';
import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;
export default App;
================================================
FILE: examples/with-firebase-functions/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
describe('<App />', () => {
test('renders without exploding', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
});
================================================
FILE: examples/with-firebase-functions/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';
hydrate(<App />, document.getElementById('root'));
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/with-firebase-functions/src/index.js
================================================
import express from 'express';
let app = require('./server').default;
if (module.hot) {
module.hot.accept('./server', function() {
console.log('🔁 HMR Reloading `./server`...');
try {
app = require('./server').default;
} catch (error) {
console.error(error);
}
});
console.info('✅ Server-side HMR Enabled!');
}
const port = process.env.PORT || 3000;
export default express()
.use((req, res) => app.handle(req, res))
.listen(port, function(err) {
if (err) {
console.error(err);
return;
}
console.log(`> Started on port ${port}`);
});
================================================
FILE: examples/with-firebase-functions/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const cssLinksFromAssets = (assets, entrypoint) => {
return assets[entrypoint] ? assets[entrypoint].css ?
assets[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};
const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets[entrypoint] ? assets[entrypoint].js ?
assets[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};
export const renderApp = (req, res) => {
const markup = renderToString(<App />);
const html =
// prettier-ignore
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`;
return { html };
};
const server = express();
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
const { html } = renderApp(req, res);
res.send(html);
});
export default server;
================================================
FILE: examples/with-heroku/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
public/static
.env.*.local
================================================
FILE: examples/with-heroku/Procfile
================================================
web: yarn start:prod
================================================
FILE: examples/with-heroku/README.md
================================================
# Razzle Heroku Deployment example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example with-heroku with-heroku
cd with-heroku
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
### Deploy to Heroku:
[Heroku](https://www.heroku.com/) manages app deployments with [Git](https://devcenter.heroku.com/articles/git) so:
#### Setup Git:
```bash
git init
git add
git commit -m "Heroku deployment, first commit"
```
#### Setup Heroku:
* Create a Heroku [account](https://signup.heroku.com/)
* Install Heroku [CLI](https://devcenter.heroku.com/articles/heroku-cli) and [authenticate](https://devcenter.heroku.com/articles/authentication)
* Create Heroku app: `heroku create`
* or `heroku create <appname>` if you want to specify an app name (checks for unique app name)
* or `heroku git:remote -a <appname>` if you already created an App in the [dashboard](https://dashboard.heroku.com/apps)
* Verify with `git remote -v`:
```
heroku https://git.heroku.com/<appname>.git (fetch)
heroku https://git.heroku.com/<appname>.git (push)
```
#### Deployment
* `yarn deploy` or `git push heroku master`
* or from another branch, other than **master**: `git push heroku <feature-branch>:master`
* Console should complete with: **_https://appname.herokuapp.com/ deployed to Heroku_**
* Verify app by opening **_https://appname.herokuapp.com/_**
#### 👉 Please note
* Heroku expects a `yarn.lock` file to be able to recognise _yarn_ as your package manager and process the `yarn` commands - so make sure to run `yarn install` before deployment, and to commit the `yarn.lock` file.
## Idea behind the example
This is a basic example of how to use razzle and deploy to [Heroku](https://www.heroku.com/) with [Git](https://devcenter.heroku.com/articles/git).
================================================
FILE: examples/with-heroku/package.json
================================================
{
"name": "razzle-examples-with-heroku",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "razzle start",
"build": "razzle build --noninteractive",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js",
"deploy": "git push heroku master"
},
"dependencies": {
"express": "^4.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"mini-css-extract-plugin": "^0.9.0",
"html-webpack-plugin": "^4.5.2",
"webpack": "^4.44.1",
"babel-preset-razzle": "4.2.15",
"webpack-dev-server": "^3.11.2"
}
}
================================================
FILE: examples/with-heroku/public/robots.txt
================================================
User-agent: *
================================================
FILE: examples/with-heroku/razzle.config.js
================================================
'use strict';
module.exports = {
options: {
forceRuntimeEnvVars: ['HOST', 'PORT']
}
};
================================================
FILE: examples/with-heroku/src/App.css
================================================
body {
margin: 0;
padding: 0;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Helvetica,
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
}
================================================
FILE: examples/with-heroku/src/App.js
================================================
import './App.css';
import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;
export default App;
================================================
FILE: examples/with-heroku/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
describe('<App />', () => {
test('renders without exploding', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
});
================================================
FILE: examples/with-heroku/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';
hydrate(<App />, document.getElementById('root'));
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/with-heroku/src/index.js
================================================
import express from 'express';
let app = require('./server').default;
if (module.hot) {
module.hot.accept('./server', function() {
console.log('🔁 HMR Reloading `./server`...');
try {
app = require('./server').default;
} catch (error) {
console.error(error);
}
});
console.info('✅ Server-side HMR Enabled!');
}
const port = process.env.PORT || 3000;
export default express()
.use((req, res) => app.handle(req, res))
.listen(port, function(err) {
if (err) {
console.error(err);
return;
}
console.log(`> Started on port ${port}`);
});
================================================
FILE: examples/with-heroku/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const cssLinksFromAssets = (assets, entrypoint) => {
return assets[entrypoint] ? assets[entrypoint].css ?
assets[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};
const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets[entrypoint] ? assets[entrypoint].js ?
assets[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};
export const renderApp = (req, res) => {
const markup = renderToString(<App />);
const html =
// prettier-ignore
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`;
return { html };
};
const server = express();
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
const { html } = renderApp(req, res);
res.send(html);
});
export default server;
================================================
FILE: examples/with-hyperapp/.babelrc
================================================
{
"presets": [
"razzle/babel"
],
"plugins": [
[
"transform-react-jsx",
{
"pragma": "h"
}
]
]
}
================================================
FILE: examples/with-hyperapp/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local
================================================
FILE: examples/with-hyperapp/README.md
================================================
# Razzle Hyperapp Example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example with-hyperapp with-hyperapp
cd with-hyperapp
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
## Idea behind the example
This shows how to setup [Hyperapp](https://github.com/hyperapp/hyperapp/) with Razzle.
Here is a list of changes from Razzle's base template:
1. Install `babel-plugin-transform-react-jsx` as a devDependency.
2. Extend Razzle's babel config with a custom `.babelrc`
3. Install `hyperapp` and `"@hyperapp/render`
4. Remove `react`, `react-dom`, `react-router-dom` entirely
5. Update `server.js` to use `@hyperapp/render`'s `withRender` function. Also remove the `<div id="root">` element from our html template since Hyperapp can render to the body.
6. Add a `main.js` file which exports the essential pieces of Hyperapp, which are the `state`, `actions`, and `view`. These are to be shared between the `server.js` and `client.js` files.
================================================
FILE: examples/with-hyperapp/package.json
================================================
{
"name": "razzle-examples-with-hyperapp",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js"
},
"dependencies": {
"@hyperapp/render": "^2.1.0",
"express": "^4.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"hyperapp": "^1.2.5"
},
"devDependencies": {
"babel-plugin-transform-react-jsx": "^6.24.1",
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"mini-css-extract-plugin": "^0.9.0",
"html-webpack-plugin": "^4.5.2",
"webpack": "^4.44.1",
"babel-preset-razzle": "4.2.15",
"webpack-dev-server": "^3.11.2"
}
}
================================================
FILE: examples/with-hyperapp/public/robots.txt
================================================
User-agent: *
Disallow: /api/
Disallow: /publicapi/
Disallow: /query/
================================================
FILE: examples/with-hyperapp/src/App.css
================================================
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
================================================
FILE: examples/with-hyperapp/src/App.js
================================================
/** @jsx h */
import { h } from 'hyperapp';
import HyperappLogo from './hyperapp.svg';
import './App.css';
const App = ({ state, actions }) => (
<div class="App">
<img src={HyperappLogo} alt="Hyperapp Logo" />
<p>Hello Hyperapp!</p>
<h3>Count is {state.count}</h3>
<button onclick={() => actions.up(1)}>up</button>
<button onclick={() => actions.down(1)}>down</button>
</div>
);
export default App;
================================================
FILE: examples/with-hyperapp/src/App.test.js
================================================
/** @jsx h */
import { h } from 'hyperapp';
import { renderToString } from '@hyperapp/render';
import App from './App';
describe('<App />', () => {
test('renders without exploding', () => {
const body = document.createElement('body');
const markup = renderToString(<App state={{}} actions={{}} />);
expect(markup).toContain('App');
});
});
================================================
FILE: examples/with-hyperapp/src/client.js
================================================
/** @jsx h */
import { app } from 'hyperapp';
import { state, actions, view } from './main';
app(state, actions, view, document.body);
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/with-hyperapp/src/index.js
================================================
import express from 'express';
let app = require('./server').default;
if (module.hot) {
module.hot.accept('./server', function() {
console.log('🔁 HMR Reloading `./server`...');
try {
app = require('./server').default;
} catch (error) {
console.error(error);
}
});
console.info('✅ Server-side HMR Enabled!');
}
const port = process.env.PORT || 3000;
export default express()
.use((req, res) => app.handle(req, res))
.listen(port, function(err) {
if (err) {
console.error(err);
return;
}
console.log(`> Started on port ${port}`);
});
================================================
FILE: examples/with-hyperapp/src/main.js
================================================
/** @jsx h */
import { h } from 'hyperapp';
import App from './App';
/* MODEL */
const state = { count: 0 };
/* UPDATE */
const actions = {
down: value => state => ({ count: state.count - value }),
up: value => state => ({ count: state.count + value }),
};
/* VIEW */
const view = (state, actions) => <App state={state} actions={actions} />;
export { state, actions, view };
================================================
FILE: examples/with-hyperapp/src/main.test.js
================================================
import { app } from 'hyperapp';
import { withRender } from '@hyperapp/render';
import { state, actions, view } from './main';
describe('main app', () => {
test('renders without exploding', () => {
const body = document.createElement('body');
const markup = withRender(app)(state, actions, view, body).toString();
expect(markup).toContain('Hello Hyperapp');
});
});
================================================
FILE: examples/with-hyperapp/src/server.js
================================================
/** @jsx h */
import express from 'express';
import { app } from 'hyperapp';
import { withRender } from '@hyperapp/render';
import { state, actions, view } from './main';
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const cssLinksFromAssets = (assets, entrypoint) => {
return assets[entrypoint] ? assets[entrypoint].css ?
assets[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};
const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets[entrypoint] ? assets[entrypoint].js ?
assets[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};
export const renderApp = (req, res) => {
const markup = withRender(app)(state, actions, view).toString();
const html =
// prettier-ignore
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`;
return { html };
};
const server = express();
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
const { html } = renderApp(req, res);
res.send(html);
});
export default server;
================================================
FILE: examples/with-inferno/.babelrc
================================================
{
"presets": [
"razzle/babel"
],
"plugins": [
"inferno"
]
}
================================================
FILE: examples/with-inferno/.eslintrc
================================================
{
"extends": ["plugin:inferno/recommended"],
"plugins": ["inferno"],
"parserOptions": {
"sourceType": "module"
},
"rules": {
"no-unused-vars": 0
}
}
================================================
FILE: examples/with-inferno/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local
================================================
FILE: examples/with-inferno/README.md
================================================
# Razzle Inferno Example
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example with-inferno with-inferno
cd with-inferno
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
## Idea behind the example
This shows how to use [Inferno](https://github.com/infernojs) instead of React in a Razzle project.
Here is a list of changes from Razzle's base template:
1. Install `babel-plugin-inferno` as a devDependency.
2. Extend Razzle's babel config with a custom `.babelrc`
3. Install `inferno`, `inferno-server`, `inferno-devtools`, `inferno-component` as dependencies
4. Remove `react`, `react-dom`, `react-router-dom` entirely
5. Update `server/server.js` to use `inferno-server`'s `renderToString` function.
6. Update `client.js` to configure Inferno for HMR.
================================================
FILE: examples/with-inferno/package.json
================================================
{
"name": "razzle-examples-with-inferno",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js"
},
"dependencies": {
"express": "^4.17.1",
"inferno": "7.4.2",
"inferno-component": "7.4.2",
"inferno-hydrate": "^7.4.2",
"inferno-server": "7.4.2"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"eslint": "^7.18.0",
"eslint-plugin-inferno": "^7.20.1",
"babel-plugin-inferno": "6.1.0",
"inferno-devtools": "7.4.2",
"html-webpack-plugin": "^4.5.2",
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"mini-css-extract-plugin": "^0.9.0",
"webpack": "^4.44.1",
"babel-preset-razzle": "4.2.15",
"webpack-dev-server": "^3.11.2"
}
}
================================================
FILE: examples/with-inferno/public/robots.txt
================================================
User-agent: *
Disallow: /api/
Disallow: /publicapi/
Disallow: /query/
================================================
FILE: examples/with-inferno/src/App.js
================================================
import Inferno from "inferno";
import Component from "inferno-component";
import InfernoLogo from "./inferno.svg";
class App extends Component {
render() {
return (
<div class="inferno">
<img src={InfernoLogo} alt="Inferno Logo" />
Hello Inferno!
</div>
);
}
}
export default App;
================================================
FILE: examples/with-inferno/src/client.js
================================================
import { hydrate } from "inferno-hydrate";
import App from "./App";
if (module.hot) {
require("inferno-devtools");
}
hydrate(<App />, document.getElementById("root"));
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/with-inferno/src/index.js
================================================
import express from 'express';
let app = require('./server').default;
if (module.hot) {
module.hot.accept('./server', function() {
console.log('🔁 HMR Reloading `./server`...');
try {
app = require('./server').default;
} catch (error) {
console.error(error);
}
});
console.info('✅ Server-side HMR Enabled!');
}
const port = process.env.PORT || 3000;
export default express()
.use((req, res) => app.handle(req, res))
.listen(port, function(err) {
if (err) {
console.error(err);
return;
}
console.log(`> Started on port ${port}`);
});
================================================
FILE: examples/with-inferno/src/server.js
================================================
import App from './App';
import Inferno from 'inferno';
import { renderToString } from 'inferno-server';
import express from 'express';
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const cssLinksFromAssets = (assets, entrypoint) => {
return assets[entrypoint] ? assets[entrypoint].css ?
assets[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};
const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets[entrypoint] ? assets[entrypoint].js ?
assets[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};
export const renderApp = (req, res) => {
const markup = renderToString(<App />);
const html =
// prettier-ignore
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`;
return { html };
};
const server = express();
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
const { html } = renderApp(req, res);
res.send(html);
});
export default server;
================================================
FILE: examples/with-jest-snapshots/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local
================================================
FILE: examples/with-jest-snapshots/README.md
================================================
# Using Razzle and Jest Snapshots
## How to use
<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:
```bash
npx create-razzle-app --example with-jest-snapshots with-jest-snapshots
cd with-jest-snapshots
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->
## Idea behind the example
This is an example of how to use [Jest Snapshots](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest) with a Razzle project.
> Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly.
> A typical snapshot test case for a mobile app renders a UI component, takes a screenshot, then compares it to a reference image stored alongside the test. The test will fail if the two images do not match: either the change is unexpected, or the screenshot needs to be updated to the new version of the UI component.
```js
// src/__tests__/Home.test.js
import React from 'react';
import renderer from 'react-test-renderer';
import Home from '../Home';
it('renders Home correctly', () => {
const tree = renderer.create(<Home />).toJSON();
expect(tree).toMatchSnapshot();
});
```
When you run `yarn test`, a snapshot file is generated that looks like:
```
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders Home correctly 1`] = `
<div>
Hello World!
</div>
`;
```
Refer to the [Jest documentation](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest) for more information.
================================================
FILE: examples/with-jest-snapshots/package.json
================================================
{
"name": "razzle-examples-with-jest",
"version": "4.2.15",
"license": "MIT",
"scripts": {
"start": "razzle start",
"test": "razzle test --env=jsdom",
"build": "razzle build",
"start:prod": "NODE_ENV=production node build/server.js"
},
"dependencies": {
"express": "^4.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.1.2"
},
"devDependencies": {
"razzle": "4.2.15",
"razzle-dev-utils": "4.2.15",
"react-test-renderer": "^16.13.1",
"mini-css-extract-plugin": "^0.9.0",
"html-webpack-plugin": "^4.5.2",
"webpack": "^4.44.1",
"babel-preset-razzle": "4.2.15",
"webpack-dev-server": "^3.11.2"
}
}
================================================
FILE: examples/with-jest-snapshots/public/robots.txt
================================================
User-agent: *
Disallow: /api/
Disallow: /publicapi/
Disallow: /query/
================================================
FILE: examples/with-jest-snapshots/src/App.js
===========
gitextract__2juu5zg/
├── .all-contributorsrc
├── .changeset/
│ └── config.json
├── .eslintignore
├── .eslintrc
├── .github/
│ ├── CODE_OF_CONDUCT.md
│ ├── CONTRIBUTING.md
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── Bug_report.md
│ │ ├── Documentation.md
│ │ ├── Feature_request.md
│ │ └── Question.md
│ ├── labels.yml
│ ├── stale.yml
│ └── workflows/
│ ├── examples.yml
│ ├── examples_node14.yml
│ ├── label.yml
│ ├── nodejs.yml
│ ├── release.yml
│ └── test-examples.yml
├── .gitignore
├── .prettierrc
├── LICENSE
├── examples/
│ ├── .gitignore
│ ├── basic/
│ │ ├── README.md
│ │ ├── gitignore
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── basic-server/
│ │ ├── README.md
│ │ ├── gitignore
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── index.js
│ │ └── server.js
│ ├── basic-serverless/
│ │ ├── README.md
│ │ ├── gitignore
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── basic-spa/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ ├── index.html
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ └── client.js
│ ├── with-afterjs/
│ │ └── README.md
│ ├── with-custom-babel-config/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── Home.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-custom-devserver-options/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-custom-environment-variables/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-custom-target-babel-config/
│ │ ├── .babelrc.node
│ │ ├── .babelrc.web
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── Home.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-custom-webpack-config/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-devcert-https/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-development-build/
│ │ ├── README.md
│ │ ├── gitignore
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-elm/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── elm-package.json
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.elm
│ │ ├── Main.elm
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-esbuild-loader/
│ │ ├── .eslintrc.js
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ ├── src/
│ │ │ ├── App.css
│ │ │ ├── App.test.tsx
│ │ │ ├── App.tsx
│ │ │ ├── Home.css
│ │ │ ├── Home.tsx
│ │ │ ├── client.tsx
│ │ │ ├── index.ts
│ │ │ └── server.tsx
│ │ ├── tsconfig.json
│ │ └── typings/
│ │ └── index.d.ts
│ ├── with-eslint/
│ │ ├── .eslintrc.json
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-experimental-refresh/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── components/
│ │ │ ├── ClickCount.js
│ │ │ └── ClickCount.module.css
│ │ ├── global.css
│ │ ├── index.js
│ │ └── server.js
│ ├── with-fastify/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── src/
│ │ │ ├── App.css
│ │ │ ├── App.test.tsx
│ │ │ ├── App.tsx
│ │ │ ├── Home.css
│ │ │ ├── Home.tsx
│ │ │ ├── client.tsx
│ │ │ ├── index.ts
│ │ │ ├── server.tsx
│ │ │ └── setupTests.ts
│ │ ├── tsconfig.json
│ │ └── typings/
│ │ └── svg.d.ts
│ ├── with-firebase-functions/
│ │ ├── .firebaserc
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── firebase.json
│ │ ├── index.js
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-heroku/
│ │ ├── .gitignore
│ │ ├── Procfile
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-hyperapp/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ ├── main.js
│ │ ├── main.test.js
│ │ └── server.js
│ ├── with-inferno/
│ │ ├── .babelrc
│ │ ├── .eslintrc
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-jest-snapshots/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.js
│ │ ├── Home.js
│ │ ├── __tests__/
│ │ │ ├── App.test.js
│ │ │ ├── Home.test.js
│ │ │ └── __snapshots__/
│ │ │ ├── App.test.js.snap
│ │ │ └── Home.test.js.snap
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-jsconfig-paths/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── here-is-extra/
│ │ │ └── extra.js
│ │ ├── jsconfig.json
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-jsxstyle/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── About.js
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── Home.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-koa/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── Home.css
│ │ ├── Home.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-less/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── App.less
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ ├── other.less
│ │ └── server.js
│ ├── with-loadable-components/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── Body.js
│ │ ├── BodyPart.js
│ │ ├── Footer.js
│ │ ├── Header.js
│ │ ├── client.js
│ │ ├── index.js
│ │ ├── server.js
│ │ └── static_export.js
│ ├── with-material-ui/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ ├── server.js
│ │ └── theme.js
│ ├── with-mdx/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── example.md
│ │ ├── index.js
│ │ └── server.js
│ ├── with-module-federation/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── basic-1/
│ │ │ ├── package.json
│ │ │ ├── public/
│ │ │ │ ├── index.html
│ │ │ │ └── robots.txt
│ │ │ ├── razzle.config.js
│ │ │ └── src/
│ │ │ ├── App.js
│ │ │ ├── Button.js
│ │ │ ├── bootstrap.js
│ │ │ └── client.js
│ │ ├── basic-2/
│ │ │ ├── package.json
│ │ │ ├── public/
│ │ │ │ ├── index.html
│ │ │ │ └── robots.txt
│ │ │ ├── razzle.config.js
│ │ │ └── src/
│ │ │ ├── App.js
│ │ │ ├── Button.js
│ │ │ ├── bootstrap.js
│ │ │ └── client.js
│ │ └── package.json
│ ├── with-monorepo/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── basic-1/
│ │ │ ├── package.json
│ │ │ ├── public/
│ │ │ │ └── robots.txt
│ │ │ └── src/
│ │ │ ├── App.css
│ │ │ ├── App.js
│ │ │ ├── App.test.js
│ │ │ ├── client.js
│ │ │ ├── index.js
│ │ │ └── server.js
│ │ ├── basic-2/
│ │ │ ├── package.json
│ │ │ ├── public/
│ │ │ │ └── robots.txt
│ │ │ └── src/
│ │ │ ├── App.css
│ │ │ ├── App.js
│ │ │ ├── App.test.js
│ │ │ ├── client.js
│ │ │ ├── index.js
│ │ │ └── server.js
│ │ └── package.json
│ ├── with-monorepo-without-workspaces/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── basic-1/
│ │ │ ├── public/
│ │ │ │ └── robots.txt
│ │ │ └── src/
│ │ │ ├── App.css
│ │ │ ├── App.js
│ │ │ ├── App.test.js
│ │ │ ├── client.js
│ │ │ ├── index.js
│ │ │ └── server.js
│ │ ├── basic-2/
│ │ │ ├── public/
│ │ │ │ └── robots.txt
│ │ │ └── src/
│ │ │ ├── App.css
│ │ │ ├── App.js
│ │ │ ├── App.test.js
│ │ │ ├── client.js
│ │ │ ├── index.js
│ │ │ └── server.js
│ │ └── package.json
│ ├── with-now/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-now-v2/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── now.json
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-polka/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-preact/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-promise-config/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-react-native-web/
│ │ ├── .babelrc
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-react-router/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── About.js
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── Home.js
│ │ ├── client.js
│ │ ├── index.js
│ │ ├── server.js
│ │ └── static_export.js
│ ├── with-react-server-components/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── notes/
│ │ │ ├── .gitkeep
│ │ │ ├── 1.md
│ │ │ ├── 2.md
│ │ │ ├── 3.md
│ │ │ └── 4.md
│ │ ├── package.json
│ │ ├── plugin/
│ │ │ ├── ReactFlightWebpackLoader.js
│ │ │ ├── ReactFlightWebpackLoader.ts
│ │ │ ├── ReactFlightWebpackNodeLoader.js
│ │ │ ├── ReactFlightWebpackNodeLoader.ts
│ │ │ ├── ReactFlightWebpackNodeRegister.js
│ │ │ ├── ReactFlightWebpackNodeRegister.ts
│ │ │ ├── ReactFlightWebpackPlugin.js
│ │ │ ├── ReactFlightWebpackPlugin.ts
│ │ │ └── __tests__/
│ │ │ ├── ReactFlightWebpackPlugin.spec.ts
│ │ │ └── fixture/
│ │ │ ├── Form.client.js
│ │ │ ├── FormServer.server.js
│ │ │ ├── entry.js
│ │ │ └── package.json
│ │ ├── public/
│ │ │ ├── index.html
│ │ │ ├── robots.txt
│ │ │ └── style.css
│ │ ├── razzle.config.js
│ │ ├── sandbox.config.json
│ │ ├── scripts/
│ │ │ └── seed.js
│ │ └── src/
│ │ ├── App.server.tsx
│ │ ├── Cache.client.tsx
│ │ ├── EditButton.client.tsx
│ │ ├── LocationContext.client.tsx
│ │ ├── Note.server.tsx
│ │ ├── NoteEditor.client.tsx
│ │ ├── NoteList.server.tsx
│ │ ├── NoteListSkeleton.tsx
│ │ ├── NotePreview.tsx
│ │ ├── NoteSkeleton.tsx
│ │ ├── Root.client.tsx
│ │ ├── SearchField.client.tsx
│ │ ├── SidebarNote.client.tsx
│ │ ├── SidebarNote.tsx
│ │ ├── Spinner.tsx
│ │ ├── TextWithMarkdown.tsx
│ │ ├── cli.server.js
│ │ ├── db.server.ts
│ │ ├── index.client.tsx
│ │ └── index.server.ts
│ ├── with-reason-react/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── bsconfig.json
│ │ ├── jsconfig.json
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.re
│ │ ├── CommentList.css
│ │ ├── CommentList.re
│ │ ├── CommentsPage.css
│ │ ├── CommentsPage.re
│ │ ├── NotFound.css
│ │ ├── NotFound.re
│ │ ├── StoryData.re
│ │ ├── StoryListItem.css
│ │ ├── StoryListItem.re
│ │ ├── TopStoriesPage.re
│ │ ├── Utils.re
│ │ ├── client.js
│ │ ├── index.js
│ │ ├── index.re
│ │ ├── link.re
│ │ ├── registerServiceWorker.js
│ │ └── server.js
│ ├── with-redux/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── client/
│ │ │ └── index.js
│ │ ├── common/
│ │ │ ├── actions/
│ │ │ │ └── index.js
│ │ │ ├── api/
│ │ │ │ └── counter.js
│ │ │ ├── components/
│ │ │ │ └── Counter.js
│ │ │ ├── containers/
│ │ │ │ └── App.js
│ │ │ ├── reducers/
│ │ │ │ ├── counter.js
│ │ │ │ └── index.js
│ │ │ └── store/
│ │ │ └── configureStore.js
│ │ ├── index.js
│ │ └── server/
│ │ └── index.js
│ ├── with-scss/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── App.scss
│ │ ├── App.test.js
│ │ ├── app.module.scss
│ │ ├── client.js
│ │ ├── index.js
│ │ ├── other.scss
│ │ └── server.js
│ ├── with-scss-options/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── App.scss
│ │ ├── App.test.js
│ │ ├── app.module.scss
│ │ ├── client.js
│ │ ├── index.js
│ │ ├── other.scss
│ │ ├── prepend.scss
│ │ └── server.js
│ ├── with-single-exposed-port/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-styled-components/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-svelte/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-tailwindcss/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-typeorm-graphql/
│ │ ├── .babelrc
│ │ ├── .eslintrc.js
│ │ ├── .gitignore
│ │ ├── .prettierrc
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ ├── src/
│ │ │ ├── App.css
│ │ │ ├── App.test.tsx
│ │ │ ├── App.tsx
│ │ │ ├── Home.css
│ │ │ ├── Home.tsx
│ │ │ ├── client.tsx
│ │ │ ├── database/
│ │ │ │ └── init_db.ts
│ │ │ ├── declarations.d.ts
│ │ │ ├── index.ts
│ │ │ ├── models/
│ │ │ │ ├── Abilities.ts
│ │ │ │ ├── Pokemon.ts
│ │ │ │ ├── PokemonAbilities.ts
│ │ │ │ ├── Types.ts
│ │ │ │ └── index.ts
│ │ │ ├── schema/
│ │ │ │ ├── Resolvers.ts
│ │ │ │ └── index.ts
│ │ │ ├── server.tsx
│ │ │ └── setupTests.ts
│ │ └── tsconfig.json
│ ├── with-typescript/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── src/
│ │ │ ├── App.css
│ │ │ ├── App.test.tsx
│ │ │ ├── App.tsx
│ │ │ ├── Home.css
│ │ │ ├── Home.tsx
│ │ │ ├── client.tsx
│ │ │ ├── declarations.d.ts
│ │ │ ├── index.ts
│ │ │ ├── server.tsx
│ │ │ └── setupTests.ts
│ │ └── tsconfig.json
│ ├── with-typescript-plugin/
│ │ ├── .eslintrc.js
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ ├── src/
│ │ │ ├── App.css
│ │ │ ├── App.test.tsx
│ │ │ ├── App.tsx
│ │ │ ├── Home.css
│ │ │ ├── Home.tsx
│ │ │ ├── client.tsx
│ │ │ ├── index.ts
│ │ │ └── server.tsx
│ │ ├── tsconfig.json
│ │ └── typings/
│ │ └── index.d.ts
│ ├── with-vendor-bundle/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-vue/
│ │ ├── .eslintrc
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── App.js
│ │ ├── App.vue
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── with-vue-router/
│ │ ├── .eslintrc
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ └── src/
│ │ ├── About.vue
│ │ ├── App.js
│ │ ├── App.vue
│ │ ├── Home.vue
│ │ ├── PageNotFound.vue
│ │ ├── client.js
│ │ ├── index.js
│ │ ├── router.js
│ │ └── server.js
│ ├── with-webpack-dev-server-v4/
│ │ ├── README.md
│ │ ├── gitignore
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── razzle.config.js
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ └── with-webpack-public-path/
│ ├── README.md
│ ├── package.json
│ ├── public/
│ │ └── robots.txt
│ ├── sandbox.config.json
│ └── src/
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── client.js
│ ├── index.js
│ ├── init.client.js
│ ├── init.server.js
│ ├── real.client.js
│ ├── real.server.js
│ └── server.js
├── lerna.json
├── package.json
├── package.meta.json
├── packages/
│ ├── babel-preset-razzle/
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── babel-plugins/
│ │ │ ├── commonjs.js
│ │ │ ├── jsx-pragma.js
│ │ │ ├── no-anonymous-default-export.js
│ │ │ └── optimize-hook-destructuring.js
│ │ ├── index.js
│ │ └── package.json
│ ├── create-razzle-app/
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── bin/
│ │ │ └── create-razzle-app
│ │ ├── index.js
│ │ ├── lib/
│ │ │ ├── index.js
│ │ │ ├── messages.js
│ │ │ ├── officialExamples.js
│ │ │ └── utils/
│ │ │ ├── copy-dir.js
│ │ │ ├── get-install-cmd.js
│ │ │ ├── install.js
│ │ │ ├── load-example.js
│ │ │ ├── load-git-example.js
│ │ │ ├── load-github-example.js
│ │ │ ├── load-npm-example.js
│ │ │ └── output.js
│ │ ├── package.json
│ │ └── templates/
│ │ └── default/
│ │ ├── README.md
│ │ ├── gitignore
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── sandbox.config.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── Home.css
│ │ ├── Home.js
│ │ ├── client.js
│ │ ├── index.js
│ │ └── server.js
│ ├── razzle/
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── babel.js
│ │ ├── bin/
│ │ │ └── razzle.js
│ │ ├── config/
│ │ │ ├── babel-loader/
│ │ │ │ └── razzle-babel-loader.js
│ │ │ ├── createConfigAsync.js
│ │ │ ├── createJestConfig.js
│ │ │ ├── createRazzleTestConfig.js
│ │ │ ├── defaultOptions.js
│ │ │ ├── env.js
│ │ │ ├── jest/
│ │ │ │ ├── babelTransform.js
│ │ │ │ ├── cssTransform.js
│ │ │ │ └── fileTransform.js
│ │ │ ├── loadPlugins.js
│ │ │ ├── loadRazzleConfig.js
│ │ │ ├── modules.js
│ │ │ ├── paths.js
│ │ │ └── razzleDevServer.js
│ │ ├── package.json
│ │ └── scripts/
│ │ ├── build.js
│ │ ├── export.js
│ │ ├── start.js
│ │ └── test.js
│ ├── razzle-dev-utils/
│ │ ├── CHANGELOG.md
│ │ ├── FileSizeReporter.js
│ │ ├── FriendlyErrorsPlugin.js
│ │ ├── README.md
│ │ ├── WebpackConfigHelpers.js
│ │ ├── devServerMajor.js
│ │ ├── formatWebpackMessages.js
│ │ ├── logger.js
│ │ ├── makeLoaderFinder.js
│ │ ├── package.json
│ │ ├── prettyNodeErrors.js
│ │ ├── printErrors.js
│ │ ├── printWarnings.js
│ │ ├── resolveRequest.js
│ │ ├── setPorts.js
│ │ ├── webpackHotDevClient.js
│ │ ├── webpackHotDevClientV4.js
│ │ └── webpackMajor.js
│ ├── razzle-plugin-bundle-analyzer/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ ├── package.json
│ │ └── tests/
│ │ └── index.test.js
│ ├── razzle-plugin-css/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── razzle-plugin-devcert/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── razzle-plugin-elm/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── razzle-plugin-eslint/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── razzle-plugin-graphql/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── helpers.js
│ │ ├── index.js
│ │ ├── package.json
│ │ └── tests/
│ │ └── index.test.js
│ ├── razzle-plugin-inferno/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── razzle-plugin-less/
│ │ ├── .eslintrc
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── helpers.js
│ │ ├── index.js
│ │ ├── package.json
│ │ └── tests/
│ │ └── index.test.js
│ ├── razzle-plugin-manifest/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── razzle-plugin-mdx/
│ │ ├── .eslintrc
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── helpers.js
│ │ ├── index.js
│ │ ├── package.json
│ │ └── tests/
│ │ └── index.test.js
│ ├── razzle-plugin-php/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── razzle-plugin-preact/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── razzle-plugin-react/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── razzle-plugin-scss/
│ │ ├── .eslintrc
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── helpers.js
│ │ ├── index.js
│ │ ├── package.json
│ │ └── tests/
│ │ └── index.test.js
│ ├── razzle-plugin-svelte/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── helpers.js
│ │ ├── index.js
│ │ ├── package.json
│ │ └── tests/
│ │ └── index.test.js
│ ├── razzle-plugin-typescript/
│ │ ├── .eslintrc
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── helpers.js
│ │ ├── index.js
│ │ ├── package.json
│ │ └── tests/
│ │ └── index.test.js
│ ├── razzle-plugin-vue/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ └── razzle-start-server-webpack-plugin/
│ ├── .babelrc
│ ├── .nvmrc
│ ├── CHANGELOG.md
│ ├── LICENSE
│ ├── README.md
│ ├── dist/
│ │ ├── StartServerPlugin.js
│ │ ├── monitor-loader.js
│ │ └── monitor.js
│ ├── package.json
│ ├── src/
│ │ ├── StartServerPlugin.js
│ │ ├── monitor-loader.js
│ │ └── monitor.js
│ └── tests/
│ ├── SilentPlugin.js
│ ├── cases/
│ │ ├── test-project/
│ │ │ ├── index.js
│ │ │ └── webpack.config.js
│ │ └── test-project-hmr/
│ │ ├── index.js
│ │ └── webpack.config.js
│ ├── index.test.js
│ ├── js/
│ │ ├── test-project/
│ │ │ └── server.js
│ │ └── test-project-hmr/
│ │ └── server.js
│ ├── test-project.sh
│ └── utils.js
├── scripts/
│ ├── bootstrap-examples.js
│ ├── build-docs.js
│ ├── exampleDependencyVersions.json
│ ├── internalPeerDependencyVersions.json
│ ├── new-example.js
│ ├── publish-all.js
│ ├── publish-to-npm.js
│ ├── release-notes.js
│ ├── try-example.js
│ ├── update-examples.js
│ └── yalc-publish-all.js
├── test/
│ ├── e2e/
│ │ ├── create-razzle-app.test.js
│ │ ├── razzle-build.test.js
│ │ ├── razzle-start-spa.test.js
│ │ └── razzle-start.test.js
│ ├── examples/
│ │ └── isomorphic-examples.test.js
│ ├── fixtures/
│ │ ├── build-default/
│ │ │ ├── package.json
│ │ │ ├── public/
│ │ │ │ └── nothing.txt
│ │ │ └── src/
│ │ │ ├── client.css
│ │ │ ├── client.js
│ │ │ └── index.js
│ │ ├── build-default-spa/
│ │ │ ├── package.json
│ │ │ ├── public/
│ │ │ │ ├── index.html
│ │ │ │ └── nothing.txt
│ │ │ ├── razzle.config.js
│ │ │ └── src/
│ │ │ ├── client.css
│ │ │ └── client.js
│ │ ├── build-with-babelrc/
│ │ │ ├── .babelrc
│ │ │ ├── package.json
│ │ │ ├── public/
│ │ │ │ └── nothing.txt
│ │ │ └── src/
│ │ │ ├── client.css
│ │ │ ├── client.js
│ │ │ └── index.js
│ │ ├── build-with-custom-config/
│ │ │ ├── package.json
│ │ │ ├── public/
│ │ │ │ └── nothing.txt
│ │ │ ├── razzle.config.js
│ │ │ └── src/
│ │ │ ├── client.css
│ │ │ ├── client.js
│ │ │ └── index.js
│ │ ├── build-with-custom-config-invalid/
│ │ │ ├── package.json
│ │ │ ├── public/
│ │ │ │ └── nothing.txt
│ │ │ ├── razzle.config.js
│ │ │ └── src/
│ │ │ ├── client.css
│ │ │ ├── client.js
│ │ │ └── index.js
│ │ └── util.js
│ ├── jest.e2e.config.json
│ ├── jest.examples.config.js
│ └── utils/
│ └── psKill.js
└── website/
├── .babelrc
├── .github/
│ └── CODEOWNERS
├── .gitignore
├── .nextra/
│ ├── arrow-right.js
│ ├── babel-plugin-nextjs-mdx-patch.js
│ ├── config.js
│ ├── directories.js
│ ├── docsearch.js
│ ├── github-icon.js
│ ├── layout.js
│ ├── nextra-loader.js
│ ├── nextra.js
│ ├── search.js
│ ├── ssg.js
│ ├── styles.css
│ └── theme.js
├── components/
│ ├── features.js
│ ├── logo.js
│ └── video.js
├── jsconfig.json
├── next.config.js
├── nextra.config.js
├── package.json
├── pages/
│ ├── _app.js
│ ├── _document.js
│ ├── change-log.mdx
│ ├── deployment-options/
│ │ ├── aws.md
│ │ ├── azure.md
│ │ ├── layer0.md
│ │ ├── meta.json
│ │ ├── plesk.md
│ │ └── vercel.md
│ ├── docs/
│ │ ├── customization.md
│ │ ├── environment-variables.md
│ │ ├── experimental-features.md
│ │ ├── how-it-works.md
│ │ ├── meta.json
│ │ ├── single-page-applications.md
│ │ ├── static-export.md
│ │ └── upgrade-guide.md
│ ├── getting-started.mdx
│ ├── index.mdx
│ ├── meta.json
│ └── plugins/
│ └── meta.json
├── postcss.config.js
├── public/
│ └── favicon/
│ └── site.webmanifest
└── tailwind.config.js
SYMBOL INDEX (349 symbols across 133 files)
FILE: examples/basic-serverless/razzle.config.js
method modifyWebpackConfig (line 9) | modifyWebpackConfig(opts) {
FILE: examples/with-custom-babel-config/src/Home.js
class MyLuckNo (line 3) | class MyLuckNo extends React.Component {
method componentDidMount (line 6) | componentDidMount() {
method recalculate (line 10) | recalculate() {
method render (line 16) | render() {
FILE: examples/with-custom-devserver-options/razzle.config.js
method modifyWebpackConfig (line 4) | modifyWebpackConfig(opts) {
FILE: examples/with-custom-target-babel-config/src/Home.js
class MyLuckNo (line 3) | class MyLuckNo extends React.Component {
method componentDidMount (line 6) | componentDidMount() {
method recalculate (line 10) | recalculate() {
method render (line 16) | render() {
FILE: examples/with-custom-webpack-config/razzle.config.js
method modifyWebpackConfig (line 4) | modifyWebpackConfig(opts) {
FILE: examples/with-devcert-https/razzle.config.js
method modifyOptions (line 25) | modifyOptions(opts) { // use modifyOptions so certificateFor is called once
method modifyWebpackOptions (line 37) | modifyWebpackOptions(opts) {
method modifyWebpackConfig (line 45) | modifyWebpackConfig(opts) {
FILE: examples/with-elm/razzle.config.js
method modifyWebpackOptions (line 4) | modifyWebpackOptions({
method modifyWebpackConfig (line 19) | modifyWebpackConfig(opts) {
FILE: examples/with-esbuild-loader/razzle.config.js
method modifyWebpackConfig (line 7) | modifyWebpackConfig(opts) {
FILE: examples/with-esbuild-loader/src/Home.tsx
class Home (line 6) | class Home extends React.Component<{}, {}> {
method render (line 7) | public render() {
FILE: examples/with-experimental-refresh/src/App.js
function a (line 7) | function a() {
function foo (line 14) | function foo() {
function App (line 18) | function App() {
FILE: examples/with-experimental-refresh/src/components/ClickCount.js
function ClickCount (line 5) | function ClickCount() {
FILE: examples/with-fastify/src/Home.tsx
class Home (line 6) | class Home extends React.Component<{}, {}> {
method render (line 7) | public render() {
FILE: examples/with-firebase-functions/razzle.config.js
method modifyWebpackConfig (line 4) | modifyWebpackConfig(opts) {
FILE: examples/with-jsxstyle/src/About.js
class About (line 4) | class About extends Component {
method render (line 5) | render() {
FILE: examples/with-jsxstyle/src/Home.js
class Home (line 4) | class Home extends Component {
method render (line 5) | render() {
FILE: examples/with-jsxstyle/src/server.js
method onInsertRule (line 28) | onInsertRule(css) {
FILE: examples/with-koa/src/Home.js
class Home (line 5) | class Home extends React.Component {
method render (line 6) | render() {
FILE: examples/with-loadable-components/razzle.config.js
method modifyWebpackConfig (line 5) | modifyWebpackConfig(opts) {
FILE: examples/with-module-federation/basic-1/razzle.config.js
method modifyWebpackConfig (line 11) | modifyWebpackConfig(opts) {
FILE: examples/with-module-federation/basic-2/razzle.config.js
method modifyWebpackConfig (line 11) | modifyWebpackConfig(opts) {
FILE: examples/with-preact/razzle.config.js
method modifyWebpackConfig (line 9) | modifyWebpackConfig(opts) {
FILE: examples/with-promise-config/razzle.config.js
method modifyWebpackConfig (line 4) | modifyWebpackConfig(opts) {
FILE: examples/with-react-native-web/razzle.config.js
method modifyWebpackConfig (line 4) | modifyWebpackConfig(opts) {
FILE: examples/with-react-native-web/src/App.js
class App (line 4) | class App extends React.Component {
method render (line 5) | render() {
FILE: examples/with-react-server-components/plugin/ReactFlightWebpackLoader.js
function _default (line 9) | function _default(source) {
FILE: examples/with-react-server-components/plugin/ReactFlightWebpackNodeLoader.js
function _interopRequireDefault (line 12) | function _interopRequireDefault(obj) { return obj && obj.__esModule ? ob...
function resolve (line 26) | async function resolve(specifier, context, defaultResolve) {
function getSource (line 63) | async function getSource(url, context, defaultGetSource) {
function addExportNames (line 69) | function addExportNames(names, node) {
function resolveClientImport (line 106) | function resolveClientImport(specifier, parentURL) {
function loadClientImport (line 124) | async function loadClientImport(url, defaultTransformSource) {
function parseExportNamesInto (line 141) | async function parseExportNamesInto(transformedSource, names, parentURL,...
function transformSource (line 203) | async function transformSource(source, context, defaultTransformSource) {
FILE: examples/with-react-server-components/plugin/ReactFlightWebpackNodeLoader.ts
type ResolveContext (line 12) | type ResolveContext = {
type ResolveFunction (line 17) | type ResolveFunction = (
type GetSourceContext (line 23) | type GetSourceContext = {
type GetSourceFunction (line 27) | type GetSourceFunction = (
type TransformSourceContext (line 33) | type TransformSourceContext = {
type TransformSourceFunction (line 38) | type TransformSourceFunction = (
type Source (line 44) | type Source = string | ArrayBuffer | Uint8Array;
function resolve (line 51) | async function resolve(
function getSource (line 93) | async function getSource(
function addExportNames (line 103) | function addExportNames(names, node) {
function resolveClientImport (line 133) | function resolveClientImport(
function loadClientImport (line 151) | async function loadClientImport(
function parseExportNamesInto (line 173) | async function parseExportNamesInto(
function transformSource (line 230) | async function transformSource(
FILE: examples/with-react-server-components/plugin/ReactFlightWebpackPlugin.js
function _interopRequireDefault (line 22) | function _interopRequireDefault(obj) { return obj && obj.__esModule ? ob...
function _defineProperty (line 24) | function _defineProperty(obj, key, value) { if (key in obj) { Object.def...
class ClientReferenceDependency (line 26) | class ClientReferenceDependency extends _ModuleDependency.default {
method constructor (line 27) | constructor(request) {
method type (line 31) | get type() {
constant PLUGIN_NAME (line 45) | const PLUGIN_NAME = 'React Server Plugin';
class ReactFlightWebpackPlugin (line 47) | class ReactFlightWebpackPlugin {
method constructor (line 48) | constructor(options) {
method apply (line 88) | apply(compiler) {
method resolveAllClientFiles (line 196) | resolveAllClientFiles(context, contextResolver, fs, contextModuleFacto...
FILE: examples/with-react-server-components/plugin/ReactFlightWebpackPlugin.ts
class ClientReferenceDependency (line 20) | class ClientReferenceDependency extends ModuleDependency {
method constructor (line 21) | constructor(request) {
method type (line 25) | get type() {
type ClientReferenceSearchPath (line 42) | type ClientReferenceSearchPath = {
type ClientReferencePath (line 49) | type ClientReferencePath = string | ClientReferenceSearchPath;
type Options (line 51) | type Options = {
constant PLUGIN_NAME (line 58) | const PLUGIN_NAME = 'React Server Plugin';
class ReactFlightWebpackPlugin (line 60) | class ReactFlightWebpackPlugin {
method constructor (line 65) | constructor(options: Options) {
method apply (line 102) | apply(compiler: any) {
method resolveAllClientFiles (line 227) | resolveAllClientFiles(
FILE: examples/with-react-server-components/plugin/__tests__/ReactFlightWebpackPlugin.spec.ts
function getDependencies (line 4) | function getDependencies(mode) {
function assert (line 208) | function assert(manifestContents) {
FILE: examples/with-react-server-components/plugin/__tests__/fixture/Form.client.js
function Form (line 1) | function Form() {
FILE: examples/with-react-server-components/plugin/__tests__/fixture/FormServer.server.js
function Foo (line 1) | function Foo() {
FILE: examples/with-react-server-components/razzle.config.js
method modifyPaths (line 13) | modifyPaths(opts) {
method modifyWebpackOptions (line 19) | modifyWebpackOptions(opts) {
method modifyWebpackConfig (line 35) | modifyWebpackConfig(opts) {
FILE: examples/with-react-server-components/scripts/seed.js
constant NOTES_PATH (line 18) | const NOTES_PATH = './notes';
function randomDateBetween (line 25) | function randomDateBetween(start, end) {
function seed (line 69) | async function seed() {
FILE: examples/with-react-server-components/src/App.server.tsx
function App (line 10) | function App({ selectedId, isEditing, searchText }) {
FILE: examples/with-react-server-components/src/Cache.client.tsx
function createResponseCache (line 4) | function createResponseCache() {
function useRefresh (line 8) | function useRefresh() {
function useServerResponse (line 15) | function useServerResponse(location) {
FILE: examples/with-react-server-components/src/EditButton.client.tsx
function EditButton (line 5) | function EditButton({ noteId, children }) {
FILE: examples/with-react-server-components/src/LocationContext.client.tsx
function useLocation (line 9) | function useLocation() {
FILE: examples/with-react-server-components/src/Note.server.tsx
function Note (line 19) | function Note({ selectedId, isEditing }) {
FILE: examples/with-react-server-components/src/NoteEditor.client.tsx
function NoteEditor (line 16) | function NoteEditor({ noteId, initialTitle, initialBody }) {
function useMutation (line 138) | function useMutation({ endpoint, method }) {
FILE: examples/with-react-server-components/src/NoteList.server.tsx
function NoteList (line 13) | function NoteList({ searchText }) {
FILE: examples/with-react-server-components/src/NoteListSkeleton.tsx
function NoteListSkeleton (line 9) | function NoteListSkeleton() {
FILE: examples/with-react-server-components/src/NotePreview.tsx
function NotePreview (line 11) | function NotePreview({ body }) {
FILE: examples/with-react-server-components/src/NoteSkeleton.tsx
function NoteEditorSkeleton (line 9) | function NoteEditorSkeleton() {
function NotePreviewSkeleton (line 47) | function NotePreviewSkeleton() {
function NoteSkeleton (line 75) | function NoteSkeleton({ isEditing }) {
FILE: examples/with-react-server-components/src/Root.client.tsx
function Root (line 7) | function Root({ initialCache }) {
function Content (line 17) | function Content() {
function Error (line 31) | function Error({ error }) {
FILE: examples/with-react-server-components/src/SearchField.client.tsx
function SearchField (line 14) | function SearchField() {
FILE: examples/with-react-server-components/src/SidebarNote.client.tsx
function SidebarNote (line 13) | function SidebarNote({ id, title, children, expandedChildren }) {
FILE: examples/with-react-server-components/src/SidebarNote.tsx
function SidebarNote (line 15) | function SidebarNote({ note }) {
FILE: examples/with-react-server-components/src/Spinner.tsx
function Spinner (line 9) | function Spinner({ active = true }) {
FILE: examples/with-react-server-components/src/TextWithMarkdown.tsx
function TextWithMarkdown (line 26) | function TextWithMarkdown({ text }) {
FILE: examples/with-react-server-components/src/index.server.ts
function handleErrors (line 28) | function handleErrors(fn) {
function renderReactTree (line 54) | async function renderReactTree(res, props) {
function sendResponse (line 64) | function sendResponse(req, res, redirectToId) {
constant NOTES_PATH (line 82) | const NOTES_PATH = path.resolve(__dirname, '../notes');
function waitForWebpack (line 177) | async function waitForWebpack() {
FILE: examples/with-redux/src/common/actions/index.js
constant SET_COUNTER (line 1) | const SET_COUNTER = 'SET_COUNTER';
constant INCREMENT_COUNTER (line 2) | const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
constant DECREMENT_COUNTER (line 3) | const DECREMENT_COUNTER = 'DECREMENT_COUNTER';
FILE: examples/with-redux/src/common/containers/App.js
function mapDispatchToProps (line 10) | function mapDispatchToProps(dispatch) {
FILE: examples/with-single-exposed-port/razzle.config.js
method modifyWebpackConfig (line 4) | modifyWebpackConfig(opts) {
FILE: examples/with-tailwindcss/razzle.config.js
method modifyWebpackOptions (line 4) | modifyWebpackOptions(opts) {
FILE: examples/with-tailwindcss/src/App.js
function App (line 6) | function App() {
FILE: examples/with-typeorm-graphql/razzle.config.js
method modifyWebpackConfig (line 8) | modifyWebpackConfig({
method modifyWebpackOptions (line 28) | modifyWebpackOptions({
FILE: examples/with-typeorm-graphql/src/models/Abilities.ts
class Abilities (line 4) | @Entity()
FILE: examples/with-typeorm-graphql/src/models/Pokemon.ts
class Pokemon (line 11) | @Entity()
method constructor (line 29) | constructor(type: Types) {
FILE: examples/with-typeorm-graphql/src/models/PokemonAbilities.ts
class PokemonAbilities (line 6) | @Entity()
method constructor (line 29) | constructor(pokemon: Pokemon, ability: Abilities) {
FILE: examples/with-typeorm-graphql/src/models/Types.ts
class Types (line 4) | @Entity()
FILE: examples/with-typeorm-graphql/src/schema/Resolvers.ts
class Resolvers (line 9) | @Resolver()
method allTypes (line 12) | async allTypes(): Promise<Types[]> {
method allAbilities (line 17) | async allAbilities(): Promise<Abilities[]> {
method allPokemon (line 22) | async allPokemon(): Promise<Pokemon[]> {
method allPokemonAbilities (line 27) | async allPokemonAbilities(): Promise<PokemonAbilities[]> {
method getPokemonPerName (line 32) | async getPokemonPerName(@Arg('name') name: string): Promise<Pokemon | ...
method getPokemonAbilities (line 37) | async getPokemonAbilities(@Arg('name') name: string): Promise<Array<ty...
method createPokemon (line 45) | async createPokemon(@Arg('name') name: string): Promise<Pokemon> {
FILE: examples/with-typescript-plugin/src/Home.tsx
class Home (line 6) | class Home extends React.Component<{}, {}> {
method render (line 7) | public render() {
FILE: examples/with-typescript/src/Home.tsx
class Home (line 6) | class Home extends React.Component<{}, {}> {
method render (line 7) | public render() {
FILE: examples/with-vendor-bundle/razzle.config.js
method modifyWebpackConfig (line 4) | modifyWebpackConfig(opts) {
FILE: examples/with-vue-router/src/App.js
function createVueApp (line 7) | function createVueApp() {
FILE: examples/with-vue/src/App.js
function createVueApp (line 5) | function createVueApp() {
FILE: examples/with-webpack-dev-server-v4/razzle.config.js
method modifyWebpackConfig (line 2) | modifyWebpackConfig(opts) {
FILE: packages/create-razzle-app/lib/index.js
function isSafeToCreateProjectIn (line 149) | function isSafeToCreateProjectIn(projectPath, projectName) {
function installWithMessageFactory (line 218) | function installWithMessageFactory(opts, isExample = false) {
FILE: packages/create-razzle-app/lib/utils/install.js
function getInstallArgs (line 61) | function getInstallArgs(cmd, packages, opts) {
function getAddArgs (line 72) | function getAddArgs(cmd, packages, opts, dev) {
FILE: packages/create-razzle-app/lib/utils/load-example.js
constant UUID (line 9) | const UUID = require('pure-uuid');
FILE: packages/create-razzle-app/lib/utils/load-git-example.js
constant UUID (line 6) | const UUID = require('pure-uuid');
FILE: packages/create-razzle-app/lib/utils/load-github-example.js
constant UUID (line 9) | const UUID = require('pure-uuid');
FILE: packages/create-razzle-app/lib/utils/load-npm-example.js
constant UUID (line 8) | const UUID = require('pure-uuid');
FILE: packages/create-razzle-app/lib/utils/output.js
function cleanup (line 50) | function cleanup() {
FILE: packages/create-razzle-app/templates/default/src/Home.js
class Home (line 5) | class Home extends React.Component {
method render (line 6) | render() {
FILE: packages/razzle-dev-utils/FileSizeReporter.js
function canReadAsset (line 18) | function canReadAsset(asset) {
function printFileSizesAfterBuild (line 27) | function printFileSizesAfterBuild(
function removeFileNameHash (line 107) | function removeFileNameHash(buildFolder, fileName) {
function getDifferenceLabel (line 119) | function getDifferenceLabel(currentSize, previousSize) {
function measureFileSizesBeforeBuild (line 134) | function measureFileSizesBeforeBuild(buildFolder) {
function removeFilePrefix (line 154) | function removeFilePrefix(buildFolder, fileName) {
function getFileNamesAsStat (line 158) | function getFileNamesAsStat(buildFolder) {
FILE: packages/razzle-dev-utils/FriendlyErrorsPlugin.js
constant WEBPACK_COMPILING (line 8) | let WEBPACK_COMPILING = false;
constant WEBPACK_DONE (line 9) | let WEBPACK_DONE = false;
class WebpackErrorsPlugin (line 14) | class WebpackErrorsPlugin {
method constructor (line 15) | constructor(options) {
method apply (line 22) | apply(compiler) {
FILE: packages/razzle-dev-utils/WebpackConfigHelpers.js
class WebpackConfigHelpers (line 10) | class WebpackConfigHelpers {
method constructor (line 11) | constructor(cwd) {
method getLoaders (line 23) | getLoaders(config) {
method getRules (line 39) | getRules(config) {
method getPlugins (line 54) | getPlugins(config) {
method getRulesByMatchingFile (line 67) | getRulesByMatchingFile(config, file) {
method getLoadersByName (line 85) | getLoadersByName(config, name) {
method getPluginsByName (line 114) | getPluginsByName(config, name) {
method getPluginsByType (line 132) | getPluginsByType(config, type) {
method getResolveExtensions (line 136) | getResolveExtensions(config) {
method addResolveExtensions (line 140) | addResolveExtensions(config, ext) {
method makeLoaderFinder (line 144) | makeLoaderFinder(loaderName) {
FILE: packages/razzle-dev-utils/formatWebpackMessages.js
function razzleFormatWebpackMessages (line 5) | function razzleFormatWebpackMessages(messages) {
FILE: packages/razzle-dev-utils/prettyNodeErrors.js
function pretty (line 9) | function pretty(error) {
function usePrettyErrors (line 32) | function usePrettyErrors(transform) {
FILE: packages/razzle-dev-utils/printErrors.js
function printErrors (line 12) | function printErrors(summary, errors, verbose) {
FILE: packages/razzle-dev-utils/printWarnings.js
function printWarnings (line 12) | function printWarnings(summary, warnings, verbose) {
FILE: packages/razzle-dev-utils/resolveRequest.js
function resolveRequest (line 4) | function resolveRequest(req, issuer) {
FILE: packages/razzle-dev-utils/webpackHotDevClient.js
function clearOutdatedErrors (line 94) | function clearOutdatedErrors() {
function handleSuccess (line 104) | function handleSuccess() {
function handleWarnings (line 122) | function handleWarnings(warnings) {
function handleErrors (line 167) | function handleErrors(errors) {
function tryDismissErrorOverlay (line 193) | function tryDismissErrorOverlay() {
function handleAvailableHash (line 200) | function handleAvailableHash(hash) {
function isUpdateAvailable (line 232) | function isUpdateAvailable() {
function canApplyUpdates (line 240) | function canApplyUpdates() {
function tryApplyUpdates (line 245) | function tryApplyUpdates(onHotUpdateSuccess) {
FILE: packages/razzle-dev-utils/webpackHotDevClientV4.js
function clearOutdatedErrors (line 96) | function clearOutdatedErrors() {
function handleSuccess (line 106) | function handleSuccess() {
function handleWarnings (line 124) | function handleWarnings(warnings) {
function handleErrors (line 169) | function handleErrors(errors) {
function tryDismissErrorOverlay (line 195) | function tryDismissErrorOverlay() {
function handleAvailableHash (line 202) | function handleAvailableHash(hash) {
function isUpdateAvailable (line 234) | function isUpdateAvailable() {
function canApplyUpdates (line 242) | function canApplyUpdates() {
function tryApplyUpdates (line 247) | function tryApplyUpdates(onHotUpdateSuccess) {
FILE: packages/razzle-plugin-bundle-analyzer/index.js
method modifyWebpackConfig (line 15) | modifyWebpackConfig(opts) {
FILE: packages/razzle-plugin-devcert/index.js
method modifyOptions (line 5) | modifyOptions(opts) {
method modifyWebpackOptions (line 18) | modifyWebpackOptions(opts) {
method modifyWebpackConfig (line 28) | modifyWebpackConfig({
FILE: packages/razzle-plugin-elm/index.js
method modifyWebpackConfig (line 7) | modifyWebpackConfig(opts) {
FILE: packages/razzle-plugin-eslint/index.js
method modifyWebpackConfig (line 8) | modifyWebpackConfig(opts) {
FILE: packages/razzle-plugin-graphql/index.js
method modifyWebpackOptions (line 4) | modifyWebpackOptions(opts) {
method modifyWebpackConfig (line 9) | modifyWebpackConfig(opts) {
FILE: packages/razzle-plugin-inferno/index.js
method modifyWebpackConfig (line 4) | modifyWebpackConfig(opts) {
FILE: packages/razzle-plugin-less/index.js
method modifyWebpackConfig (line 18) | modifyWebpackConfig(opts) {
FILE: packages/razzle-plugin-manifest/index.js
method modifyWebpackConfig (line 7) | modifyWebpackConfig({
FILE: packages/razzle-plugin-mdx/index.js
method modifyWebpackConfig (line 9) | modifyWebpackConfig(opts) {
method modifyWebpackOptions (line 51) | modifyWebpackOptions({
FILE: packages/razzle-plugin-php/index.js
method modifyWebpackConfig (line 6) | modifyWebpackConfig(opts) {
FILE: packages/razzle-plugin-scss/index.js
method modifyWebpackConfig (line 18) | modifyWebpackConfig(opts) {
FILE: packages/razzle-plugin-svelte/index.js
method modifyWebpackOptions (line 4) | modifyWebpackOptions(opts) {
method modifyWebpackConfig (line 9) | modifyWebpackConfig(opts) {
FILE: packages/razzle-plugin-typescript/index.js
method modifyWebpackConfig (line 20) | modifyWebpackConfig(opts) {
FILE: packages/razzle-plugin-vue/index.js
method modifyWebpackConfig (line 9) | modifyWebpackConfig(opts) {
FILE: packages/razzle-start-server-webpack-plugin/dist/StartServerPlugin.js
function _interopRequireDefault (line 14) | function _interopRequireDefault(obj) { return obj && obj.__esModule ? ob...
class StartServerPlugin (line 18) | class StartServerPlugin {
method constructor (line 19) | constructor(options) {
method _info (line 83) | _info(msg, ...args) {
method _error (line 87) | _error(msg, ...args) {
method _worker_error (line 91) | _worker_error(msg, ...args) {
method _worker_info (line 95) | _worker_info(msg, ...args) {
method _enableRestarting (line 99) | _enableRestarting() {
method _getScript (line 116) | _getScript(compilation) {
method _getExecArgv (line 145) | _getExecArgv() {
method _handleChildQuit (line 153) | _handleChildQuit() {
method _handleChildExit (line 157) | _handleChildExit(code, signal) {
method _handleWebpackExit (line 187) | _handleWebpackExit() {
method _handleChildError (line 193) | _handleChildError(err) {
method _handleProcessKill (line 203) | _handleProcessKill() {
method _handleChildMessage (line 213) | _handleChildMessage(message) {
method _runWorker (line 227) | _runWorker(callback) {
method _hmrWorker (line 265) | _hmrWorker(compilation, callback) {
method afterEmit (line 284) | afterEmit(compilation, callback) {
method _getMonitor (line 296) | _getMonitor() {
method _amendEntry (line 302) | _amendEntry(entry) {
method apply (line 319) | apply(compiler) {
FILE: packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js
function _interopRequireDefault (line 10) | function _interopRequireDefault(obj) { return obj && obj.__esModule ? ob...
FILE: packages/razzle-start-server-webpack-plugin/src/StartServerPlugin.js
class StartServerPlugin (line 8) | class StartServerPlugin {
method constructor (line 9) | constructor(options) {
method _info (line 58) | _info(msg, ...args) {
method _error (line 62) | _error(msg, ...args) {
method _worker_error (line 66) | _worker_error(msg, ...args) {
method _worker_info (line 70) | _worker_info(msg, ...args) {
method _enableRestarting (line 74) | _enableRestarting() {
method _getScript (line 89) | _getScript(compilation) {
method _getExecArgv (line 115) | _getExecArgv() {
method _handleChildQuit (line 121) | _handleChildQuit() {
method _handleChildExit (line 125) | _handleChildExit(code, signal) {
method _handleWebpackExit (line 149) | _handleWebpackExit() {
method _handleChildError (line 155) | _handleChildError(err) {
method _handleProcessKill (line 164) | _handleProcessKill() {
method _handleChildMessage (line 174) | _handleChildMessage(message) {
method _runWorker (line 186) | _runWorker(callback) {
method _hmrWorker (line 220) | _hmrWorker(compilation, callback) {
method afterEmit (line 235) | afterEmit(compilation, callback) {
method _getMonitor (line 247) | _getMonitor() {
method _amendEntry (line 252) | _amendEntry(entry) {
method apply (line 270) | apply(compiler) {
FILE: packages/razzle-start-server-webpack-plugin/tests/SilentPlugin.js
class SilentPlugin (line 3) | class SilentPlugin extends Plugin {
method _worker_error (line 4) | _worker_error(msg, ...args) {}
method _worker_info (line 6) | _worker_info(msg, ...args) {}
FILE: packages/razzle-start-server-webpack-plugin/tests/js/test-project-hmr/server.js
function hotDownloadUpdateChunk (line 3) | function hotDownloadUpdateChunk(chunkId) {
function hotDownloadManifest (line 9) | function hotDownloadManifest() {
function hotDisposeChunk (line 19) | function hotDisposeChunk(chunkId) {
function hotCreateRequire (line 35) | function hotCreateRequire(moduleId) {
function hotCreateModule (line 111) | function hotCreateModule(moduleId) {
function hotSetStatus (line 198) | function hotSetStatus(newStatus) {
function toModuleId (line 215) | function toModuleId(id) {
function hotCheck (line 220) | function hotCheck(apply) {
function hotAddUpdateChunk (line 261) | function hotAddUpdateChunk(chunkId, moreModules) {
function hotEnsureUpdateChunk (line 275) | function hotEnsureUpdateChunk(chunkId) {
function hotUpdateDownloaded (line 285) | function hotUpdateDownloaded() {
function hotApply (line 317) | function hotApply(options) {
function hotApplyInternal (line 324) | function hotApplyInternal(options) {
function hotApplyInvalidatedModules (line 714) | function hotApplyInvalidatedModules() {
function hotApplyInvalidatedModule (line 723) | function hotApplyInvalidatedModule(moduleId) {
function __webpack_require__ (line 732) | function __webpack_require__(moduleId) {
FILE: packages/razzle-start-server-webpack-plugin/tests/js/test-project/server.js
function __webpack_require__ (line 6) | function __webpack_require__(moduleId) {
FILE: packages/razzle-start-server-webpack-plugin/tests/utils.js
function compareDirectory (line 5) | function compareDirectory(actual, expected) {
function compareWarning (line 27) | function compareWarning(actual, expectedFile) {
FILE: packages/razzle/bin/razzle.js
function runCommand (line 50) | function runCommand(script, node_args, script_args) {
FILE: packages/razzle/config/createConfigAsync.js
method onBeforeSetupMiddleware (line 874) | onBeforeSetupMiddleware(server) {
method before (line 890) | before(app) {
FILE: packages/razzle/config/createJestConfig.js
function getSetupTestsFilePath (line 9) | function getSetupTestsFilePath(paths) {
FILE: packages/razzle/config/env.js
function setupEnvironment (line 6) | function setupEnvironment(paths) {
constant RAZZLE (line 38) | const RAZZLE = /^RAZZLE_/i;
function getClientEnvironment (line 40) | function getClientEnvironment(target, is_dev, options, paths) {
FILE: packages/razzle/config/jest/cssTransform.js
method process (line 7) | process() {
method getCacheKey (line 10) | getCacheKey() {
FILE: packages/razzle/config/jest/fileTransform.js
method process (line 9) | process(src, filename) {
FILE: packages/razzle/config/loadPlugins.js
function loadPlugin (line 5) | function loadPlugin(plugin, paths) {
function loadPlugins (line 67) | function loadPlugins(plugins, paths) {
FILE: packages/razzle/config/modules.js
function getAdditionalModulePaths (line 8) | function getAdditionalModulePaths(options = {}, paths) {
function getAdditionalAliases (line 40) | function getAdditionalAliases(options = {}, paths) {
function getAdditionalIncludes (line 66) | function getAdditionalIncludes(additionalAliases) {
function getModules (line 70) | function getModules(paths) {
FILE: packages/razzle/config/paths.js
function ensureSlash (line 16) | function ensureSlash(path, needsSlash) {
function getServedPath (line 46) | function getServedPath(appPackageJson) {
FILE: packages/razzle/config/razzleDevServer.js
class razzleDevServer (line 6) | class razzleDevServer extends devServer {
method constructor (line 7) | constructor(compiler, options = {}, _log) {
method showStatus (line 14) | showStatus() {
FILE: packages/razzle/scripts/build.js
function compile (line 300) | function compile(config, cb, internal_error_cb) {
FILE: packages/razzle/scripts/export.js
function static_export (line 68) | async function static_export(previousFileSizes) {
FILE: packages/razzle/scripts/start.js
function main (line 51) | function main() {
function compile (line 219) | function compile(config, verbose) {
function formatInspectFlag (line 230) | function formatInspectFlag(cliArgs, flag) {
FILE: scripts/build-docs.js
function matchesStartDocToc (line 21) | function matchesStartDocToc(line) {
function matchesEndDocToc (line 25) | function matchesEndDocToc(line) {
function matchesStartContributors (line 29) | function matchesStartContributors(line) {
function matchesEndContributors (line 33) | function matchesEndContributors(line) {
function updatePackageJson (line 38) | function updatePackageJson(packageJson, branch, dependencyVersions, vers...
FILE: scripts/release-notes.js
function main (line 3) | async function main() {
FILE: scripts/update-examples.js
function matchesStartInstall (line 18) | function matchesStartInstall(line) {
function matchesEndInstall (line 22) | function matchesEndInstall(line) {
function updateInstallSection (line 26) | function updateInstallSection(
function updatePackageJson (line 66) | function updatePackageJson(
FILE: test/fixtures/build-with-custom-config-invalid/razzle.config.js
method modifyWebpackConfig (line 7) | modifyWebpackConfig(opts) {
FILE: test/fixtures/build-with-custom-config/razzle.config.js
method modifyWebpackConfig (line 4) | modifyWebpackConfig(opts) {
FILE: test/fixtures/util.js
function flatten (line 13) | function flatten(arr) {
FILE: website/.nextra/babel-plugin-nextjs-mdx-patch.js
constant DATA_FETCH_FNS (line 13) | const DATA_FETCH_FNS = ['getStaticPaths', 'getStaticProps', 'getServerPr...
method ObjectProperty (line 18) | ObjectProperty(path) {
FILE: website/.nextra/directories.js
function importAll (line 8) | function importAll(r) {
FILE: website/.nextra/layout.js
function Folder (line 42) | function Folder({ item, anchors }) {
function File (line 82) | function File({ item, anchors }) {
function Menu (line 132) | function Menu({ dir, anchors }) {
function Sidebar (line 145) | function Sidebar({ show, anchors }) {
FILE: website/.nextra/nextra.js
method webpack (line 11) | webpack(config, options) {
FILE: website/.nextra/theme.js
constant THEME (line 6) | const THEME = {
FILE: website/pages/_app.js
function Nextra (line 4) | function Nextra({ Component, pageProps }) {
FILE: website/pages/_document.js
class MyDocument (line 5) | class MyDocument extends Document {
method render (line 6) | render() {
Condensed preview — 1039 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,241K chars).
[
{
"path": ".all-contributorsrc",
"chars": 3529,
"preview": "{\n \"projectName\": \"razzle\",\n \"projectOwner\": \"jaredpalmer\",\n \"files\": [\n \"README.md\"\n ],\n \"imageSize\": 100,\n \"c"
},
{
"path": ".changeset/config.json",
"chars": 322,
"preview": "{\n \"commit\": false,\n \"updateInternalDependencies\": \"minor\",\n \"linked\": [],\n \"fixed\": [[\"babel-preset-razzle\""
},
{
"path": ".eslintignore",
"chars": 98,
"preview": "node_modules/\nbuild\nmy-app*\ntest/fixtures\ntest/tests\npackages/create-razzle-app/templates\nexamples"
},
{
"path": ".eslintrc",
"chars": 277,
"preview": "{\n \"extends\": \"eslint:recommended\",\n \"env\": {\n \"browser\": true,\n \"commonjs\": true,\n \"node\": true,\n \"es6\": "
},
{
"path": ".github/CODE_OF_CONDUCT.md",
"chars": 3870,
"preview": "\n# Contributor Covenant Code of Conduct\n\n<!-- INSERT doctoc generated TOC please keep comment here to allow auto update "
},
{
"path": ".github/CONTRIBUTING.md",
"chars": 9153,
"preview": "\n# Contributing to Razzle\n\nHi there! Thanks for your interest in Razzle. This guide will help you get started contributi"
},
{
"path": ".github/FUNDING.yml",
"chars": 71,
"preview": "# These are supported funding model platforms\n\nopen_collective: razzle\n"
},
{
"path": ".github/ISSUE_TEMPLATE/Bug_report.md",
"chars": 896,
"preview": "---\r\nname: \"\\U0001F41B Bug report\"\r\nabout: Create a report to help make Razzle better\r\n---\r\n\r\n## 🐛 Bug report\r\n\r\n### Cur"
},
{
"path": ".github/ISSUE_TEMPLATE/Documentation.md",
"chars": 119,
"preview": "---\nname: \"\\U0001F41B Documentation\"\nabout: Imrovements or suggestions of Razzle documentation\n---\n\n## 📖 Documentation\n"
},
{
"path": ".github/ISSUE_TEMPLATE/Feature_request.md",
"chars": 1024,
"preview": "---\r\nname: \"\\U0001F680Feature request\"\r\nabout: Suggest an idea for Razzle\r\n---\r\n\r\n## 🚀 Feature request\r\n\r\n### Current Be"
},
{
"path": ".github/ISSUE_TEMPLATE/Question.md",
"chars": 75,
"preview": "---\r\nname: \"❓Question\"\r\nabout: 'Ask a Question!'\r\n---\r\n\r\n## ❓Question\r\n\r\n\r\n"
},
{
"path": ".github/labels.yml",
"chars": 248,
"preview": "examples:\n - examples/*\n - examples/**/*\n\nrazzle: \n - packages/razzle/*\n - packages/razzle/**/*\n\nwebpack: \n - packa"
},
{
"path": ".github/stale.yml",
"chars": 696,
"preview": "# Number of days of inactivity before an issue becomes stale\ndaysUntilStale: 60\n# Number of days of inactivity before a "
},
{
"path": ".github/workflows/examples.yml",
"chars": 4034,
"preview": "name: Test examples on trigger\n\non:\n workflow_dispatch:\n inputs:\n npm_tag:\n description: 'The npm tag fo"
},
{
"path": ".github/workflows/examples_node14.yml",
"chars": 4034,
"preview": "name: Test examples on trigger using node 14.x\n\n\non:\n workflow_dispatch:\n inputs:\n npm_tag:\n description"
},
{
"path": ".github/workflows/label.yml",
"chars": 672,
"preview": "# Automatically label PRs every hour based on your .github/labels.yaml:\n#\n# This workflow will triage pull requests and "
},
{
"path": ".github/workflows/nodejs.yml",
"chars": 3034,
"preview": "name: Run tests on push\n\non: [push]\n\njobs:\n build:\n\n runs-on: ${{ matrix.os }}\n\n strategy:\n fail-fast: false"
},
{
"path": ".github/workflows/release.yml",
"chars": 796,
"preview": "name: Release\n\non:\n push:\n branches:\n - master\n\njobs:\n release:\n name: Release\n runs-on: ubuntu-latest\n "
},
{
"path": ".github/workflows/test-examples.yml",
"chars": 3225,
"preview": "name: Test examples on trigger\n\n\non:\n workflow_dispatch:\n inputs:\n logLevel:\n description: 'Log level'\n "
},
{
"path": ".gitignore",
"chars": 607,
"preview": "\n# Logs\nlogs\n*.log\nnpm-debug.log*\n.DS_Store\nstage-*\nexample/\n# Runtime data\npids\n*.pid\n*.seed\n\ntest-artifacts\nexamples/*"
},
{
"path": ".prettierrc",
"chars": 68,
"preview": "{\n \"trailingComma\": \"es5\",\n \"singleQuote\": true,\n \"semi\": true\n}\n"
},
{
"path": "LICENSE",
"chars": 1079,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2016 Jared Palmer\n\nPermission is hereby granted, free of charge, to any person obta"
},
{
"path": "examples/.gitignore",
"chars": 28,
"preview": "yarn.lock\npackage-lock.json\n"
},
{
"path": "examples/basic/README.md",
"chars": 596,
"preview": "# Razzle Basic Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto "
},
{
"path": "examples/basic/gitignore",
"chars": 91,
"preview": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
},
{
"path": "examples/basic/package.json",
"chars": 624,
"preview": "{\n \"name\": \"razzle-examples-basic\",\n \"version\": \"4.2.15\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"start\": \"razzle star"
},
{
"path": "examples/basic/public/robots.txt",
"chars": 15,
"preview": "User-agent: *\n\n"
},
{
"path": "examples/basic/sandbox.config.json",
"chars": 42,
"preview": "{\n \"container\": {\n \"port\": 3000\n }\n}\n"
},
{
"path": "examples/basic/src/App.css",
"chars": 218,
"preview": "body {\n margin: 0;\n padding: 0;\n font-family: -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Helvetica,\n "
},
{
"path": "examples/basic/src/App.js",
"chars": 118,
"preview": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
},
{
"path": "examples/basic/src/App.test.js",
"chars": 251,
"preview": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n tes"
},
{
"path": "examples/basic/src/client.js",
"chars": 185,
"preview": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getE"
},
{
"path": "examples/basic/src/index.js",
"chars": 602,
"preview": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n module.hot.accept('./server'"
},
{
"path": "examples/basic/src/server.js",
"chars": 1479,
"preview": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react"
},
{
"path": "examples/basic-server/README.md",
"chars": 583,
"preview": "# Razzle Basic Server Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allo"
},
{
"path": "examples/basic-server/gitignore",
"chars": 91,
"preview": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
},
{
"path": "examples/basic-server/package.json",
"chars": 631,
"preview": "{\n \"name\": \"razzle-examples-basic-server\",\n \"version\": \"4.2.15\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"start\": \"razz"
},
{
"path": "examples/basic-server/public/robots.txt",
"chars": 15,
"preview": "User-agent: *\n\n"
},
{
"path": "examples/basic-server/razzle.config.js",
"chars": 84,
"preview": "'use strict';\n\nmodule.exports = {\n options: {\n buildType: 'server-only',\n }\n};\n"
},
{
"path": "examples/basic-server/sandbox.config.json",
"chars": 42,
"preview": "{\n \"container\": {\n \"port\": 3000\n }\n}\n"
},
{
"path": "examples/basic-server/src/App.css",
"chars": 218,
"preview": "body {\n margin: 0;\n padding: 0;\n font-family: -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Helvetica,\n "
},
{
"path": "examples/basic-server/src/App.js",
"chars": 98,
"preview": "\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
},
{
"path": "examples/basic-server/src/App.test.js",
"chars": 251,
"preview": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n tes"
},
{
"path": "examples/basic-server/src/index.js",
"chars": 602,
"preview": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n module.hot.accept('./server'"
},
{
"path": "examples/basic-server/src/server.js",
"chars": 848,
"preview": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react"
},
{
"path": "examples/basic-serverless/README.md",
"chars": 596,
"preview": "# Razzle Basic Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto "
},
{
"path": "examples/basic-serverless/gitignore",
"chars": 91,
"preview": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
},
{
"path": "examples/basic-serverless/package.json",
"chars": 656,
"preview": "{\n \"name\": \"razzle-examples-basic-serverless\",\n \"version\": \"4.2.15\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"start\": \""
},
{
"path": "examples/basic-serverless/public/robots.txt",
"chars": 15,
"preview": "User-agent: *\n\n"
},
{
"path": "examples/basic-serverless/razzle.config.js",
"chars": 961,
"preview": "'use strict';\n\nconst path = require('path');\n\nmodule.exports = {\n options: {\n buildType: 'iso-serverless'\n },\n mod"
},
{
"path": "examples/basic-serverless/sandbox.config.json",
"chars": 42,
"preview": "{\n \"container\": {\n \"port\": 3000\n }\n}\n"
},
{
"path": "examples/basic-serverless/src/App.css",
"chars": 218,
"preview": "body {\n margin: 0;\n padding: 0;\n font-family: -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Helvetica,\n "
},
{
"path": "examples/basic-serverless/src/App.js",
"chars": 118,
"preview": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
},
{
"path": "examples/basic-serverless/src/App.test.js",
"chars": 251,
"preview": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n tes"
},
{
"path": "examples/basic-serverless/src/client.js",
"chars": 185,
"preview": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getE"
},
{
"path": "examples/basic-serverless/src/index.js",
"chars": 602,
"preview": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n module.hot.accept('./server'"
},
{
"path": "examples/basic-serverless/src/server.js",
"chars": 1479,
"preview": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react"
},
{
"path": "examples/basic-spa/.gitignore",
"chars": 91,
"preview": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
},
{
"path": "examples/basic-spa/README.md",
"chars": 719,
"preview": "# Razzle Single Page App Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to a"
},
{
"path": "examples/basic-spa/package.json",
"chars": 605,
"preview": "{\n \"name\": \"razzle-examples-basic-spa\",\n \"version\": \"4.2.15\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"start\": \"razzle "
},
{
"path": "examples/basic-spa/public/index.html",
"chars": 1476,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n <head>\n <meta charset=\"utf-8\" />\n <link rel=\"icon\" href=\"<%= process.env.PUBLI"
},
{
"path": "examples/basic-spa/public/robots.txt",
"chars": 15,
"preview": "User-agent: *\n\n"
},
{
"path": "examples/basic-spa/razzle.config.js",
"chars": 96,
"preview": "'use strict';\n\nmodule.exports = {\n options: {\n buildType: 'single-page-application',\n }\n};\n"
},
{
"path": "examples/basic-spa/src/App.css",
"chars": 218,
"preview": "body {\n margin: 0;\n padding: 0;\n font-family: -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Helvetica,\n "
},
{
"path": "examples/basic-spa/src/App.js",
"chars": 118,
"preview": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
},
{
"path": "examples/basic-spa/src/App.test.js",
"chars": 251,
"preview": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n tes"
},
{
"path": "examples/basic-spa/src/client.js",
"chars": 183,
"preview": "import React from 'react';\nimport { render } from 'react-dom';\nimport App from './App';\n\nrender(<App />, document.getEle"
},
{
"path": "examples/with-afterjs/README.md",
"chars": 150,
"preview": "# with-afterjs example\n\nThis example have been moved here: [jaredpalmer/after.js](https://github.com/jaredpalmer/after.j"
},
{
"path": "examples/with-custom-babel-config/.babelrc",
"chars": 105,
"preview": "{\n \"presets\": [\n \"razzle/babel\"\n ],\n \"plugins\": [\n \"@babel/plugin-proposal-do-expressions\"\n ]\n}"
},
{
"path": "examples/with-custom-babel-config/.gitignore",
"chars": 91,
"preview": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
},
{
"path": "examples/with-custom-babel-config/README.md",
"chars": 589,
"preview": "# Razzle Custom Babel Configuration Example\n\n## How to use\n\n<!-- START install generated instructions please keep commen"
},
{
"path": "examples/with-custom-babel-config/package.json",
"chars": 801,
"preview": "{\n \"name\": \"razzle-examples-with-custom-babel-config\",\n \"version\": \"4.2.15\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"s"
},
{
"path": "examples/with-custom-babel-config/razzle.config.js",
"chars": 57,
"preview": "module.exports = {\n options: {\n verbose: true\n },\n}\n"
},
{
"path": "examples/with-custom-babel-config/src/App.js",
"chars": 218,
"preview": "import React from 'react';\nimport { Route, Switch } from 'react-router-dom';\nimport Home from './Home';\n\nconst App = () "
},
{
"path": "examples/with-custom-babel-config/src/Home.js",
"chars": 1091,
"preview": "import React from \"react\";\n\nexport default class MyLuckNo extends React.Component {\n state = { randomNo: null };\n\n com"
},
{
"path": "examples/with-custom-babel-config/src/client.js",
"chars": 280,
"preview": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport { BrowserRouter } from 'react-router-dom';\nimport"
},
{
"path": "examples/with-custom-babel-config/src/index.js",
"chars": 602,
"preview": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n module.hot.accept('./server'"
},
{
"path": "examples/with-custom-babel-config/src/server.js",
"chars": 1840,
"preview": "import { StaticRouter } from 'react-router-dom';\n\nimport App from './App';\nimport React from 'react';\nimport express fro"
},
{
"path": "examples/with-custom-devserver-options/.gitignore",
"chars": 150,
"preview": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.te"
},
{
"path": "examples/with-custom-devserver-options/README.md",
"chars": 1187,
"preview": "# Razzle Custom Webpack Configuration Example\n\n## How to use\n\n<!-- START install generated instructions please keep comm"
},
{
"path": "examples/with-custom-devserver-options/package.json",
"chars": 818,
"preview": "{\n \"name\": \"razzle-examples-with-custom-devserver-options\",\n \"version\": \"4.2.15\",\n \"license\": \"MIT\",\n \"scripts\": {\n "
},
{
"path": "examples/with-custom-devserver-options/public/robots.txt",
"chars": 15,
"preview": "User-agent: *\n\n"
},
{
"path": "examples/with-custom-devserver-options/razzle.config.js",
"chars": 327,
"preview": "'use strict';\n\nmodule.exports = {\n modifyWebpackConfig(opts) {\n const config = opts.webpackConfig;\n if (opts.env."
},
{
"path": "examples/with-custom-devserver-options/src/App.js",
"chars": 98,
"preview": "import React from 'react';\n\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
},
{
"path": "examples/with-custom-devserver-options/src/client.js",
"chars": 185,
"preview": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getE"
},
{
"path": "examples/with-custom-devserver-options/src/index.js",
"chars": 602,
"preview": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n module.hot.accept('./server'"
},
{
"path": "examples/with-custom-devserver-options/src/server.js",
"chars": 1479,
"preview": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react"
},
{
"path": "examples/with-custom-environment-variables/.gitignore",
"chars": 150,
"preview": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.te"
},
{
"path": "examples/with-custom-environment-variables/README.md",
"chars": 1156,
"preview": "# Razzle Custom Environment Variables Example\n\n## How to use\n\n<!-- START install generated instructions please keep comm"
},
{
"path": "examples/with-custom-environment-variables/package.json",
"chars": 695,
"preview": "{\n \"name\": \"razzle-examples-with-custom-environment-variables\",\n \"version\": \"4.2.15\",\n \"license\": \"MIT\",\n \"scripts\":"
},
{
"path": "examples/with-custom-environment-variables/public/robots.txt",
"chars": 15,
"preview": "User-agent: *\n\n"
},
{
"path": "examples/with-custom-environment-variables/src/App.js",
"chars": 111,
"preview": "import React from 'react';\n\nconst App = () => <div>{process.env.RAZZLE_CUSTOM_VAR}</div>;\n\nexport default App;\n"
},
{
"path": "examples/with-custom-environment-variables/src/client.js",
"chars": 185,
"preview": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getE"
},
{
"path": "examples/with-custom-environment-variables/src/index.js",
"chars": 602,
"preview": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n module.hot.accept('./server'"
},
{
"path": "examples/with-custom-environment-variables/src/server.js",
"chars": 1479,
"preview": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react"
},
{
"path": "examples/with-custom-target-babel-config/.babelrc.node",
"chars": 105,
"preview": "{\n \"presets\": [\n \"razzle/babel\"\n ],\n \"plugins\": [\n \"@babel/plugin-proposal-do-expressions\"\n ]\n}"
},
{
"path": "examples/with-custom-target-babel-config/.babelrc.web",
"chars": 105,
"preview": "{\n \"presets\": [\n \"razzle/babel\"\n ],\n \"plugins\": [\n \"@babel/plugin-proposal-do-expressions\"\n ]\n}"
},
{
"path": "examples/with-custom-target-babel-config/.gitignore",
"chars": 91,
"preview": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
},
{
"path": "examples/with-custom-target-babel-config/README.md",
"chars": 643,
"preview": "# Razzle Custom Target Babel Configuration Example\n\n## How to use\n\n<!-- START install generated instructions please keep"
},
{
"path": "examples/with-custom-target-babel-config/package.json",
"chars": 808,
"preview": "{\n \"name\": \"razzle-examples-with-custom-target-babel-config\",\n \"version\": \"4.2.15\",\n \"license\": \"MIT\",\n \"scripts\": {"
},
{
"path": "examples/with-custom-target-babel-config/razzle.config.js",
"chars": 88,
"preview": "module.exports = {\n options: {\n verbose: true,\n enableTargetBabelrc: true\n },\n}\n"
},
{
"path": "examples/with-custom-target-babel-config/src/App.js",
"chars": 218,
"preview": "import React from 'react';\nimport { Route, Switch } from 'react-router-dom';\nimport Home from './Home';\n\nconst App = () "
},
{
"path": "examples/with-custom-target-babel-config/src/Home.js",
"chars": 1091,
"preview": "import React from \"react\";\n\nexport default class MyLuckNo extends React.Component {\n state = { randomNo: null };\n\n com"
},
{
"path": "examples/with-custom-target-babel-config/src/client.js",
"chars": 280,
"preview": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport { BrowserRouter } from 'react-router-dom';\nimport"
},
{
"path": "examples/with-custom-target-babel-config/src/index.js",
"chars": 602,
"preview": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n module.hot.accept('./server'"
},
{
"path": "examples/with-custom-target-babel-config/src/server.js",
"chars": 1640,
"preview": "import { StaticRouter } from 'react-router-dom';\n\nimport App from './App';\nimport React from 'react';\nimport express fro"
},
{
"path": "examples/with-custom-webpack-config/.gitignore",
"chars": 150,
"preview": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.te"
},
{
"path": "examples/with-custom-webpack-config/README.md",
"chars": 1159,
"preview": "# Razzle Custom Webpack Configuration Example\n\n## How to use\n\n<!-- START install generated instructions please keep comm"
},
{
"path": "examples/with-custom-webpack-config/package.json",
"chars": 645,
"preview": "{\n \"name\": \"razzle-examples-with-custom-webpack-config\",\n \"version\": \"4.2.15\",\n \"license\": \"MIT\",\n \"scripts\": {\n "
},
{
"path": "examples/with-custom-webpack-config/public/robots.txt",
"chars": 15,
"preview": "User-agent: *\n\n"
},
{
"path": "examples/with-custom-webpack-config/razzle.config.js",
"chars": 300,
"preview": "'use strict';\n\nmodule.exports = {\n modifyWebpackConfig(opts) {\n const config = opts.webpackConfig;\n\n // Change th"
},
{
"path": "examples/with-custom-webpack-config/src/App.js",
"chars": 98,
"preview": "import React from 'react';\n\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
},
{
"path": "examples/with-custom-webpack-config/src/client.js",
"chars": 185,
"preview": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getE"
},
{
"path": "examples/with-custom-webpack-config/src/index.js",
"chars": 602,
"preview": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n module.hot.accept('./server'"
},
{
"path": "examples/with-custom-webpack-config/src/server.js",
"chars": 1479,
"preview": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react"
},
{
"path": "examples/with-devcert-https/.gitignore",
"chars": 150,
"preview": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.te"
},
{
"path": "examples/with-devcert-https/README.md",
"chars": 1762,
"preview": "# Razzle Devcert Https Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to all"
},
{
"path": "examples/with-devcert-https/package.json",
"chars": 707,
"preview": "{\n \"name\": \"razzle-examples-with-devcert-https\",\n \"version\": \"4.2.15\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"start\":"
},
{
"path": "examples/with-devcert-https/public/robots.txt",
"chars": 15,
"preview": "User-agent: *\n\n"
},
{
"path": "examples/with-devcert-https/razzle.config.js",
"chars": 2172,
"preview": "'use strict';\n\nconst devcert = require('devcert');\n\nconst cors = require('cors');\n\nconst whitelist = ['https://localhost"
},
{
"path": "examples/with-devcert-https/src/App.css",
"chars": 218,
"preview": "body {\n margin: 0;\n padding: 0;\n font-family: -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Helvetica,\n "
},
{
"path": "examples/with-devcert-https/src/App.js",
"chars": 118,
"preview": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
},
{
"path": "examples/with-devcert-https/src/client.js",
"chars": 185,
"preview": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getE"
},
{
"path": "examples/with-devcert-https/src/index.js",
"chars": 658,
"preview": "import express from 'express';\nimport https from 'https';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n m"
},
{
"path": "examples/with-devcert-https/src/server.js",
"chars": 2210,
"preview": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport cors from 'cors';\nimport { ren"
},
{
"path": "examples/with-development-build/README.md",
"chars": 1074,
"preview": "# Razzle Basic Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto "
},
{
"path": "examples/with-development-build/gitignore",
"chars": 91,
"preview": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
},
{
"path": "examples/with-development-build/package.json",
"chars": 726,
"preview": "{\n \"name\": \"razzle-examples-with-development-build\",\n \"version\": \"4.2.15\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"sta"
},
{
"path": "examples/with-development-build/public/robots.txt",
"chars": 15,
"preview": "User-agent: *\n\n"
},
{
"path": "examples/with-development-build/sandbox.config.json",
"chars": 42,
"preview": "{\n \"container\": {\n \"port\": 3000\n }\n}\n"
},
{
"path": "examples/with-development-build/src/App.css",
"chars": 218,
"preview": "body {\n margin: 0;\n padding: 0;\n font-family: -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Helvetica,\n "
},
{
"path": "examples/with-development-build/src/App.js",
"chars": 118,
"preview": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
},
{
"path": "examples/with-development-build/src/App.test.js",
"chars": 251,
"preview": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n tes"
},
{
"path": "examples/with-development-build/src/client.js",
"chars": 185,
"preview": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getE"
},
{
"path": "examples/with-development-build/src/index.js",
"chars": 602,
"preview": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n module.hot.accept('./server'"
},
{
"path": "examples/with-development-build/src/server.js",
"chars": 1479,
"preview": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react"
},
{
"path": "examples/with-elm/.gitignore",
"chars": 420,
"preview": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\n# Compiled binary addons (http://nodejs.org/api/addons.html)\nbuild/Release\n\ncoverag"
},
{
"path": "examples/with-elm/README.md",
"chars": 1527,
"preview": "# Razzle Elm Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto up"
},
{
"path": "examples/with-elm/elm-package.json",
"chars": 478,
"preview": "{\n \"version\": \"1.0.0\",\n \"summary\": \"helpful summary of your project, less than 80 characters\",\n \"repository\": \""
},
{
"path": "examples/with-elm/package.json",
"chars": 729,
"preview": "{\n \"name\": \"razzle-examples-with-elm\",\n \"version\": \"4.2.15\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"postinstall\": \"el"
},
{
"path": "examples/with-elm/public/robots.txt",
"chars": 15,
"preview": "User-agent: *\n\n"
},
{
"path": "examples/with-elm/razzle.config.js",
"chars": 1636,
"preview": "'use strict';\n\nmodule.exports = {\n modifyWebpackOptions({\n env: {\n target, // the target 'node' or 'web'\n "
},
{
"path": "examples/with-elm/src/App.elm",
"chars": 1100,
"preview": "module App exposing (..)\n\nimport Html exposing (..)\nimport Html.Attributes exposing (..)\nimport Html.Events exposing (.."
},
{
"path": "examples/with-elm/src/Main.elm",
"chars": 269,
"preview": "module Main exposing (main)\n\nimport Html\nimport App exposing (init, update, view)\n \nmain : Program Never App.Model App.M"
},
{
"path": "examples/with-elm/src/client.js",
"chars": 212,
"preview": "import Elm from './Main';\n\n// We need embed the Elm app to the div, if we call fullscreen we will have duplicated html\nE"
},
{
"path": "examples/with-elm/src/index.js",
"chars": 602,
"preview": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n module.hot.accept('./server'"
},
{
"path": "examples/with-elm/src/server.js",
"chars": 1888,
"preview": "import elmStaticHtml from \"elm-static-html-lib\";\nimport express from 'express';\nrequire('./Main');\n\nconst assets = requi"
},
{
"path": "examples/with-esbuild-loader/.eslintrc.js",
"chars": 1271,
"preview": "module.exports =\n{\n \"env\": {\n \"node\": true,\n \"browser\": true,\n \"es6\": true\n },\n \"globals\": {\n \"Atomics\": "
},
{
"path": "examples/with-esbuild-loader/.gitignore",
"chars": 150,
"preview": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.te"
},
{
"path": "examples/with-esbuild-loader/README.md",
"chars": 2488,
"preview": "# Razzle Esbuild Loader Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to al"
},
{
"path": "examples/with-esbuild-loader/package.json",
"chars": 1960,
"preview": "{\n \"name\": \"razzle-examples-with-typescript\",\n \"version\": \"4.2.15\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"start\": \"r"
},
{
"path": "examples/with-esbuild-loader/public/robots.txt",
"chars": 15,
"preview": "User-agent: *\n\n"
},
{
"path": "examples/with-esbuild-loader/razzle.config.js",
"chars": 2081,
"preview": "'use strict';\n\nconst ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');\nconst makeLoaderFinder = re"
},
{
"path": "examples/with-esbuild-loader/src/App.css",
"chars": 62,
"preview": "body {\n margin: 0;\n padding: 0;\n font-family: sans-serif;\n}"
},
{
"path": "examples/with-esbuild-loader/src/App.test.tsx",
"chars": 358,
"preview": "import React from 'react';\nimport { render } from 'react-dom';\n\nimport App from './App';\n\nimport { MemoryRouter } from '"
},
{
"path": "examples/with-esbuild-loader/src/App.tsx",
"chars": 246,
"preview": "import React from 'react';\nimport { Route, Switch } from 'react-router-dom';\nimport Home from './Home';\n\nimport './App.c"
},
{
"path": "examples/with-esbuild-loader/src/Home.css",
"chars": 455,
"preview": ".Home {\n text-align: center;\n}\n\n.Home-logo {\n animation: Home-logo-spin infinite 20s linear;\n height: 80px;\n}\n\n.Home-"
},
{
"path": "examples/with-esbuild-loader/src/Home.tsx",
"chars": 913,
"preview": "import React from 'react';\nimport logo from './react.svg';\n\nimport './Home.css';\n\nclass Home extends React.Component<{},"
},
{
"path": "examples/with-esbuild-loader/src/client.tsx",
"chars": 281,
"preview": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport { BrowserRouter } from 'react-router-dom';\n\nimpor"
},
{
"path": "examples/with-esbuild-loader/src/index.ts",
"chars": 741,
"preview": "import express from 'express';\n\n// this require is necessary for server HMR to recover from error\n// tslint:disable-next"
},
{
"path": "examples/with-esbuild-loader/src/server.tsx",
"chars": 1974,
"preview": "import express from 'express';\nimport React from 'react';\nimport { renderToString } from 'react-dom/server';\nimport { St"
},
{
"path": "examples/with-esbuild-loader/tsconfig.json",
"chars": 870,
"preview": "{\n \"compilerOptions\": {\n \"allowJs\": true,\n \"allowUnreachableCode\": false,\n \"noFallthroughCasesInSwitch\": true,"
},
{
"path": "examples/with-esbuild-loader/typings/index.d.ts",
"chars": 78,
"preview": "declare module '*.svg' {\n const content: any;\n export default content;\n}"
},
{
"path": "examples/with-eslint/.eslintrc.json",
"chars": 277,
"preview": "{\n \"extends\": \"eslint:recommended\",\n \"env\": {\n \"browser\": true,\n \"commonjs\": true,\n \"node\": true,\n \"es6\": "
},
{
"path": "examples/with-eslint/.gitignore",
"chars": 91,
"preview": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
},
{
"path": "examples/with-eslint/README.md",
"chars": 614,
"preview": "# Razzle Basic Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto "
},
{
"path": "examples/with-eslint/package.json",
"chars": 1132,
"preview": "{\n \"name\": \"razzle-examples-with-eslint\",\n \"version\": \"4.2.15\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"start\": \"razzl"
},
{
"path": "examples/with-eslint/public/robots.txt",
"chars": 15,
"preview": "User-agent: *\n\n"
},
{
"path": "examples/with-eslint/razzle.config.js",
"chars": 90,
"preview": "'use strict';\n\nmodule.exports = {\n options: { verbose: true },\n plugins: ['eslint'],\n};\n"
},
{
"path": "examples/with-eslint/sandbox.config.json",
"chars": 42,
"preview": "{\n \"container\": {\n \"port\": 3000\n }\n}\n"
},
{
"path": "examples/with-eslint/src/App.css",
"chars": 218,
"preview": "body {\n margin: 0;\n padding: 0;\n font-family: -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Helvetica,\n "
},
{
"path": "examples/with-eslint/src/App.js",
"chars": 118,
"preview": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
},
{
"path": "examples/with-eslint/src/App.test.js",
"chars": 251,
"preview": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n tes"
},
{
"path": "examples/with-eslint/src/client.js",
"chars": 185,
"preview": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getE"
},
{
"path": "examples/with-eslint/src/index.js",
"chars": 602,
"preview": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n module.hot.accept('./server'"
},
{
"path": "examples/with-eslint/src/server.js",
"chars": 1479,
"preview": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react"
},
{
"path": "examples/with-experimental-refresh/README.md",
"chars": 804,
"preview": "# Razzle Experimental React Refresh Example\n\n## How to use\n\n<!-- START install generated instructions please keep commen"
},
{
"path": "examples/with-experimental-refresh/package.json",
"chars": 654,
"preview": "{\n \"name\": \"razzle-examples-with-experimental-refresh\",\n \"version\": \"4.2.15\",\n \"license\": \"MIT\",\n \"scripts\": {\n \""
},
{
"path": "examples/with-experimental-refresh/razzle.config.js",
"chars": 69,
"preview": "module.exports = {\n options: {\n enableReactRefresh: true,\n },\n}\n"
},
{
"path": "examples/with-experimental-refresh/src/App.css",
"chars": 218,
"preview": "body {\n margin: 0;\n padding: 0;\n font-family: -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Helvetica,\n "
},
{
"path": "examples/with-experimental-refresh/src/App.js",
"chars": 1159,
"preview": "import * as React from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport ClickCount from './compon"
},
{
"path": "examples/with-experimental-refresh/src/App.test.js",
"chars": 251,
"preview": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n tes"
},
{
"path": "examples/with-experimental-refresh/src/client.js",
"chars": 189,
"preview": "import * as React from 'react'\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document."
},
{
"path": "examples/with-experimental-refresh/src/components/ClickCount.js",
"chars": 408,
"preview": "import * as React from 'react'\nimport { useCallback, useState } from 'react'\nimport styles from './ClickCount.module.css"
},
{
"path": "examples/with-experimental-refresh/src/components/ClickCount.module.css",
"chars": 585,
"preview": "button.btn {\n margin: 0;\n border: 1px solid #d1d1d1;\n border-radius: 5px;\n padding: 0.5em;\n vertical-align: middle;"
},
{
"path": "examples/with-experimental-refresh/src/global.css",
"chars": 778,
"preview": "body {\n font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',\n 'Arial', sans-serif;\n padding: "
},
{
"path": "examples/with-experimental-refresh/src/index.js",
"chars": 602,
"preview": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n module.hot.accept('./server'"
},
{
"path": "examples/with-experimental-refresh/src/server.js",
"chars": 1483,
"preview": "import App from './App';\nimport * as React from 'react'\nimport express from 'express';\nimport { renderToString } from 'r"
},
{
"path": "examples/with-fastify/.gitignore",
"chars": 150,
"preview": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.te"
},
{
"path": "examples/with-fastify/README.md",
"chars": 1185,
"preview": "# Razzle Fastify Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow aut"
},
{
"path": "examples/with-fastify/package.json",
"chars": 1186,
"preview": "{\n \"name\": \"razzle-examples-with-fastify\",\n \"version\": \"4.2.15\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"start\": \"razz"
},
{
"path": "examples/with-fastify/public/robots.txt",
"chars": 15,
"preview": "User-agent: *\n\n"
},
{
"path": "examples/with-fastify/src/App.css",
"chars": 63,
"preview": "body {\n margin: 0;\n padding: 0;\n font-family: sans-serif;\n}\n"
},
{
"path": "examples/with-fastify/src/App.test.tsx",
"chars": 385,
"preview": "import { render } from '@testing-library/react';\nimport React from 'react';\nimport { MemoryRouter } from 'react-router-d"
},
{
"path": "examples/with-fastify/src/App.tsx",
"chars": 246,
"preview": "import React from 'react';\nimport { Route, Switch } from 'react-router-dom';\nimport './App.css';\nimport Home from './Hom"
},
{
"path": "examples/with-fastify/src/Home.css",
"chars": 468,
"preview": ".Home {\n text-align: center;\n}\n\n.Home-logo {\n animation: Home-logo-spin infinite 20s linear;\n height: 80px;\n}\n\n.Home-"
},
{
"path": "examples/with-fastify/src/Home.tsx",
"chars": 913,
"preview": "import React from 'react';\nimport './Home.css';\nimport logo from './react.svg';\n\n\nclass Home extends React.Component<{},"
},
{
"path": "examples/with-fastify/src/client.tsx",
"chars": 281,
"preview": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport { BrowserRouter } from 'react-router-dom';\nimport"
},
{
"path": "examples/with-fastify/src/index.ts",
"chars": 1005,
"preview": "import http from 'http';\n\n/**\n * This implementation is similar to the `with-koa` example,\n * but Fastify does not have "
},
{
"path": "examples/with-fastify/src/server.tsx",
"chars": 2480,
"preview": "import fastify from \"fastify\";\nimport fastifyStatic from \"fastify-static\";\nimport type { IncomingMessage, ServerResponse"
}
]
// ... and 839 more files (download for full content)
About this extraction
This page contains the full source code of the jaredpalmer/razzle GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 1039 files (1.1 MB), approximately 317.5k tokens, and a symbol index with 349 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.