crsandeep / simple-react-full-stack Goto Github PK
View Code? Open in Web Editor NEWBoilerplate to build a full stack web application using React, Node.js, Express and Webpack.
Boilerplate to build a full stack web application using React, Node.js, Express and Webpack.
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:
This is how I solved the SSR stuff. Does you project provide a solution to do the SSR thing (for SEO purpose only)
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.
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
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.
dependency
react was updated from 16.6.1
to 16.6.2
.dependency
react-dom was updated from 16.6.1
to 16.6.2
.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.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
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.
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?
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. :)
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!
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.
Hi, I need help deploying this to heroku.
The backend works but it's not connecting to the front-end.
Excellent build, excellent docs. A "Getting Started" timesaver.
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.
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
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 ?
Hey,
can you add how to manage routes in frontend, for backend we are using express...
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
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!
🚨 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.
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...
will you accept a PR to include this babel plugin?
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.
🚨 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.
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.
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
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?
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?
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.
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
1.18.5
to 1.18.6
.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.
The new version differs by 1 commits.
521eb1e
fix: restart on change for non-default signals (#1409) (#1430)
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.