Split frontend step into more steps in CircleCi

[saraojelind]

Split frontend into more steps; npm, test, storybook and frontend. This way the jobs can be run parallell minimizing deploy time and easier to skip storybook on production deployment. Also add npm as dependency for test and storybook, and instead use a seperate npm install for build-command to make sure no dev packages are installed npm ci --omit=dev

Wagtail-Pipit/{{cookiecutter.project_name}}/.circleci/config.yml

Lines 65 to 104 in 41f274d

	frontend:
	<<: *defaults
	executor: node
	environment:
	SENTRY_AUTH_TOKEN: ${SENTRY_AUTH_TOKEN}
	steps:
	- *restore_repo
	- restore_cache:
	key: v1-npm-{{ checksum "frontend/package.json" }}
	- run: cd frontend && npm ci
	- save_cache:
	key: v1-npm-{{ checksum "frontend/package.json" }}
	paths:
	- ~/repo/frontend/node_modules
	- run:
	command: |
	mkdir -p test-results/jest
	cd frontend
	npm run test:ci
	echo "NEXT_PUBLIC_SENTRY_DSN=$NEXT_PUBLIC_SENTRY_DSN" >> .env
	npm run build
	npm run build-storybook
	# So we don't copy the gigantic node_modules on each deploy
	rm -rf node_modules
	environment:
	JEST_JUNIT_OUTPUT_DIR: ../test-results/jest/
	- store_test_results:
	path: test-results/jest
	- store_artifacts:
	path: test-results/jest
	- save_cache:
	key: v1-assets-{{ .Branch }}-{{ .Environment.CIRCLE_SHA1 }}
	paths:
	- ~/repo/frontend/
	- when:
	condition: ${SLACK_ACCESS_TOKEN}
	steps:
	- slack/notify:
	event: fail
	template: basic_fail_1