I'm trying to setup my create-react-app instance with webpack-dev-server.
This is my package.json file
{
"name": "reactgs",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-scripts": "1.0.14"
},
"scripts": {
"start": "react-scripts start",
"build": "webpack-dev-server --entry ./node_modules/react-scripts/bin/react-scripts.js --output-filename ./dist/bundle.js --inline --progress",
},
"devDependencies": {
"webpack-dev-server": "^2.9.1"
}
}
I don't have a webpack.config.js file.
When I run
npm run build
The output appears as
The following line runs fine.
npm start
I also have webpack setup fine on the same machine for a different project.
Does anyone know how to properly configure webpack for create-react-app?
npm start does the HMR for you out-of-the box. It will host your application using webpack-dev-server --hot itself. You just need to hook the HMR code to tell webpack what to watch and reload as necessary.
This GitHub conversation offers a pretty decent simple solution for hooking HMR (https://github.com/facebookincubator/create-react-app/issues/2317) with and without Redux.
Related
When I create a new Svelte App as explained in the doc https://kit.svelte.dev/docs/introduction#getting-started , I'm doing:
npm create svelte my-app
cd my-app
npm install
npm run dev
Then when I go to http://localhost:3000
I go the following error, while I didn't do anything yet..
Function called outside component initialization
Error: Function called outside component initialization
at get_current_component (/node_modules/svelte/internal/index.mjs:953:15)
at Module.setContext (/node_modules/svelte/internal/index.mjs:985:5)
at root.svelte:14:1
Here is the packaga.json I have:
{
"name": "dapp",
"version": "0.0.1",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"package": "svelte-kit package",
"preview": "vite preview",
"prepare": "svelte-kit sync"
},
"devDependencies": {
"#sveltejs/adapter-auto": "next",
"#sveltejs/kit": "next",
"svelte": "^3.46.0",
"vite": "^2.9.13"
},
"type": "module",
"dependencies": {
"#fontsource/fira-mono": "^4.5.0",
"cookie": "^0.4.1"
}
}
Most likely, it is related with the new version using "vite", but I have absolutely no idea on how to solve this...
I just had this problem, and it happens that the version of vite is outdated.
I fixed the problem by updating vite to the latest version:
yarn upgrade vite --latest
I am trying to deploy a nodejs app onto Azure App Service. I did the basics of deploying it, but it's failing to run. It seems it is designed to run "node run.js" commands rather than "npm run start".
I'm playing in the console, and if I try to run npm run start manually, I get a series of errors tied to build. Basically:
'tsc' is not recognized as an internal or external command
I'm wondering if there's something really obvious here about how tsc (and others) can be added to path. I have to admit, I'm not particularly well versed in using Azure or Node for that matter. Any help would be very much appreciated! Thanks!
This is the package.json file:
{
"name": "test-scraper",
"version": "0.1.1",
"description": "",
"main": "dist/main.js",
"scripts": {
"build": "tsc",
"build:dev": "tsc --watch",
"prestart": "npm run build",
"start:dev": "nodemon",
"start": "pm2 start dist/src/main.js --node-args=\"-r ./tsconfig-paths-bootstrap.js\" && pm2 monit",
"stop": "pm2 delete main"
},
"author": "",
"license": "MIT",
"devDependencies": {
"#types/lodash": "^4.14.161",
"#types/node": "^14.11.8",
"#types/puppeteer": "^3.0.2",
"nodemon": "^2.0.4",
"prettier": "^2.1.2",
"typescript": "^4.0.3"
},
"dependencies": {
"axios": "^0.20.0",
"discord-webhook-node": "^1.1.8",
"lodash": "^4.17.20",
"messaging-api-telegram": "^1.0.1",
"playwright-firefox": "^1.4.2",
"pm2": "^4.5.0",
"tsconfig-paths": "^3.9.0",
"winston": "^3.3.3"
}
}
Run this command locally for installing typescript, because your code is compiled with the tsc command.
npm install -g typescript
Mostly I was following this tutorial.
Add the tsc command to package.json and add the dependencies:
"build": "tsc --project ./"
...
"devDependencies": {
"#types/express": "^4.17.9",
"#types/node": "^14.14.20",
"ts-node": "^9.1.1",
"typescript": "^4.1.3"
},
Here is my file structure:
I add a empty file.ts and add this scripts to the tsconfig.jason file:
"exclude": [ "src", "wwwroot" ],
"include": [ "file.ts" ]
Deploy through Azure Web App deployment center:
And the app build (tsc) run successfully:
if you are deploying to Production (NODE_ENV: production), devDependencies will no longer being installed, and you need to edit your package.json and move typescript to dependencies.
Source
I'm trying to deploy a 'create-react-app' project to Heroku. I used the Heroku Create-React-App boilerplate and followed another tutorial on setting up a backend api for connecting to my custom server.js file.
When I deploy to Heroku, the build runs fine but my app still will not connect to my server.js file.
I assume this is either because the proxy property in my package.json is supposed to point to the same port defined in my server.js file (which Heroku would assign automatically, which I don't know how to check) or perhaps my server.js file isn't running at all.
Been having a very hard time finding any resources that properly explain how to deploy a 'create-react-app' with a custom back-end (server.js).
package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"proxy": "https://localhost:5000",
"dependencies": {
"axios": "^0.17.1",
"body-parser": "^1.18.2",
"md5": "^2.2.1",
"mongodb": "^3.0.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2"
},
"scripts": {
"start": "react-scripts start",
"start:server":"node server.js",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Line in server.js where I set the port:
const port = process.env.PORT || 5000;
I was able to deploy my app to Heroku by following this tutorial from fullstackreact.com and studying the accompanying repo.
Basically, I needed to bundle my client-side code and then make sure my server.js file was serving that bundle as a static file. I'm sure there's other ways to go about this, like running concurrent scripts for the webpack-dev-server and the backend api (server.js), but this worked for me without much headaches.
Here I am having a little addiction problem with reaction-native since yesterday................
it completely blocks me from navigating to certain screens etc.
Here is a copy of package. json:
{
"name": "test2",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "1.7.0",
"jest-expo": "^22.0.0",
"react-test-renderer": "16.0.0-beta.5"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^22.0.2",
"mobx-react": "^4.3.4",
"react": "16.0.0-beta.5",
"react-native": "^0.49.5",
"react-native-elements": "^0.18.2",
"react-native-keyboard-aware-scroll-view": "^0.4.1",
"react-native-router-flux": "4.0.0-beta.23",
"react-navigation": "^1.0.0-beta.19"
}
}
How to install these outbuildings?
Where can I fix my problem if you've already had it, see?
thx!
You haven't installed the dependencies in your app. Either running
npm install
Has produced errors for those npm libraries, or it simply hasn't been run. Try running it, and if it still doesn't work, take a look at the contents of ./npm-debug.log for error messages related to it.
ETA: Looking closer, it seems that several of your dependencies require peers of specific versions of react, but you have a different version of react installed.
Are you using react#16.0.0-beta for a specific reason? Things like mobx are looking for react 13/14/15/16, but not 16b. I'd try this:
npm remove -S react
npm install -S react
and see if that works. If you were using the React beta for a reason, you may struggle to get these to talk to each other.
What do I put in my Procfile to deploy an ember-cli generated app to Heroku?
=== web (1X): `ember server`
web.1: crashed 2014/04/10 13:19:57 (~ 48s ago)
=== web (1X): `npm start`
web.1: crashed 2014/04/10 13:22:11 (~ 2m ago)
You could use the Heroku Ember CLI buildpack: https://github.com/heroku/heroku-buildpack-emberjs
I have this in my Procfile and it's is working for me:
web: ember serve --environment production --port $PORT
I followed the instructions from this gist, which is where I got that Procfile.
The ember-cli version and dependencies in the gist are out of date, which was causing my app to crash similar to yours.
I needed to add/replace the packages listed in the "dependencies" section of my package.json file with the packages ember-cli puts into the "devDependencies" section of package json. When I was done my package.json file looked like this:
{
"name": "your-apps-name",
"version": "0.0.0",
"private": true,
"directories": {
"doc": "doc",
"test": "test"
},
"scripts": {
"start": "ember server",
"build": "ember build",
"test": "ember test",
"postinstall": "bower install"
},
"repository": "https://github.com/stefanpenner/ember-cli",
"engines": {
"node": ">= 0.10.0"
},
"author": "Your Name",
"license": "Your App's License",
"devDependencies": {
"ember-cli": "0.0.28",
"originate": "0.1.5",
"broccoli-ember-hbs-template-compiler": "^1.5.0",
"loom-generators-ember-appkit": "^1.1.1",
"express": "^4.1.1",
"body-parser": "^1.2.0",
"glob": "^3.2.9"
},
"dependencies": {
"bower": "^1.3.3",
"broccoli-template": "0.1.1",
"ember-cli": "0.0.28",
"originate": "0.1.5",
"broccoli-ember-hbs-template-compiler": "^1.5.0",
"loom-generators-ember-appkit": "^1.1.1",
"express": "^4.1.1",
"body-parser": "^1.2.0",
"glob": "^3.2.9"
}
}
Procfile:
web: npm run start
Package.json:
"scripts": {
"start": "ember serve --port=${PORT}",
"build": "ember build",
"test": "ember test",
"postinstall": "bower install"
},
and rename devDependencies block and add bower as a depency:
"devDependencies": { ... }
to
"dependencies": {
"bower": "1.3.12"
...
}
but add devDependencies again and add ember-cli there for ember to detect your app:
"devDependencies": {
"ember-cli": "0.1.15"
}
A bit more information and further links can be found from my blogpost:
https://personalwebdevelopment.wordpress.com/2015/02/23/deploying-ember-cli-app-to-heroku/
you can try with 'npm start' or 'ember server'
You could use the Ember buildpack recommended by Heroku: https://www.heroku.com/emberjs
To define this buildpack for an existing application, you'll need to run the command below:
heroku buildpacks:set https://codon-buildpacks.s3.amazonaws.com/buildpacks/heroku/emberjs.tgz