burkeholland / express-react-starter Goto Github PK

View Code? Open in Web Editor NEW

199.0 12.0 79.0 1.73 MB

A starter template for running React and Express from the same project

HTML 19.31% JavaScript 65.92% CSS 11.68% Pug 3.09%

express-react-starter's Introduction

Express React Starter

This is a template for using Express and React in the same project. It is based on Create React App.

Read the article: Introducing Express React Starter

OR...

Prerequisites

create-react-app

Installing

git clone 'this-repo-url' app-name
cd app-name
npm install

Running The App

The template can be run in development, or in production. For development, use the following workflow.

Start the React App

npm start

Start the Express Server

cd server
npm start

This will start both the frontend and API. Both will be reloaded automatically when you make changes.

What Is Happening Here?

Create React App and the Express server are running on different processes. This is so that React can still use in memory Webpack to do hot reloads really fast.

All AJAX/fetch requests to /api are sent back to the Express server which is serving all /api routes from the routes/index.js file. This is done via a proxy setup in the package.json file.

Building For Production

In production, you want Express to serve up your app.

Build React App

npm build

This will build the entire app into the "build" folder. This is the folder that you would deploy to your server. The entrypoint is server.js. You can test the production build locally by running...

npm start

Now simply visit the Express app at 'http://localhost:3000' and you will see your app served from the 'build' folder. That's all there is to it!

express-react-starter's People

Contributors

Stargazers

Watchers

Forkers

startupsandcode mallikarjunece varunjha089 mymonstermaggie gustvegas kernelmed beastneedsmoretorque charleswong28 mylearing stecor jehnsen zburgermeiszter dfeeney87 cyruslk solllve arch-vile jsrj jtnix ssinha3 manotluijiu tk-the-bad-coder drawbit dimitri-a maximdrobchak ericzhou0815 joeingledew nerwin anhbaysgalan1 renatopassos dipjyotimetia adexot mshafiqmk sirrobert ildarik jonbiro chitrank-dixit pradeep026 silas-asamoah johnpaulchukwu43 carverme thi-tran trautmaa manishpoduval mformarlon mstrass mjherzalla lin-dev hazelnutsworkgroup wengchanghe-ray sefaokumus seunekunkoya pharce nathanhbsimmons mohammedalbilbeisi jc4rp3nt3r marisaaquilina joshuscurtis webface levot8 alan-chenhx andimalfresh strudyb jesusvictorino dmoldovan123 meghanaashankar wancieho suhayl22 eazyhunting simon-bertram tsowems seagulley sweedishhfish04 henriquezproductionsllc inservicios pvanderlaat arunkumar413 itzrnvr mrjoshua2282 anushaa1993

express-react-starter's Issues

How Can I change application port ?

Try to change all the occurrences of the number 3000 , no working for me .

Any Ideas ?

tests are failing

I cloned the repo, run npm install and npm test a.

resultet in

 RUNS  src/App.test.js
/Users/dnltsk/projects/express-react-starter/node_modules/react-scripts/scripts/test.js:22
  throw err;
  ^

TypeError: Network request failed
    at XMLHttpRequest.xhr.onerror (/Users/dnltsk/projects/express-react-starter/node_modules/whatwg-fetch/fetch.js:436:16)
    at XMLHttpRequest.callback.(anonymous function) (/Users/dnltsk/projects/express-react-starter/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:289:32)
    at invokeEventListeners (/Users/dnltsk/projects/express-react-starter/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
    at invokeInlineListeners (/Users/dnltsk/projects/express-react-starter/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:166:7)
    at EventTargetImpl._dispatch (/Users/dnltsk/projects/express-react-starter/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:122:7)
    at EventTargetImpl.dispatchEvent (/Users/dnltsk/projects/express-react-starter/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
    at XMLHttpRequest.dispatchEvent (/Users/dnltsk/projects/express-react-starter/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)
    at XMLHttpRequest.abort (/Users/dnltsk/projects/express-react-starter/node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:405:16)
    at Object.abort (/Users/dnltsk/projects/express-react-starter/node_modules/jsdom/lib/jsdom/living/xhr-utils.js:315:13)
    at RequestManager.close (/Users/dnltsk/projects/express-react-starter/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:146:21)
    at Window.close (/Users/dnltsk/projects/express-react-starter/node_modules/jsdom/lib/jsdom/browser/Window.js:362:29)
    at JSDOMEnvironment.dispose (/Users/dnltsk/projects/express-react-starter/node_modules/jest-environment-jsdom/build/index.js:44:19)
    at Promise.resolve.then (/Users/dnltsk/projects/express-react-starter/node_modules/jest/node_modules/jest-cli/build/runTest.js:102:17)
    at <anonymous>
npm ERR! Test failed.  See above for more details.

Using npm 5.6.0, node v9.4.0, High Sierra

Whats wrong?

why there is error mv build server ?

After building the project for production iam getting this error
'mv' is not recognized as an internal or external command,

Needed more explanation

Hey man could you please explain more about this module? i've tried whatever you told me to but its not working

Why can't we have hot reload for .js files?

Webpack's HMR allows hot reloading js files without doing a full page refresh. This is great when working with state because it doesn't get lost in the refresh.

Is there any specific reason this starter doesn't allow hot reload of .js files?

Service unavailable after azure deploy.

Downloaded and builded the app, after deployment to the azure and try to enter webap url server is responding with err 503 and message on page Service Unavailable. Did same on fresh installation but having the same result.

Best practices suggestions

Hey, I just read the article on medium. Thanks!

Based on the best practices guide, I have a few suggestions:

I am not sure if azure has a way to pass flags to the docker command. So it would be better to integrate the lightweight init system tini into the Dockerfile itself. Relevant docs section - Handling kernel signals
The base image used is mhart/alpine-node which does not immediately convey the exact node version being used. Additionally, why not use node official image? There's one for alpine as well.
By default, docker is run with a privileged root user. This isn't recommended as it is a security concern. The official node docker images provide a non-root user that you can use to run the actual process.
The express recommendations for performance, among other things, recommends setting the NODE_ENV environment variable to 'production'. This is mentioned in the best practices guide as well.

I am by no means an expert on the subject but I collated some notes while I was trying to setup Docker for something at my workplace. Maybe you will find it useful - https://github.com/sudo-suhas/docker_notes/blob/master/11-docker-for-node-js.md#dockerfile.

constantinople 3.0.2 arbitrary code execution vulnerability

jade "~1.11.0" in /server/package.json is dependent on constantinople 3.0.2
jade was last update 8 years ago.
Replaced by pug

constantinople 3.0.2 has a sandbox bypass vulnerability leading to arbitrary code execution.
The earliest fixed version of constantinople is 3.1.1

https://osv.dev/vulnerability/GHSA-4vmm-mhcq-4x9j

Upgrade project to use pug instead of jade

warning [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
warning jade > [email protected]: Deprecated, use jstransformer

Add script to run server and app at same time

Hi! Love your starter repo. You mention in your Medium article that it's possible to run both server and app simultaneously using node server/server.js & npm start.

I added a small script to package.json to do this and save typing:

"server-start": "node server/server.js & npm start"

If you think it's worthwhile, happy to commit a small PR to add that script to the package. Thanks!

A couple questions about your strategy...

These aren't so much issues, but requests for clarification...

creat-react-app has a proxy facility for an api server (as described in https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) Does this project (express-react-starter) replace the need to have a separate proxy dev server?
create-react-app is still evolving. Do you plan to continue to track create-react-app, and just run their update scripts as needed? Or does using express-react-starter require me to eject my project from the mainline create-react-app?
I found this project from the Medium article. You should include a link to it (https://medium.com/burke-knows-words/introducing-express-react-starter-b6d299206a3a) in the README.md since it's such a good exposition about the project

Thanks!