esausilva / example-create-react-app-express Goto Github PK

Hi esausilva,
Thanks for sharing the app. It was very useful to get me started with react/express.
I would like to ask you how I could deploy manually the files to a server. Which files and folders do I have to place on the server and what needs to be the file structure.
Thanks

Hi there.

I tried your repo in hopes of solving create-react-app and node api issues after build. In development, your project worked fine. But after building, I serve the project and it gives a 404 immediately.

I was working on a project which is basically React as frontend and all the backed with Express, But was confussed how to us ethem. I cloned the repo and try runnign the "yarn dev" and it gave me the error you see in the title. I am fairly new to this type of setup so consider me as a rookie.

I am facing this error while using es6 syntax
SyntaxError: Unexpected token export
Is there any way to upgrade the babel or web pack to support es6 syntax

How to reproduce the error
create a file test.js inside root folder

import axios from "axios"
const fun = function(){
    // write your logic
}
export default fun;

error log

SyntaxError: Unexpected token export
[0]     at Module._compile (internal/modules/cjs/loader.js:723:23)
[0]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
[0]     at Module.load (internal/modules/cjs/loader.js:653:32)
[0]     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
[0]     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
[0]     at Module.require (internal/modules/cjs/loader.js:692:17)
[0]     at require (internal/modules/cjs/helpers.js:25:18)
[0]     at Object.<anonymous> (/home/mirsahib/Desktop/MERN_WS/example-create-react-app-express/routes/scraper.routes.js:2:27)
[0]     at Module._compile (internal/modules/cjs/loader.js:778:30)
[0]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)

Getting the following error on VS Code

Failed to load the ESLint library for the document /Users/[username]/projects/example-create-react-app-express/engine.js
To use ESLint please install eslint by running npm install eslint in the workspace folder example-create-react-app-express

I suppose this project relies on a global Eslint installation?
If so maybe I'd suggest migrating to a local configuration, since global dependencies are no longer the recommend way to use JS dependencies, unless in very specific cases.

Hi, thank you for this tutorial.
However, I dont know why my react client starts at port 5000, which is supposed to be the port for express backend. Could you let me know how to fix this. Thanks.

After deploying my app on Heroku, I get the following error:
GET https://weetweet.herokuapp.com/api/hello 503 (Service Unavailable)

My locally hosted app (which works perfectly) is running on localhost:3000 and the express server is running on localhost:5000. I set up the proxy as you did

{ "proxy": "http://localhost:5000/" }
and the fetch call like this fetch('/api/hello') and fetch('/api/posts') (i switched world to posts)

Should I be doing something else so that Heroku can serve the backend somewhere?

Here is my code: https://github.com/andrew-levy/Twitter-React-Express
Here is the web app: https://weetweet.herokuapp.com/

p.s. Thanks for the code boilerplate and the article guiding me through the process!

I pulled in https://www.npmjs.com/package/cors and used in server.js but it does seems to work for me

I currently developing based on this repository. I wonder how to use this in Codesandbox.

When I use it in codesandbox it shows lots of errors.

It seems the error from scripts but I don't know where should I fix it.

Can you check it please?

https://codesandbox.io/s/github/esausilva/example-create-react-app-express

Here is my package json in the serverside
{ "name": "tidy-sum", "version": "1.0.0", "scripts": { "client": "cd client && yarn start", "server": "nodemon server.js", "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"", "start": "node server.js", "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build" }, "dependencies": { "body-parser": "^1.18.3", "cors": "^2.8.5", "express": "^4.16.4", "knex": "^0.16.3", "morgan": "^1.9.1", "pg": "^7.8.0" }, "devDependencies": { "concurrently": "^4.0.1" } }

I am now trying to add redux to the app, I am wondering are there an alisis in place that will restrict the 'redux' from being reconised?

As when booting up the server I get the following.
../node_modules/react-redux/es/components/Provider.js Module not found: Can't resolve 'react' in '/home/hutber/node_modules/react-redux/es/components'

{
  "name": "example-create-react-app-express",
  "version": "1.0.0",
  "description": "Example on using create-react-app with a Node Express Backend",
  "author": {
    "name": "Esau Silva",
    "email": "[email protected]",
    "url": "https://esausilva.com"
  },
  "license": "MIT",
  "scripts": {
    "client": "cd client && npm start",
    "server": "nodemon server.js",
    "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\"",
    "dev:server": "cd client && npm run build && cd .. && npm start",
    "start": "node server.js",
    "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
  },
  "dependencies": {
    "body-parser": "^1.18.3",
    "connected-react-router": "^5.0.1",
    "express": "^4.16.4",
    "google-spreadsheets": "^2.0.0",
    "react-redux": "5.0.7",
    "redux": "^4.0.1"
  },
  "devDependencies": {
    "concurrently": "^4.0.1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/esausilva/example-create-react-app-express.git"
  },
  "bugs": {
    "url": "https://github.com/esausilva/example-create-react-app-express/issues"
  },
  "keywords": [
    "node",
    "express",
    "create-react-app"
  ]
}