When I do: npm run build I would like to create a folder inside the build folder and move all build output inside that folder.
At this moment I'm doing this:
"prebuild": "npm run build:clean",
"build": "react-scripts build",
"postbuild": "mkdir dest && cp -r build/* dest && npm run build:clean && mv dest build",
"build:clean": "rimraf build/*",
Clear build folder
Build app
Create dest folder
Copy all that is inside in build folder in dest folder
Clear build folder
Move dest folder inside build folder
How can I reduce it?
Simple answer is: you can't change it.
Build output is fixed in create-react-app and can't be changed, and this decision has its roots in philosophy of CRA.
Citing Dan Abramov, co-author of create-react-app:
I don’t think it is strange this feature is missing. Largely, it is intentional. It ensures most people have similar setups, and people can build tools (e.g. for deployment) assuming the same directory structure.
However, you can use trick backed-up by him, which is using mv to move build output:
"build": "react-scripts build && mv build {YOUR_PATH}"
Related
I’ve deployed a Nextjs app using docker to AWS infrastructure. The index page (/) loads fine, however, the content of index is loaded for every other route including the api routes as well as the js and css resources.
I’ve attempted running the app with just next start as well as building a standalone version and running node server.js. Both ways result in the same thing.
Dockefile looks like this
FROM node
ARG VERSION
ENV VERSION=${VERSION}
ARG COMMIT_REF
ENV COMMIT_REF=${COMMIT_REF}
ENV NODE_ENV=production
ENV NEXT_TELEMETRY_DISABLED 1
WORKDIR /usr/src/app
RUN apt-get update
RUN apt-get upgrade -y
RUN rm -rf /var/cache/apt/lists
COPY src ./src
COPY node_modules ./node_modules
COPY package.json ./
COPY next.config.js ./
COPY next-env.d.ts ./
COPY babel.config.js ./
COPY tsconfig.eslint.json ./
COPY tsconfig.json ./
COPY types.d.ts ./
COPY public ./public
RUN npx next build
ADD ./docker/start.sh /start.sh
RUN chmod +x /*.sh
ENTRYPOINT ["/start.sh"]
Has anyone seen this behaviour before?
Not sure if this helps but,
we have a web app in react and we did have this problem also.
The problem you are facing probably isn’t in your Dockerfile but in your build/config file.
We've fixed the issue by adding GENERATE_SOURCEMAP=false to the build tag script in package.json eg.
"scripts": {
"start": "react-scripts start",
"build": "GENERATE_SOURCEMAP=false react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
And then we ran a npm run build command.
Hope this helps!
I am building an ReactJs application that has many profiles.
The application will run in a development environment, qa environment and a production environment.
Given this, I would like to set on the host machine some environment variables and be able to get this on the .env file.
My need is to do something like:
.env file
REACT_APP_BASE_SERVICEX_URL=${ENV_ON_HOST_BASE_SERVICEX_URL}
REACT_APP_BASE_SERVICEY_URL=${ENV_ON_HOST_BASE_SERVICEY_URL}
Is this possible?
PS: The application will be running in Kubernetes.
1- Install env-cmd package from npm
2- Make a file called .env.envName in your project root, sush as .env.staging, .env.production, ... to differentiate between variables in each environment.
3- Inside the env file add your variables in key/value representation with prefix of REACT_APP
4- Inside your package.json. change the scripts builds.
"scripts": {
"start": "env-cmd -f .env.staging react-scripts start",
"build:staging": "env-cmd -f .env.staging react-scripts build",
"build:production": "env-cmd -f .env.production react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
5- -f flag is for custom env file paths as the default is in the project root otherwise you should specify the actual path
"start": "env-cmd -f ../../.env.staging react-scripts start",
Are you just asking how to handle environment variables?
You can put any variables that you need in the .env, .env.local, .env.development or .env.production file and then copy them over to the .env file when deploying.
It is custom to fully capitalize variables within the .env file. To use them within the code you place process.env prior to it.
In .env file :
DB_URL = http://fwohfjiowjfwefjpw
In react :
const DBURL = process.env.DB_URL
.env file
REACT_APP_BASE_SERVICEX_URL=HOST_BASE_SERVICEX_URL
And where you want to use the env variable, use this in the following way -
const URL = process.env.REACT_APP_BASE_SERVICEX_URL
I am using webpack 5 to package the project, when I start the project using this command in package.json:
"start": "rm -rf build && webpack serve --mode development --config config/webpack.dev.config.js",
To my surprise the project folder did not generate the build folder. It is inconvenience because sometimes I want to check the build folder files. But now I could not found any output file of the project after start. is it possible to make the webpack server generate the distination files when developing? BTW, when using the build command, it could generate the build folder success:
"build": "webpack --mode production --config config/webpack.build.config.js",
To use the ES modules for esri JS Api 4.18 requires ncp copy of node_modules for BUILD and START. what and where do I need to copy assets for working in storybook.js?
Copy assets
You will need to copy the API’s assets, which includes styles, images, fonts, and localization files, from the #arcgis/core/assets folder to your build folder. A simple way to accomplish this is to configure an NPM script that runs during your build process. For example, use npm to install ncp and configure a script in package.json to copy the folder. Here’s a React example:
// package.json
{
"script": {
"start": "npm run copy && react-scripts start",
"build": "npm run copy && react-scripts build",
"copy": "ncp ./node_modules/#arcgis/core/assets ./public/assets"
}
}
https://developers.arcgis.com/javascript/latest/es-modules/
ok so turns out it is pretty easy. You need to ncp copy your asset files to a common directory in your project and you need to reference it in your storybook script.
{
"scripts": {
"start-storybook": "npm run copy && start-storybook -s ./public -p 9001"
"copy": "ncp ./node_modules/#arcgis/core/assets ./public/assets"
}
}
https://storybook.js.org/docs/react/configure/images-and-assets
I have the below folder structure
-src
--module
---some.js
---another.js
--server.js
I am using parceljs transpile the .js files
The script in package.json looks like this
"build": "parcel src/*/*.js --target=node"
When I run npm run build, server.js is not transpiled.
If I change the build script to the below, files in module folder don't get transpiled
"build": "parcel src/*.js --target=node"
Any guidance so what I could transpile .js files in the src level as well as all nested files?
You could run the both commands in a single line, using the logical operator &&:
"build": "parcel src/*.js --target=node && parcel src/*/*.js --target=node"
as per #Jeremy' suggestion
parcel src/**/*.js --target=node