I have been using create react app for a while. 'npm start' or 'yarn start' autoreloads works fine by itself but now I have an another problem. Currently I run the app on express server through the build folder, and I use 'npm run build' since express is serving the built files. There are many api calls which requires the app to be ran through this way. Now it become tedious to manually do 'npm run build' every time. Is there a simple way or work around to build automatically just like 'npm start' without eject the app(I know could eject and configure webpack to do that, but i don't want to go down that path)? Thanks
Unfortunately this is something you will have to do yourself. You can use a tool like npm-watch to accomplish what you want though:
Install npm-watch
npm i --save-dev npm-watch
package.json
{
"name": "react-app",
"version": "0.1.0",
"private": false,
"devDependencies": {
"npm-watch": "^0.1.8",
"react-scripts": "0.9.5",
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"watch": "npm-watch"
},
"watch": {
"build": "src/"
}
}
Afterwards, just use npm run watch to start up npm-watch so it can rebuild your assets on changes.
Update:
React-scripts now includes a proxy option that proxies requests to a different host/port. For example, if your backend is running on localhost at port 9000 under the /api route, then you would add this line to your package.json: "proxy": "localhost:9000/api". You could then make requests as you normally would in production. (source: https://create-react-app.dev/docs/proxying-api-requests-in-development)
While this doesn’t really answer your question, you shouldn’t be using npm run build in development. Not only the rebuilds are slow, but it also skips important React warnings for performance and size, so you’ll end up scratching your head more and getting a lot less details in the warnings.
If you just need to do API requests with Express, use the proxy feature which lets you proxy API requests from npm start to your server. There is also a tutorial with a matching repository demonstrating how to do that.
In production, of course, you should use the build produced by npm run build. But you would only need to run it before deployment.
Run your backend on a different port. If your running on express modify the file bin/www
var port = process.env.PORT || 9000
and in your /src folder create a config file where you configure your api host,routes, params etc
//config/index.js
export const Config = {
protocol: 'http',
host: window.location.hostname, //or the environment variable
params: '/api/',
api: {post:'/posts/'}
}
and in your calling component or where ever your calling the api's
import {Config} from '../config'
axios.get(`${Config.protocol}${Config.host}${Config.params}${Config.api.posts}${some id i guess}`)
The easiest way that I found (as of 10/19/21) is to use cra-build-watch.
Works perfectly.
i am also using create react app, this is how i modified my scripts to run project for development(windows), build the production build and run the production build.
"scripts": {
"start": "set PORT=8080 && react-scripts start",
"build": "react-scripts build",
"deploy": "set PORT=8008 && serve -s build"
}
npm start : run project for development(windows)
npm run-script build : build the production build
npm run-script deploy: run the production build
npm install -g serve before run npm run-script deploy.
1> npm install create-react-app -g
2> create-react-app Your_Apps_Name
Related
I noticed after building and deploying a Next.js website that the black compile indicator still shows up in the bottom-right of my browser like it would locally.
This indicator: https://i.stack.imgur.com/FVWEU.gif
On Next.js's website:
This indicator is only present in development mode and will not appear when building and running the app in production mode.
Even locally when I run yarn build and yarn start, the indicator displays while the page loads.
During the build process, it says:
Creating an optimized production build
Done in 20.89s.
My concern isn't so much that the indicator is displaying, because I can disable it. I'm concerned that I'm not getting an optimized build since something is displaying that should only be displaying in development mode.
Note: I can't share a link to the website as it is work-related.
Has anybody seen this issue before?
Thanks in advance!
Technical information:
Next.js Version 12.1.1
Dockerfile:
FROM node:16.13.0-alpine
# Install packages.
WORKDIR /app
COPY package.json .
COPY yarn.lock .
RUN yarn install
# Copy all other files.
COPY . .
# Build the app.
RUN yarn build
# USER node
EXPOSE 3003
CMD ["yarn", "start"]
package.json (scripts block):
"scripts": {
"dev": "node ssr-server.js",
"build": "next build",
"test": "node_modules/.bin/jest",
"test:coverage": "node_modules/.bin/jest --coverage",
"test:watch": "node_modules/.bin/jest --watch",
"start": "node ssr-server.js"
},
In the custom server JavaScript file, there should be a line that check if the environment is development or production:
const dev = process.env.NODE_ENV !== 'production'
update the start script in package.json to set that environment variable:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node ssr-server.js"
}
I used Create-React-App to create a react application, now I want to have 3 different envirement variable for build :
1 - Development
2 - Staging
3 - Production
I follow this article from Facebook. So based on this artile, now I have 3 .env files in my project :
.env.development
.env.staging
.env.production
in each one of this .env files I have my API address based on the stage we are building the app, like this :
API_URL=https://MYAPI.com/STAGE
in my package.json I have these scripts :
"scripts": {
"start": "env-cmd .env.development react-scripts start",
"build_development": "env-cmd .env.development npm run build",
"build_staging": "env-cmd .env.staging npm run build",
"build": "react-scripts build",
}
In my component which call this api URL, I use this to get the API_URL :
let apiUrl = process.env.API_URL
So once I run for example : npm run build_staging
It will build the app but once I debug it, apiUrl is always undefined.
Not sure what is wrong? anyone had such a problem?
I believe your environment variable names need to start with REACT_APP_ using create-react-app, as stated in the same GitHub page you linked. Changing your API_URL to REACT_APP_API_URL should fix the issue.
I have a Node.js app using TypeScript and now I want Jasmine to run tests automatically each time I make changes in .ts files. So I'm just trying to find an appropriate command to be run as npm test in command line or a package that can watch my .ts files compile them on changes and run jasmine. Does anybody know a solution for it?
The easiest way I found is
installing dependencies: npm install --save-dev jasmine-ts nodemon
initializing jasmine: node_modules/.bin/jasmine-ts init
In the package.json:
"scripts": {
"test": "nodemon --ext ts --exec 'jasmine-ts \"src/**/*.spec.ts\"'"
}
Edit: the above solution doesn't work as of the 11th of Apr, 2019. I published a modified working example at https://github.com/erosb/ts-node-jasmine-example
This may be done with two commands launched in separate terminals. Assuming packages are installed in global mode.
First command launches TypeScript compiler in watch mode:
tsc --watch
The second starts nodemon that watches .js files and restarts on changes. Each time it executes jasmine test runner:
nodemon --ext js --exec 'jasmine JASMINE_CONFIG_PATH=jasmine.json'
This solution is fast enough though it also has a drawback of running in two terminals. So it is not ideal but the best I've found so far.
As a result scripts section in package.json looks like:
"scripts": {
/* ... */
"watch": "tsc --watch",
"test": "nodemon --ext js --exec 'jasmine JASMINE_CONFIG_PATH=jasmine.json'",
"devstart": "nodemon ./bin/www"
},
devstart also works in couple with watch restarting server each time .ts files are changed (after they are compiled to .js).
You might consider using jasmine-node. I don't think that jasmine itself has a watch option.
npm i -g jasmine-node
Assuming that your test command in your package.json scripts block is something like this:
"scripts": {
...
"test": "jasmine some-directory-or-glob-pattern"
...
}
Use jasmine-node and add the --autotest and --watch flags to that command:
"scripts": {
...
"test": "jasmine-node --autotest --watch some-directory-or-glob-pattern"
...
}
Previously described methods either did not work, or were slow to compile code. Here is my attempt to solve this, both fast and convenient, works great for me. The only downside is that jasmine would not know which tests are affected by TS recompilation and would run all the tests.
yarn add tsc-watch --dev
yarn run tsc-watch --onSuccess "yarn run jasmine --config=jasmine.json"
NPM version:
npm -i tsc-watch
npm run tsc-watch --onSuccess "npm run jasmine --config=jasmine.json"
In my case I needed to correctly map TS paths. The full command looks like this:
yarn run tsc-watch --onSuccess \
"node -r tsconfig-paths/register node_modules/jasmine/bin/jasmine \
--config=jest/jasmine.json --require=dist/jest/setup.js $targetFile"
jasmine.json
{
"spec_dir": "dist/src",
"spec_files": ["**/*.e2e.js", "**/*.unit.js", "**/*.spec.js", "**/*.test.js"],
"env": {
"random": false
}
}
Just an example, please adjust to your needs.
tsc-watch starts a TypeScript compiler with --watch parameter, with the ability to react to successful compilation and start tests.
I'm using typescript on my project and I can successfully watch + compile .ts files and output them to dist folder.
here is the scripts part of my package.json
"start": "npm run build && npm run watch",
"build": "npm run build-ts && npm run tslint",
"test": "cross-env NODE_ENV=test jest --watch",
"watch": "concurrently -k -p \"[{name}]\" -n \"Typescript,Node\" -c \"cyan.bold,green.bold\" \"npm run watch-ts\" \"npm run serve\"",
"serve": "nodemon dist/server.js",
"build-ts": "tsc",
"watch-ts": "tsc -w",
"tslint": "tslint -c tslint.json -p tsconfig.json"
The problem is I want to use js templating engine (nunjucks) and I need to watch the view files inside the views folder and move them to the dist folder.
Is there a way by just using npm scripts or nodejs?
Or do I need to use other tools like gulp or webpack?
I have the "same" request to for a CRUD graphql back-end server, but don't want to use gulp or webpack just to keep it simple.
I see that you use nodemon like me. Then, according the docs at https://github.com/remy/nodemon, it can be used it to monitor changes of any kind of file other than the default js. More over, nodemon can monitor the status of other transactional server other than node.
The first task is detecting the changes of wanted files: in my case I want copy the *.gql files in my src/schema folder to build/schema folder. For that, you can use the ext for the kind of files, and watch option for the source folder to explore.
The second one task is matter of copying the files. Naturally, you can use the copy command of your host OS. In my case I use the DOS xcopy command of the Windows shell (or cp in Unix like OS). nodemon has an "event-hook" with the event option, that can execute a command line when an event occurs. Just we need the restart event of the node server when the changes are detected for nodemon.
You can use the command line options, or a global config file, or in you local package.json project config file. I show up the last one using nodemonConfig section of package.json:
"nodemonConfig": {
"watch": [
"./src/schema",
"./build"
],
"ext": "js,gql",
"events": {
"restart": "xcopy .\\src\\schema\\*.gql .\\build\\schema /Y /O /R /F /I /V /E"
}
}
Ozkr's answer is great, I just want to add what worked for me, I had to change it a bit as nodemon was running into an infinite restart otherwise:
"nodemonConfig": {
"watch": [
"./views",
"./public"
],
"ext": "hjs,js",
"events": {
"restart": "cp -r views dist \n cp -r public dist"
}
}
copy-and-watch does just that:
I use this code to copy html files during development:
"copy_html": "yarn copy-and-watch src/mail_templates/* prod/mail_templates --watch --clean",
how do i to generate the build folder after my package be installed?
i did this:
"scripts": {
"build": "babel ./src --out-dir ./build"
}
But when other user install the package the npm not build.
How can i execute the build command after install?
You should use "postinstall" in scripts.
source: https://docs.npmjs.com/misc/scripts
It's almost certainly best not to have a post-install step at all. What you really want to do is to build the project before it is published, and then publish the built version to NPM (assuming that's what you are trying to do). In that case, you might use a prepublish script:
// package.json
"scripts": {
"build": "babel src -d build",
"prepublish": "npm run build"
}
And make sure the built files are included in your files array:
// package.json
"files": ["build"]
Or that your source files are excluded in your .npmignore:
// .npmignore
/src/
If you really do need a post-install step for some reason, use a postinstall script:
// package.json
"scripts": {
"build": "babel src -d build",
"postinstall": "npm run build"
}
But I can't think of a use-case where this would be a good idea.