We Keep Coding

Nextjs serving the same content for all routes

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!

Esri JS Api 4.18 requires ncp copy of node_modles for BUILD and START. what and were do I need to copy assets for working in storybook.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

How build a react project inside build folder

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}"

Creat React App: Adding scss

Looking for a little explanation.
I added .scss support to my create-react-app and every thing works (like in docs: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc).
There is these lines with plus sign:
"scripts": {
+ "build-css": "node-sass-chokidar src/ -o src/",
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
My first question is what first src/ and second src/ stands for?
In this approach it creates .css file next to .scss. My second question is how to make one .css, no matter how many .scss files I have.

The first and second /src are the paths of the input and output, something like source and destination of your files, you only want to read .scss files inside your /src folders and the result is built inside that same /src folder.
You can prepend an underscore(_) to your SCSS files and this will tell SASS that those files will have no file output when compiled, so if for example you have a file named navBar.scss you should change it to _navbar.scss. Make sure you are importing those files from some other .scss file that doesn't have an underscore though, otherwise the compiler task will do nothing with those files.
To import the files you don't have to specify the underscore, but you do have to put the exact route of the files for example to import your _navbar.scss:
#import 'route/to/components/navbar/navbar'

The first src/ is where it is reading files from, then -o designates output, and the second src/ is the output directory, which is why it is creating the new files in the same location as the source files.
For single file output try node-sass-chokidar src/ -o src/outputfile.css

How to have different .env file for Grunt for staging/production?

How can I have a different .env file in my project when compiling my project with Grunt?

npm install --save cross-env
In your package.json
"scripts": {
"start": "cross-env PROJECT_ENV=production grunt",
"dev": "cross-env PROJECT_ENV=development grunt"
}
In your grunt file you can use process.env.PROJECT_ENV to verify the current environment depending on which script you run.