{"id":19581016,"url":"https://github.com/tsamaya/react-app-node-backend","last_synced_at":"2025-02-26T12:17:18.994Z","repository":{"id":147713671,"uuid":"127998393","full_name":"tsamaya/react-app-node-backend","owner":"tsamaya","description":"A sample react app with a node backend api + docker-compose ","archived":false,"fork":false,"pushed_at":"2023-03-01T08:47:28.000Z","size":1284,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-09T05:21:52.847Z","etag":null,"topics":["babel","docker","docker-compose","node-backend","react","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tsamaya.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-04T02:54:53.000Z","updated_at":"2023-01-31T16:58:41.000Z","dependencies_parsed_at":"2023-05-27T05:45:20.198Z","dependency_job_id":null,"html_url":"https://github.com/tsamaya/react-app-node-backend","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsamaya%2Freact-app-node-backend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsamaya%2Freact-app-node-backend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsamaya%2Freact-app-node-backend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsamaya%2Freact-app-node-backend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tsamaya","download_url":"https://codeload.github.com/tsamaya/react-app-node-backend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240849012,"owners_count":19867617,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","docker","docker-compose","node-backend","react","webpack"],"created_at":"2024-11-11T07:31:53.826Z","updated_at":"2025-02-26T12:17:18.867Z","avatar_url":"https://github.com/tsamaya.png","language":"JavaScript","readme":"# react-app-node-backend\n\n## Intro\n\nHow to use react app on the client side and an express node backend.\n\n## Tutorial\n\n#### prerequisites\n\n* node\n* yarn\n\nOn OSX `$ brew install node yarn`\n\n#### prepare folders\n\n    $ mkdir react-app-node-backend/app\n\n    $ cd react-app-node-backend/\n\ncreate a global node gitignore file\n\n    $ curl --url \"https://www.gitignore.io/api/node\" -o .gitignore\n\n#### create the react app\n\n    $ cd app\n\n    $ npm init -y\n\nInstall dependencies\n\n    $ yarn add react react-dom\n\n    $ yarn add -D webpack webpack-cli html-webpack-plugin webpack-dev-server\n\n    $ yarn add -D babel-core babel-cli babel-loader babel-preset-env babel-preset-react\n\n  - babel-cli is the terminal interface i.e. it allows us to compile files from the command line\n  - babel-loader allows transpiling JavaScript files using Babel and webpack\n  - babel-preset-env and babel-preset-react, transpiles es2015 (ES6) to ES5 and jsx to readable js, respectively.\n  - html-webpack-plugin allows webpack to use an html file that we have created, make a copy and then insert the script that refers to the bundled (compiled) js file that has just been created.\n\n```\n    $ yarn add -D sass-loader node-sass style-loader css-loader\n\n    $ yarn add -D stylelint stylelint-config-standard\n\n    $ yarn add -D npm-run-all\n\n    $ yarn add -D prettier\n\n    $ yarn add -D eslint eslint-config-airbnb-base eslint-plugin-import eslint-config-prettier eslint-plugin-prettier eslint-config-react eslint-plugin-react\n\n    $ touch .babelrc .eslintrc.js .eslintignore .prettierrc.js .prettierignore .stylelintrc webpack.config.js\n```\n\n```\n# .babelrc\n{\n    \"presets\":[\n        \"env\", \"react\"\n    ]\n}\n```\n\nadd in `.gitignore` file\n```\n# .gitignore\nbuild/\n```\n\n```\n# .eslintrc.js\nmodule.exports = {\n  extends: [\n    'airbnb-base', 'plugin:react/recommended', 'plugin:prettier/recommended'\n  ],\n  env: {\n    browser: true\n  }\n};\n```\n\n```\n# .eslintignore\nbuild/\n```\n\n```\n# .prettierrc.js\nmodule.exports = {\n  singleQuote: true,\n  trailingComma: 'es5'\n};\n```\n\n```\n# .prettierignore\nbuild/\n```\n\n```\n#.stylelintrc\n{\n  \"extends\": \"stylelint-config-standard\",\n}\n```\n\n```js\n# webpack.config.js\nconst path = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n  devtool: 'inline-source-map',\n  entry: './index.jsx',\n  output: {\n    path: path.join(__dirname, 'build'),\n    filename: 'js/bundle.js',\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.(js|jsx)$/,\n        use: {\n          loader: 'babel-loader',\n        },\n        exclude: /node_modules/,\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          {\n            loader: 'style-loader', // creates style nodes from JS strings\n          },\n          {\n            loader: 'css-loader', // translates CSS into CommonJS\n          },\n          {\n            loader: 'sass-loader', // compiles Sass to CSS\n          },\n        ],\n      },\n    ],\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n      template: './public/index.html',\n      filename: 'index.html',\n      inject: 'body',\n    }),\n  ],\n};\n```\n\n    $ touch App.scss\n\n```sass\n// Google Fonts\n@import url(http://fonts.googleapis.com/css?family=Roboto|Open+Sans);\n\n// Font Variables\n$roboto: 'Roboto', Helvetica;\n$open-sans: 'Open Sans', sans-serif;\n\n$header-font: $roboto;\n$body-font: $open-sans;\n\n$header-color: #478dbf;\n\n// Styles\nbody {\n  font-family: $body-font;\n  font-weight: normal;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-family: $header-font;\n  font-weight: normal;\n  color: $header-color;\n}  \n```\n\n    $ touch App.jsx\n\n```js\nimport React from 'react';\n\nimport './App.scss';\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003ch2\u003eThe React App\u003c/h2\u003e\n  \u003c/div\u003e\n);\n\nexport default App;\n```\n\n    $ touch index.jsx\n\n```js\nimport React from 'react';\nimport { render } from 'react-dom';\n\nimport App from './App.jsx';\n\nrender(\u003cApp /\u003e, document.getElementById('root'));\n```    \n\n    $ mkdir public\n\n    $ touch public/index.html\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eThe React App with Node Backend\u003c/title\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n  \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\nedit package.json\n```json\n\"scripts\": {\n  \"build:prod\": \"webpack --mode production\",\n  \"build:dev\": \"webpack --mode development\",\n  \"build:watch\": \"webpack --mode development --watch\",\n  \"lint:js\": \"eslint --ext=js --ext=jsx .\",\n  \"lint:scss\": \"stylelint --config=.stylelintrc '**/*.scss'\",\n  \"lint\": \"run-s lint:**\",\n  \"prebuild:prod\": \"yarn lint\",\n  \"start:dev\": \"webpack-dev-server --mode development\",\n  \"test\": \"echo \\\"Error: no test specified\\\" \u0026\u0026 exit 1\"\n},\n```\n\n    $ yarn start:dev\n\n    to stop : CRTL + C\n\n#### create the express app\n\n    $ cd ..\n\n    $ mkdir server\n\n    $ npm init -y\n\nInstall dependencies\n\n    $ yarn add express\n\n    $ yarn add -D babel-core babel-cli babel-preset-env\n\n    $ yarn add -D prettier\n\n    $ yarn add -D eslint eslint-config-airbnb-base eslint-plugin-import eslint-config-prettier eslint-plugin-prettier\n\n    \u003e TODO explain\n\n    $ mkdir src\n\n    $ touch src/server.js src/app.js\n\n```js\n// server.js\nimport app from './app';\n\nconst host = process.env.HOST || 'http://localhost';\nconst port = process.env.PORT || 3000;\n\napp.listen(port);\nconsole.log(`Listening at ${host}:${port}`); // eslint-disable-line\n```\n\n```js\n// app.js\nimport path from 'path';\nimport express from 'express';\n\nconst app = express();\n\nconst staticPath = express.static(path.join(__dirname, '../../app/build'));\nconst indexFile = path.join(__dirname, '../../app/build/index.html');\napp.use(staticPath);\napp.get('/', (req, res) =\u003e {\n  res.sendFile(indexFile);\n});\n\nexport default app;\n```\n\n    $ yarn add -D nodemon\n\n    $ yarn add -D npm-run-all\n\n    edit package.json\n\n```json\n\"scripts\": {\n  \"app:dev\": \"cd ../app \u0026\u0026 yarn build:watch\",\n  \"build\": \"babel ./src -d build/\",\n  \"build:watch\": \"babel --watch ./src -d build/\",\n  \"start:dev\": \"run-p app:dev build:watch start\",\n  \"start\": \"nodemon build/server\",\n  \"test\": \"echo \\\"Error: no test specified\\\" \u0026\u0026 exit 1\"\n},\n```\n\n    $ yarn start:dev\n\n    to stop : CRTL + C\n\n## With docker\n\n#### prerequisites\n\n* docker-ce \u003e= 17.05\n\n#### get started\n\n- clone the repo\n\n    $ touch .env\n\n```\n#.env\n# NGNIX PORT\nNGINX_PORT=80\n\n# BACKEND\nBACKEND_PORT=3000\n\n# REACT-dev\n# FRONT_PORT=8080\n```\n\n- to start `$ make startdev`\n- to stop `$ make stopdev`\n\n## License\n\nMIT\n\n[LICENSE](LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsamaya%2Freact-app-node-backend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftsamaya%2Freact-app-node-backend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsamaya%2Freact-app-node-backend/lists"}