-
Notifications
You must be signed in to change notification settings - Fork 14
/
template.rb
190 lines (153 loc) · 6.01 KB
/
template.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
require "json"
source_paths.unshift(File.dirname(__FILE__))
# Configure app/assets
remove_file "app/assets/config/manifest.js"
create_file "app/assets/config/manifest.js" do
<<~EO_CONTENT
// This file must exist for assets pipeline compatibility.
EO_CONTENT
end
remove_dir "app/assets/stylesheets"
remove_dir "app/assets/images"
# Configure app/frontend
run "mv app/javascript app/frontend"
gsub_file "config/webpacker.yml", "source_path: app/javascript", "source_path: app/frontend", force: true
# Yarn's integrity check command is quite buggy, to the point that yarn v2 removed it
#
# The integrity check option itself has been removed in webpacker v5.1 but we
# currently pull in v4, so we just set it to false to be safe
#
gsub_file "config/webpacker.yml", "check_yarn_integrity: true", "check_yarn_integrity: false", force: true
# We want webpacker to generate a separate CSS file in all environments because
#
# 1. It makes things look more "normal" in browser dev tools
# 2. We don't have to add 'unsafe-inline' to the CSP header to allow Webpack to
# create inline stylesheets
#
gsub_file "config/webpacker.yml", " extract_css: false", " extract_css: true", force: true
empty_directory_with_keep_file "app/frontend/images"
copy_file "app/frontend/stylesheets/application.scss"
copy_file "app/frontend/stylesheets/_elements.scss"
append_to_file "app/frontend/packs/application.js" do
<<~EO_CONTENT
import '../stylesheets/application.scss';
EO_CONTENT
end
enable_imgs_src = <<~EO_SRC
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
EO_SRC
enable_imgs_replacement = <<~EO_REPLACEMENT
const images = require.context('../images', true);
// eslint-disable-next-line no-unused-vars
const imagePath = name => images(name, true);
EO_REPLACEMENT
gsub_file "app/frontend/packs/application.js", enable_imgs_src, enable_imgs_replacement
# Configure app/views
gsub_file "app/views/layouts/application.html.erb",
"<%= stylesheet_link_tag(",
"<%= stylesheet_pack_tag(",
force: true
body_open_tag_with_img_example = <<~EO_IMG_EXAMPLE
<body>
<%
# An example of how to load an image via Webpacker. This image is in
# app/frontend/images/example.png
%>
<%# image_pack_tag "example.png", alt: "Example Image" %>
EO_IMG_EXAMPLE
gsub_file "app/views/layouts/application.html.erb", "<body>", body_open_tag_with_img_example, force: true
# Setup Sentry
# ############
run "yarn add @sentry/browser"
run "yarn add dotenv-webpack -D"
gsub_file "config/webpack/environment.js",
"module.exports = environment",
<<~'EO_JS'
const Dotenv = require('dotenv-webpack');
environment.plugins.prepend('Dotenv', new Dotenv());
module.exports = environment;
EO_JS
append_to_file "app/frontend/packs/application.js" do
<<~'EO_JS'
// Initialize Sentry Error Reporting
//
// Import all your application's JS after this section because we need Sentry
// to be initialized **before** we import any of our actual JS so that Sentry
// can report errors from it.
//
import * as Sentry from '@sentry/browser';
Sentry.init({
dsn: process.env.SENTRY_DSN,
environment: process.env.SENTRY_ENV || process.env.RAILS_ENV
});
// Uncomment this Sentry by sending an exception every time the page loads.
// Obviously this is a very noisy activity and we do have limits on Sentry so
// you should never do this on a deployed environment.
//
// Sentry.captureException(new Error('Away-team to Enterprise, two to beam directly to sick bay...'));
// Import all your application's JS here
//
// import '../javascript/example-1.js';
// import { someFunc } from '../javascript/funcs.js';
EO_JS
end
gsub_file "config/initializers/content_security_policy.rb",
/# policy.report_uri ".+"/,
'policy.report_uri ENV.fetch("SENTRY_CSP_HEADER_REPORT_ENDPOINT")'
# Javascript code linting and formatting
# ######################################
run "rm .browserslistrc"
run "yarn add --dev eslint eslint-plugin-prettier eslint-config-prettier eslint-plugin-eslint-comments eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y prettier prettier-config-ackama"
copy_file ".eslintrc.js"
template ".eslintignore.tt"
template ".prettierignore.tt"
package_json = JSON.parse(File.read("./package.json"))
package_json["prettier"] = "prettier-config-ackama"
package_json["browserslist"] = [
"defaults",
"not IE 11",
"not IE_Mob 11"
]
package_json["scripts"] = {
"js-lint" => "eslint . --ignore-pattern '!.eslintrc.js' --ext js,ts,tsx,jsx",
"js-lint-fix" => "eslint . --ignore-pattern '!.eslintrc.js' --ext js,ts,tsx,jsx --fix",
"format-check" => "prettier --check './**/*.{css,scss,json,md,js,ts,tsx,jsx}'",
"format-fix" => "prettier --write './**/*.{css,scss,json,md,js,ts,tsx,jsx}'",
"scss-lint" => "stylelint '**/*.{css,scss}'",
"scss-lint-fix" => "stylelint '**/*.{css,scss}' --fix"
}
File.write("./package.json", JSON.generate(package_json))
# must be run after prettier is installed and has been configured by setting
# the 'prettier' key in package.json
run "yarn run js-lint-fix"
run "yarn run format-fix"
append_to_file "bin/ci-run" do
<<~ESLINT
echo "* ******************************************************"
echo "* Running JS linting"
echo "* ******************************************************"
yarn run js-lint
ESLINT
end
append_to_file "bin/ci-run" do
<<~PRETTIER
echo "* ******************************************************"
echo "* Running JS linting"
echo "* ******************************************************"
yarn run format-check
PRETTIER
end
# SCSS Linting
run "yarn add --dev stylelint stylelint-scss stylelint-config-recommended-scss"
copy_file ".stylelintrc.js"
template ".stylelintignore.tt"
append_to_file "bin/ci-run" do
<<~SASSLINT
echo "* ******************************************************"
echo "* Running SCSS linting"
echo "* ******************************************************"
yarn run scss-lint
SASSLINT
end