Our applications uses webpack. I need all my tests to run and artifacts to be created by web pack;
In my package.json, "build" script is defined:
..
"build": "webpack --config webpack.config.prod.js -p"
..
and this is my gitlab-ci.yml for now:
image: iteamdev/node-webpack:latest
variables:
NODE_ENV: "development" # required, because we need to install devDependencies
stages:
- build
compile:
stage: build
script:
- npm -v
- npm install -qs # install all dependencies (and devDependencies)
- npm run build # run webpack, set NODE_ENV=production
artifacts:
paths:
- dist/
What options do I have for the "image"? Is the one i'm using good for my needs? Should I work with a specific version?
I'd probably recommend using image: node:4.2.2 for your image.
Related
I'm trying to build a react docker image with NODE_ENV set to production, but keep getting this error:
#0 11.74 > webpack --config webpack-prod.config.ts
#0 11.74
#0 11.83 CLI for webpack must be installed.
#0 11.83 webpack-cli (https://github.com/webpack/webpack-cli)
#0 11.83
#0 11.83 We will use "npm" to install the CLI via "npm install -D webpack-cli".
#0 11.83 Do you want to install 'webpack-cli' (yes/no):
I tried to install webpack-cli separately but can't seem to get it working.
All the guides I've seen seem to say that devDependencies are not needed for the build. Also seems like setting NODE_ENV to production turns on some optimizations, so I wanted to add that. Without NODE_ENV build is running normally, because it adds devDeps I assume.
Am I doing something wrong here or do I need devDeps after all?
Dockerfile:
FROM node:16-alpine as build
ARG NODE_ENV=production
ENV NODE_ENV=${NODE_ENV}
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
RUN npm install -g webpack-cli && npm run build
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
docker-compose:
version: '3'
services:
web:
build:
context: .
dockerfile: Dockerfile
ports:
- '80'
networks:
- default
package.json scripts:
"build": "webpack --config webpack-prod.config.ts",
"start": "webpack serve --config webpack-dev.config.ts --progress"
You probably need the development dependencies installed to run your local build sequence. This can include things like Webpack, the Typescript transpiler, and other tools that you need to build the application into static files but not necessarily to run it. The package.json "devDependencies": are needed for the build.
If your npm run build sequence behaves differently in production mode, then you need to set $NODE_ENV after you install the packages from your package.json file.
FROM node:16-alpine as build
WORKDIR /app
COPY package.json package-lock.json ./ # don't forget package-lock.json!
RUN npm ci # including devDependencies
COPY . .
ENV NODE_ENV=production # only after `npm ci`
RUN npm run build
FROM nginx:alpine # unchanged
COPY --from=build /app/build /usr/share/nginx/html
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
Since you're building a pure Web application, this is enough. The recipe is a little bit more complicated if it's a server-side application: you need to RUN npm ci twice, once including devDependencies in an earlier stage to build the application, and once with NODE_ENV=production when you're actually going to run it.
I have a React app that I generated using Create React App. I'd like to make sure the tests pass before the build starts in AWS CodePipeline. Here is my buildspec.yml file which works just fine without the npm test command. Once I add the test command, it runs the tests, which I have setup to fail, and then the build just hangs.
version: 0.2
phases:
install:
commands:
- cd react/menu && npm install
build:
commands:
- npm test
- npm run-script build
artifacts:
files: "**/*"
base-directory: "react/menu/build"
I was able to get it to work by turning off watch mode as #haseeb-anwar suggested.
version: 0.2
phases:
install:
commands:
- cd react/menu && npm install
build:
commands:
- npm test -- --watchAll=false
- npm run-script build
artifacts:
files: "**/*"
base-directory: "react/menu/build"
AWS released SSR support on May 18th, 2021: https://aws.amazon.com/about-aws/whats-new/2021/05/aws-amplify-hosting-announces-server-side-rendering-support-for-next-js-web-apps/
I've been able to deploy a Next.js app without any issues, however, when attempting to deploy a custom React SSR app, I'm not sure how to do it, and there doesn't appear to be any documentation / blogs about it... is it even possible?
For example, here is my ampify.yml file:
version: 1
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn run build
artifacts:
baseDirectory: dist
files:
- '**/*'
cache:
paths:
- node_modules/**/*
Here is the relevant scripts from my package.json file:
"scripts": {
"prod::ssr": "cross-env NODE_ENV=production MODE=ssr webpack",
"prod::client": "cross-env NODE_ENV=production MODE=client webpack",
"build": "npm run prod::ssr && npm run prod::client",
"start": "node dist/ssr/index.js"
},
This works fine locally, but not on AWS Ampify.
My understanding is AWS Ampify uses the start command to run the app... is this true?
It seems that currently Amplify only supports SSR for Next.JS https://docs.aws.amazon.com/amplify/latest/userguide/server-side-rendering-amplify.html#ssr-Amplify-support
The solution on AWS would probably be to use Lambda https://aws.amazon.com/blogs/compute/building-server-side-rendering-for-react-in-aws-lambda/
I am trying to create a simple continous integration workflow for my React app in which for every new pull request to master branch I run the unit tests and create build. I have deployed the yaml configuration file for GitHub Actions to my repository. When I create a pull request, it starts the checks for the pull request, but it gets stuck on the build step. I am using webpack to build my React app.
integrate.yml
name: Continous Integration
on:
pull_request:
branches: [master]
jobs:
test_pull_request:
runs-on: ubuntu-latest
steps:
- name: Checkout Repository
uses: actions/checkout#v2
- name: Install Node.js
uses: actions/setup-node#v2
with:
node-version: '12'
- name: Cache Dependencies
uses: actions/cache#v2
with:
path: '**/node_modules'
key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
- name: Install Dependencies
run: yarn install
- name: Run Unit Tests
run: yarn test
- name: Build Project
run: yarn build:prod
npm scripts
"scripts": {
"start": "webpack-dev-server --env development --open --color --progress",
"build:prod": "webpack --env production --color --progress",
"build:dev": "webpack --env development --color --progress",
"test": "jest",
"test:watch": "jest --watch",
"precommit": "lint-staged"
},
I am assuming that webpack does not stop after it builds the project, and is running in watch mode due to which it is stuck, but I am not sure about this.
The issue here was when building project using the webpack command, after the build is complete, it does not returns the control and keeps on running. Therefore it gets stuck on the Build Project step in the yaml file and does not go the next step in Github Actions. The solution is to add a compiler hook in the webpack config to exit after the build is complete. This is how I added it in my config and it is working fine now.
plugins: [
// Added this to plugins in webpack config
{
apply: (compiler) => {
compiler.hooks.done.tap('DonePlugin', (stats) => {
console.log('Compile is done !');
setTimeout(() => {
process.exit(0);
});
});
}
}
]
Can Sencha Cmd be tuned for newer js features or replaced by other minifiers/optimizers?
Or support coming with the latest versions anyway?
Since the version has not been clarified, I will describe for 4.2.6
Go to root of your project and run
npm init
Install babel:
npm install --save-dev babel-cli babel-preset-es2015
Add to your package.json run scripts:
"scripts" : {
"build-prod": "./node_modules/.bin/babel es6 -d app --comments=false --compact=true",
"build-debug": "./node_modules/.bin/babel es6 -d app --sourceMaps=true",
"watch": "./node_modules/.bin/babel es6 -d app --watch"
},
Move source code from app and app.js to another folder (for example call it es6)
mv app.js app
mv app es6
and create build.xml in root and paste new task into project tag:
<target name="-before-build">
<x-shell reloadprofile="true" dir="${basedir}">
npm run build-debug
</x-shell>
</target>