Переход на importmap (#48)

* importmaps

* codestyle

* fix importmap

* remove yarn install call

* fix vkid sdk

* add pins

* fix vk

* Update vkid_controller.js

* fix issues

* Update Dockerfile.dev

---------

Co-authored-by: Mikhail Geine <[email protected]>

.dockerignore

@@ -36,4 +36,4 @@
 !/app/assets/builds/.keep
 /public/assets
 
-*.private
+/node_modules

Dockerfile

@@ -11,28 +11,29 @@ WORKDIR /rails
 ENV RAILS_ENV="production" \
     BUNDLE_DEPLOYMENT="1" \
     BUNDLE_PATH="/usr/local/bundle" \
-    BUNDLE_WITHOUT="development"
+    BUNDLE_WITHOUT="development" \
+    NODE_PATH="/node_modules"
 
-# Throw-away build stage to reduce size of final image
-FROM base as build
+FROM base AS node
+
+# Install node modules
+RUN apk add --virtual .build-deps yarn
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile --modules-folder $NODE_PATH
 
-RUN apk add --no-cache --virtual .build-deps build-base git postgresql-dev vips-dev tzdata yarn nodejs-current npm
+# Throw-away build stage to reduce size of final image
+FROM base AS build
 
+RUN apk add --no-cache --virtual .build-deps build-base git postgresql-dev vips-dev tzdata pkgconfig
 RUN apk add --no-cache curl vips-dev postgresql-client tzdata
 RUN rm -rf /var/lib/apt/lists /var/cache/apt/archives
 
-RUN npm install -g yarn@latest
-
 # Install application gems
 COPY Gemfile Gemfile.lock ./
 RUN bundle install
 RUN rm -rf ~/.bundle/ "${BUNDLE_PATH}"/ruby/*/cache "${BUNDLE_PATH}"/ruby/*/bundler/gems/*/.git
 RUN bundle exec bootsnap precompile --gemfile
 
-# Install node modules
-COPY package.json yarn.lock ./
-RUN yarn install --frozen-lockfile
-
 # Copy application code
 COPY . .
 
@@ -45,14 +46,18 @@ RUN ./bin/rails assets:precompile
 # Final stage for app image
 FROM base
 
-# Install packages needed for deployment
-RUN apk add --no-cache --virtual .build-deps curl build-base postgresql-dev vips-dev tzdata
-RUN rm -rf /var/lib/apt/lists /var/cache/apt/archives
-
 # Copy built artifacts: gems, application
 COPY --from=build /usr/local/bundle /usr/local/bundle
 COPY --from=build /rails /rails
 
+# Install packages needed for deployment
+RUN apk add --no-cache --virtual .build-deps curl build-base postgresql-dev vips-dev tzdata yarn
+RUN rm -rf /var/lib/apt/lists /var/cache/apt/archives
+
+# Copy node build artifacts
+COPY --from=node /node_modules /node_modules
+RUN yarn global add nodemon sass postcss-cli --prefix /usr/local
+
 # Run and own only the runtime files as a non-root user for security
 RUN adduser -D rails --shell /bin/bash
 RUN mkdir -p /usr/local/bundle/ruby/3.2.0/cache

Dockerfile.dev

@@ -11,16 +11,15 @@ ENV RAILS_ENV="development" \
 FROM base AS node
 
 # Install node modules
-RUN apk add --virtual .build-deps nodejs-current npm yarn
+RUN apk add --virtual .build-deps yarn
 COPY package.json yarn.lock ./
-RUN yarn install --frozen-lockfile --modules-folder /node_modules
+RUN yarn install --frozen-lockfile --modules-folder $NODE_PATH
 
 FROM base AS run
 
 # Install system dependencies
-RUN apk add --virtual .build-deps \
-    build-base postgresql-dev vips-dev tzdata curl postgresql \
-    nodejs-current npm yarn
+RUN apk add --no-cache --virtual .build-deps build-base git postgresql-dev vips-dev tzdata yarn pkgconfig
+RUN apk add --no-cache curl vips-dev postgresql-client tzdata
 RUN rm -rf /var/lib/apt/lists /var/cache/apt/archives
 
 # Install application gems
@@ -29,11 +28,13 @@ RUN bundle install
 RUN rm -rf ~/.bundle/ "${BUNDLE_PATH}"/ruby/*/cache "${BUNDLE_PATH}"/ruby/*/bundler/gems/*/.git
 RUN bundle exec bootsnap precompile --gemfile
 
+# Copy application code
 COPY . .
 
 COPY --from=node /node_modules /node_modules
-RUN yarn global add nodemon esbuild sass postcss postcss-cli --prefix /usr/local
+RUN yarn global add nodemon sass postcss-cli --prefix /usr/local
 
+# Precompile bootsnap code for faster boot times
 RUN bundle exec bootsnap precompile app/ lib/
 
 # Precompiling assets for production without requiring secret RAILS_MASTER_KEY

Gemfile

@@ -4,9 +4,6 @@ source 'https://rubygems.org'
 
 ruby '3.2.4'
 
-# gem 'omniauth-instagram-graph'
-# gem 'omniauth-instagram_display'
-
 gem 'devise'
 gem 'digest'
 gem 'faraday'
@@ -16,6 +13,8 @@ gem 'instagram_graph_api'
 gem 'omniauth-instagram'
 gem 'pkce_challenge'
 
+gem 'cssbundling-rails'
+
 gem 'rubocop', '~> 1.65', require: false
 
 gem 'open-uri'
@@ -37,18 +36,15 @@ gem 'pg', '~> 1.1'
 # Use the Puma web server [https://github.com/puma/puma]
 gem 'puma', '>= 5.0'
 
-# Bundle and transpile JavaScript [https://github.com/rails/jsbundling-rails]
-gem 'jsbundling-rails'
+# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
+gem 'importmap-rails'
 
 # Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
 gem 'turbo-rails'
 
 # Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
 gem 'stimulus-rails'
 
-# Bundle and process CSS [https://github.com/rails/cssbundling-rails]
-gem 'cssbundling-rails'
-
 # Build JSON APIs with ease [https://github.com/rails/jbuilder]
 gem 'jbuilder'
 

Gemfile.lock

@@ -140,6 +140,10 @@ GEM
       multi_xml (>= 0.5.2)
     i18n (1.14.5)
       concurrent-ruby (~> 1.0)
+    importmap-rails (2.0.1)
+      actionpack (>= 6.0.0)
+      activesupport (>= 6.0.0)
+      railties (>= 6.0.0)
     instagram_basic_display (0.2.0)
     instagram_graph_api (0.0.13)
       koala
@@ -154,8 +158,6 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
-    jsbundling-rails (1.3.0)
-      railties (>= 6.0.0)
     json (2.7.2)
     jwt (2.8.2)
       base64
@@ -398,10 +400,10 @@ DEPENDENCIES
   faraday
   ffi (~> 1.16.3)
   httparty
+  importmap-rails
   instagram_basic_display
   instagram_graph_api
   jbuilder
-  jsbundling-rails
   omniauth-instagram
   open-uri
   pg (~> 1.1)

Makefile

@@ -1,82 +1,84 @@
-SHELL=/bin/sh
-
-UID := $(shell id -u)
-GID := $(shell id -g)
-
-include .env
-export
-
-setup: build db-prepare
-
-build:
-	bundle lock --update
-	npm install --package-lock-only 
-	docker compose build
-
-up:
-	docker compose up
-
-down:
-	docker compose down
-
-clear:
-	sudo docker compose down -v --rmi all
-
-creds:
-	EDITOR='code --wait' bin/rails credentials:edit
-
-ash:
-	sudo docker compose run --rm app ash
-
-console:
-	sudo docker compose run --rm app bundle exec rails c
-
-yarn:
-	docker compose run --rm app yarn install
-
-bundle:
-	docker compose run --rm app bundle install
-
-rubocop:
-	docker compose run --rm app bundle exec rubocop --config /rails/config/rubocop.yml
-
-rubocop-verbose:
-	docker compose run --rm app bundle exec rubocop
-
-rubocopA:
-	docker compose run --rm app bundle exec rubocop --config /rails/config/rubocop.yml -A
-
-db-psql:
-	sudo docker compose run --rm app psql -d ${POSTGRES_DB} -U ${POSTGRES_USER} -W -h db
-
-db-prepare: db-drop db-create db-migrate db-seed
-
-db-create:
-	sudo docker compose run --rm app bin/rails db:create RAILS_ENV=development
-
-db-migrate:
-	sudo docker compose run --rm app bin/rails db:migrate
-
-db-rollback:
-	sudo docker compose run --rm app bin/rails db:rollback
-
-db-seed:
-	sudo docker compose run --rm app bin/rails db:seed
-
-db-reset:
-	sudo docker compose run --rm app bin/rails db:reset
-
-db-drop:
-	docker compose run --rm app bin/rails db:drop
-
-ci-build:
-	bundle lock --update
-	npm install --package-lock-only 
-	docker compose build -q
-
-ci-up-healthy: db-prepare
-	docker compose up -d --wait --wait-timeout 60
-
-ci-rubocop: rubocop
-
-ci-clear: clear
+SHELL=/bin/sh
+
+UID := $(shell id -u)
+GID := $(shell id -g)
+
+include .env
+export
+
+setup: build db-prepare
+
+build:
+	docker compose build
+
+deps:
+	yarn install && rm -rf ./node_modules
+	bundle install
+
+up:
+	docker compose up
+
+down:
+	docker compose down
+
+clear:
+	docker compose down -v --rmi all
+
+creds:
+	EDITOR='code --wait' bin/rails credentials:edit
+
+ash:
+	docker compose run --rm app ash
+
+console:
+	docker compose run --rm app bundle exec rails c
+
+yarn:
+	docker compose run --rm app yarn install
+
+bundle:
+	docker compose run --rm app bundle install
+
+rubocop:
+	docker compose run --rm app bundle exec rubocop --config /rails/config/rubocop.yml
+
+rubocop-verbose:
+	docker compose run --rm app bundle exec rubocop
+
+rubocopA:
+	docker compose run --rm app bundle exec rubocop --config /rails/config/rubocop.yml -A
+
+db-psql:
+	docker compose run --rm app psql -d ${POSTGRES_DB} -U ${POSTGRES_USER} -W -h db
+
+db-prepare: db-drop db-create db-migrate db-seed
+
+db-create:
+	docker compose run --rm app bin/rails db:create RAILS_ENV=development
+
+db-migrate:
+	docker compose run --rm app bin/rails db:migrate
+
+db-rollback:
+	docker compose run --rm app bin/rails db:rollback
+
+db-seed:
+	docker compose run --rm app bin/rails db:seed
+
+db-reset:
+	docker compose run --rm app bin/rails db:reset
+
+db-drop:
+	docker compose run --rm app bin/rails db:drop
+
+ci-build:
+	bundle lock --update
+	npm install --package-lock-only 
+	docker compose build -q
+
+ci-up-healthy: db-prepare
+	docker compose up -d --wait --wait-timeout 60
+
+ci-rubocop: rubocop
+
+ci-clear: clear

Procfile.dev

@@ -1,3 +1,2 @@
 web: env RUBY_DEBUG_OPEN=true RUBY_DEBUG_PORT=12345 RUBY_DEBUG_HOST=0.0.0.0 bin/rails server -b 0.0.0.0 -p3000
-js: yarn build --watch
 css: yarn watch:css

README.md

@@ -28,6 +28,7 @@ Where Are My Likes - это сервис, помогающий пользова
 
 - `make setup` - сборка и конфигурация всех контейнеров, необходимых для работы приложения;
 - `make up` - запуск всех контейнеров и приложения;
+- `make deps` - обновить lock-файлы и установить зависимости локально (необходимы bundle и yarn);
 - `make down` - удаление контейнеров приложения;
 - `make clear` - удаление контейнеров/образов/волюмов/сетей и прочего, связанных с приложением;
 - `make ash` - запуск терминала в контейнере приложения;

app/assets/config/manifest.js

@@ -1,2 +1,4 @@
 //= link_tree ../images
 //= link_tree ../builds
+//= link_tree ../../javascript .js
+//= link_tree ../../../vendor/javascript .js

app/javascript/application.js

@@ -1,4 +1,4 @@
-// Entry point for the build script in your package.json
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
-import "./controllers"
-import * as bootstrap from "bootstrap"
+import "controllers"
+import * as bootstrap from "bootstrap"