I am going to do a fullstack implementation with WebStorm IDE. I use react.js and node-express for this. I can do this in separate projects. But I want to know how to implement both backend and frontend in WebStorm project while configuring ports.
When starting the frontend we can give start html file in package.json file under "start": "parcel index.html". When starting backend we can give "node app.js" But this can be done when we are doing the implementation in two different projects.
But if we are doing both frontend and backend how can I start react part and node-express part on two different ports? For example:
- react app > localhost:1234
- node-express > localhost:3000
"start": "parcel index.html"
"start": "node app.js"
// in package.json we can set only one start
You can use a package like npm-run-all to achieve this. Install it then have two separate scripts (like start-front-end and start-server) in your package.json that npm-run-all runs both of e.g.
"scripts": {
"start-front-end": "parcel index.html --open",
"start-server": "node app.js",
"start": "npm-run-all start-server start-front-end",
}
Related
I have a client app created with create-react-app and it uses typescript. My directory structure is like this (apologies if it's confusing):
-MyApp (folder)
-node_modules (folder)
-package.json (has a script that runs the react client app and the mockApi using, 'ts-node mockApi/server.ts')
-tsconfig.json (this uses module:esnext because apparently CRA requires it?)
-src (folder)
-components
etc.
-MockApi (folder level with MyApp)
-tsconfig.json (uses module:commonJS for server.ts)
-server.ts (creates a json-server in express/node using import syntax)
-mockData (folder)
-index.ts (gathers domain types into single objects)
-someEntity.ts (domain type)
I have in my main package.json a couple scripts. One runs the command 'ts-node mockData/server.ts' to load my typescript mock api on its own port. The other script runs the normal react-scripts to load the react client on localhost:3000. I'm using a lib that allows scripts in parallel.
Before I added this to my existing app, I created the mock api in its own project with typescript and json-server to ensure it would work, and it did. But the "module" key in the api's tsconfig needs to be "CommonJS" to do the dynamic imports. I figured it would work in a create-react-app project if the mock api had its own tsconfig file set to CommonJS. But the script to load the api causes an error.
When I run it, it says "import xxxx is not a module" (in server.ts). The package.json script is using the tsconfig settings in my main project to load the server.ts file, using "module:esnext", instead of commonJS, as defined in my api tsconfig. How do I tell it to use the settings in the other tsconfig?
Here is my scripts section in my CRA package.json:
"scripts": {
"start": "run-p start:dev start:api",
"start:dev": "cross-env REACT_APP_API_URL=http://localhost:3000 react-scripts start",
"start:api": "ts-node ./mockApi/server.ts",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
And the start:api script is where it's blowing up in my server.ts (the first import):
import jsonServer from "json-server";
import mockData from "./mockData/index";
Is it just not possible to do what I'm trying to do with create-react-app? I've tried to research this but I cannot find anything that mentions this specific issue. Every json-server example is in JS. But json-server has #types for TS so I don't get why this issue isn't documented. Surely others use Typescript with Json-server and c-r-a.
Thank you
So in case anyone has this question, the answer was to have a script in my ui's package.json that goes to my mock api folder and runs a script in that folder's package.json to start the api, and then run my create-react-app script. So I changed my root/package.json to:
"scripts": {
"start:api": "cd mockApi && npm run start",
"start": "run-p start:api start:dev",
"start:dev": "cross-env REACT_APP_API_URL=http://localhost:3000 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
then in my root folder, just run this to kick it off:
npm run start
And obviously in my mockApi/package.json I have
"scripts": {
"start": "ts-node server.ts"
}
This works great.
I am building an application with:
React 16.4.0
Electron 2.0.2
Webpack 4.11.0
webpack-dev-server 3.1.4
This application uses hot-reload (as far as that is currently working...) for development. Every time I want to start my project I have to start 2 tasks right after eachother and it is getting annoying. There has to be a faster way. Is there any way I can start them with 1 node task and they startup after each other?
I must note that the dev server must be done with compiling before the electron app can be started.
package.json
"main": "main.js",
"scripts": {
"build": "webpack-dev-server --config webpack.dev.js --hot",
"start": "SET NODE_ENV=development&& electron ."
},
I've done something like this on a recent project using concurrently.
$ npm i -SD concurrently
And then in your package.json
"scripts": {
"dev-server": "webpack-dev-server --config webpack.dev.js --hot",
"electron-dev": "SET NODE_ENV=development && electron .",
"start": "concurrently --kill-others --names \"webpack,electron\" \"npm run dev-server\" \"npm run electron-dev\""
},
This does not, unfortunately, wait for the bundle to finish. But I find I can just hit reload (Ctrl/Cmd + R) once in the Electron app after the build finishes and I'm good to go.
I'm building a client with react and am running npm start and in package.json my scripts look like this:
"scripts": {
"start": "webpack-dev-server"
}
But i've also code other server side code in server/app.js that I want to run and if I run node app.js then that runs but i'd like server/app.js to be included with webpack-dev-server so that when I run npm start server/app.js is also run.
Is that possible? I was reading up on the various options and at this stage after the simplest.
Thx.
Update your script as follows:
"scripts": {
"start": "webpack-dev-server && node app.js"
}
I have a nodejs API as server and React/Redux app as client located in one git project: https://github.com/lafisrap/fcc_nightlife.git
I want to deploy it on Heroku using the heroku cli.
The scripts section in package.json is:
"scripts": {
"start-dev": "concurrently \"yarn run server\" \"yarn run client\"",
"start": "yarn run server | yarn run client",
"server": "babel-node server.js",
"client": "node start-client.js",
"lint": "eslint ."
},
start-client.js:
const args = [ 'start' ];
const opts = { stdio: 'inherit', cwd: 'client', shell: true };
require('child_process').spawn('yarn', args, opts);
In the client folder I have another package.json which defines the client. The scripts section of it:
"scripts": {
"start": "react-scripts start",
}
I did:
heroku create
git push heroku master
The api is running fine. But I don't know how to start/access the client.
You CAN NOT deploy two services in one Heroku app. In short, you have to deploy them to separate Heroku dynos to deploy two apps.
More information is provided in this stackoverflow answer to a similar question.
PS: It is always an option to serve JS files from your API server after building React files.
Hope this helps!
This repo shows the setup of Node.js serving up a React frontend running on a single Heroku dyno: https://github.com/mars/heroku-cra-node I was able to get one up and running using this as a guide.
Actually you must not want to run on different ports. because of cors and other issues. Implement proxy in nodejs OR implement nginx as a gateway for both server and client requests.
I am writing a Node.js app and using Heroku to host it. And also I use Webpack + Babel to bundle all my server files into one and to use ES2015 syntax. But the thing is, I need to build my app before running it. So I put this command into package.json:
"scripts": {
"start": "webpack && node build/server.js"
},
This works, but the problem is, when I run heroku restart, my app runs only after rebuild. And the same story when my app crashes.
So I guess I need 2 different commands: one on deploy (webpack) and one in npm start (node build/server.js)
How can I accomplish this?
Actually it was not that hard. Just had to change my package.json to
"scripts": {
"heroku-postbuild": "webpack",
"start": "node build/server.js"
}
(according to this article: Heroku Node.js Support)