crsandeep / simple-react-full-stack Goto Github PK

Anyone interested in front and backend Flow support as part of the build? I found it a bit confusing to have to remove flow types from both front and backend files for builds.

Hi thanks for this boilerplate,
I like the structure but I noticed that I can access all files through browser (for example src/server/myPasswords.json is accessible).
How can I avoid that and make the "public" folder the only one to actually be public ?

Hi @crsandeep

When running dev, my routes are not proxied when attempting to access the express backend so the UI is not showing my username. I am receiving the following error:

GET http://localhost:3000/api/getUsername 404 (Not Found)

My webpack.config.js file contains:

devServer: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
      secure: false,
      historyApiFallback: true
    }
  },

And my express server is confirmed running on port 8080 and I am able to hit the /api/getUsername endpoint via Postman and receive a proper response.

My packages are up to date and adjusted code accordingly:

"devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "concurrently": "^4.1.0",
    "css-loader": "^3.0.0",
    "html-webpack-plugin": "^3.2.0",
    "nodemon": "^1.19.1",
    "style-loader": "^0.23.1",
    "webpack": "^4.34.0",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.2"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "clean-webpack-plugin": "^3.0.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "file-loader": "^4.0.0",
    "lodash": "^4.17.11",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "url-loader": "^2.0.0"
  }

I would appreciate any help with this! Thank you.

When i go to port 3000 the page comes up with
This site can’t be reached X refused to connect.
I have changed none of the webpack code.

Am looking at the instructions on this page here: https://webpack.js.org/loaders/sass-loader/
Basically, install a couple packages and drop a config into webpack.

Do you think there might need to be anything else done for webpack build?

For example I'm going inside server/index.js and add:

app.get('/about', (req, res) => {
  console.log('test');
});

And all I get is a "Cannot GET /about" message in the browser and nothing is shown in the server console. Does webpack overrides that or something?
If I add app.get(/api/about) it will run the console log although I'll still see the "Cannot GET /about".

How can I add get/post responses with this boilerplate?

Thanks and sorry if my questions are irrelevant.

C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main>npm run build

[email protected] build
webpack --mode production

clean-webpack-plugin: C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\dist has been removed.
Hash: 7537dbd4ce8986eb8770
Version: webpack 4.47.0
Time: 3812ms
Built at: 18/10/2023 9:24:30 am
1 asset
Entrypoint main = bundle.js
[94] (webpack)/buildin/global.js 472 bytes {0} [built]
[133] ./src/client/react.png 14 KiB {0} [built]
[134] multi babel-polyfill ./src/client/index.js 40 bytes {0} [built]
[341] ./src/client/app.css 1.06 KiB {0} [built]
[342] ./node_modules/css-loader/dist/cjs.js!./src/client/app.css 221 bytes {0} [built]
[346] ./src/client/index.js + 1 modules 5.38 KiB {0} [built]
| ./src/client/index.js 181 bytes [built]
| ./src/client/App.js 5.19 KiB [built]
+ 341 hidden modules

ERROR in bundle.js from Terser
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:69:19)
at Object.createHash (node:crypto:133:10)
at C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\terser-webpack-plugin\dist\index.js:217:37
at Array.forEach ()
at TerserPlugin.optimizeFn (C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\terser-webpack-plugin\dist\index.js:160:259)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\tapable\lib\HookCodeFactory.js:33:10), :7:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\tapable\lib\Hook.js:154:20)
at C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\webpack\lib\Compilation.js:1409:36
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\tapable\lib\HookCodeFactory.js:33:10), :6:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\tapable\lib\Hook.js:154:20)
at C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\webpack\lib\Compilation.js:1405:32
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\tapable\lib\HookCodeFactory.js:33:10), :6:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\tapable\lib\Hook.js:154:20)
at Compilation.seal (C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\webpack\lib\Compilation.js:1342:27)
at C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\webpack\lib\Compiler.js:675:18
at C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\webpack\lib\Compilation.js:1261:4
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\tapable\lib\HookCodeFactory.js:33:10), :24:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\tapable\lib\Hook.js:154:20)
at Compilation.finish (C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\webpack\lib\Compilation.js:1253:28)
at C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\webpack\lib\Compiler.js:672:17
at _done (eval at create (C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\tapable\lib\HookCodeFactory.js:33:10), :9:1)
at eval (eval at create (C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\tapable\lib\HookCodeFactory.js:33:10), :32:22)
at C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\webpack\lib\Compilation.js:1185:12
at C:\Users\RUDRA\OneDrive\Desktop\Simple-Multi-Page-Wbsite-wih-Node-main\node_modules\webpack\lib\Compilation.js:1097:9
at process.processTicksAndRejections (node:internal/process/task_queues:77:11)
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html 497 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
+ 1 hidden module

Excellent build, excellent docs. A "Getting Started" timesaver.

Hey,

can you add how to manage routes in frontend, for backend we are using express...

Hi, I need help deploying this to heroku.
The backend works but it's not connecting to the front-end.

This has been very helpful!

Anyone know how do you deploy to NodeIIS? I can update the config to server/index.js, but that only takes me to the API.

How do you point to client/App.js?

In the page server.js I noticed straight you are not generating & injecting the JSX of the app into an html page like me I do on my fresh repo

A lot of tutorials indicate how to inject stuff into an html page for search engines like Google. I wanna avoid a blank page on search engines.
Could you confirm me there won't be blank page ?

Because whatever I have many other problems with my repo I can't import ES6 stuff in the server side like .jpg .svg.
Babel does not make all this, even with @babel/register and @babel/cli

I don't care about redux injection of the initial state...

I like your code a lot 👍, one star for you while waiting for your answer.

The devDependency nodemon was updated from 1.18.5 to 1.18.6.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

nodemon is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

When I make a request. It proxies it, and returns the json that my express returns. But I have it set up so that the react app should get the request and render components based on that request. It worked with my other dev environment. Just not with this proxy
https://github.com/andrew-linck/TourneyStack

Hi.
Thanks for fixing the images, it works all good now.
For my react app, I have the following routes to display the components of sign-up and sign-in pages.

  <Switch>
              <Route exact path="/" component={Signin}/>
              <Route path="/auth/sign-in" component={Signin}/>
              <Route path="/auth/sign-up" component={Signup}/>
    </Switch>

When I run my react app as standalone (without the simple-react-full-stack repo) it works perfectly and no errors, but after implementing my own react files to the simple-react-full-stack repo, the paths (/auth/sign-up and /auth/sign-in) keep saying error 404's, what could be the issue, should it be acting like that?

Another question is, any plans for Docker deployment?

Can you please move the webpack package to "dependencies" from "devDependencies" in package.json? In production you would need webpack to bundle the react app.

Also, not sure if you would need to move any of the other packages in "devDependencies" to "dependencies", but maybe you could take a look.

Thanks!

There have been updates to the react monorepo:

• • The dependency react was updated from 16.6.1 to 16.6.2.

• The dependency react-dom was updated from 16.6.1 to 16.6.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the react group definition.

react is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

See https://webpack.js.org/migrate/5/

We use this as a template for our projects and wanted to know if this repo can be updated to webpack v5 so we know how to upgrade our own repos.

Hi.
Great project, helped me alot.
I have issues with displaying images on front end, my paths for images are something like <a href="/"><img src="/images/logo-3.png" </a> But always getting error 404 even though they exist. I added the images folder to the public folder.

Hello, thanks again for this great boilerplate,
how would it be possible to allow ES6 for server-side code ?
I can't figure out how to configure babel to achieve this...

Running 'npm run dev' opens the client and server perfectly fine, but a 'npm run build', with the current webpack configuration, creates a problem. When I upload the files to a webserver, the fetch call to /api/getUsername returns a 404 Not found error.

Any suggestions as to how to fix this would be greatly appreciated. :)

Thanks for setting this up. Was wondering how this code is licensed? I did not see a LICENSE file in the repo

More info: https://help.github.com/en/github/building-a-strong-community/adding-a-license-to-a-repository

Hey
Is it possible to add to this boilerplate a way to serve static files from the express server ...
<img src="/path/to/image/img.jpg />
Many thanks

will you accept a PR to include this babel plugin?

Currently I am looking for a good boilerplate to work with. I am wondering if your solution is great for doing SSR stuff. As far as I can see you connect the client to the server with the /api prefix, but the routes for the frontend seems only to get rendered on client and not on server.

My last projects were always done in this way:

• create a wildcard url for all pages
• return with react rendered HTML to client
• return also a payload for graphql, redux etc. for the client
• init then react with the prebuild dom

This is how I solved the SSR stuff. Does you project provide a solution to do the SSR thing (for SEO purpose only)

Hello,

I have a project using this boilerplate and am running into this error:

[HPM] Error occurred while trying to proxy request /api/prescriptions from localhost:3000 to http://localhost:8080 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)

I'm not able to connect to the API from the frontend of app or from my Insomnia API client. I've tried a few different updates to the webpack config such as using https, replacing localhost with [::1], and replacing localhost with 127.0.0.1 without any success.

Do you have any familiarity with this issue?

Here's a link to the project with this issue: https://github.com/katmorris8/pillbox

Thanks for taking a look!

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Hi,

First thanks for this boilerplate! It got me started with the react-full-stack.

Corrections for the Webpack config, in order client roots to be handled in the client:
output: { publicPath: '/' }
devServer: { historyApiFallback: true }

Also, I can contribute my prettier+eslint config

Also, this modification in the package:

    "client": "webpack-dev-server --hot  --color --progress --mode development -d",
    "server": "nodemon -r esm --watch src/server --inspect src/server/index.js",
    "dev": "concurrently --kill-others \"npm run server\" \"npm run client\"" 

esm enables es6 imports in node

Thanks again

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Thanks for putting this together- it helped me get up an running so fast.

I have had no problems running the development environment with webpack-dev-server and the configuration provided, but when I try to run a build in production mode, I get the success message from clean-webpack-plugin but then nothing at all. No errors, no output, no dist/. I'm not sure what I did but I have no clue why I'm not getting a bundle and html file to my output.

The only modification I made to the config was adding this:

From what I read here webpack-contrib/css-loader#447 due to an error with a dependency.

Any help on where my issue could be coming from? It would be HUGELY appreciated.

Hey, I tried to make a "Electron" version of this great boilerplate but I can't find a way to make it work.
Any idea ?
PS: Sorry I don't know how to put a "discussion" or "enhancement" label on this