Feature/first frontend #30

alv67 · 2021-07-17T02:29:04Z

Only the scheme with Svelte-kit (page routing enabled) and TeilwindCSS enabled.

gmacario · 2021-07-17T08:25:02Z

@alv67 I have been testing the client locally following the instructions in the README.md and got a few warnings which I do not understand:

gmacario@gmpowerhorse:~/github/gmacario/blobfishes (feature/first-frontend)$ cd client/
gmacario@gmpowerhorse:~/github/gmacario/blobfishes/client (feature/first-frontend)$ npm install

> [email protected] postinstall /home/gmacario/github/gmacario/blobfishes/client/node_modules/esbuild
> node install.js


> [email protected] postinstall /home/gmacario/github/gmacario/blobfishes/client/node_modules/svelte-preprocess
> echo "[svelte-preprocess] Don't forget to install the preprocessors packages that will be used: node-sass/sass, stylus, less, postcss & postcss-load-config, coffeescript, pug, etc..."

[svelte-preprocess] Don't forget to install the preprocessors packages that will be used: node-sass/sass, stylus, less, postcss & postcss-load-config, coffeescript, pug, etc...
npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 304 packages from 259 contributors and audited 306 packages in 6.464s

42 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

gmacario@gmpowerhorse:~/github/gmacario/blobfishes/client (feature/first-frontend)*$

I have some doubts about the package name and version which changed from the previous commits made by @Raffone17 .
Could you please double check?

gmacario · 2021-07-17T08:31:51Z

Most importantly, I do not understand why the build of the static-pages inside Docker now fails - maybe the two things are related?

Command:

docker-compose build --no-cache static-pages

Result:

gmacario@gmpowerhorse:~/github/gmacario/blobfishes (feature/first-frontend)$ docker-compose build --no-cache static-pages
Building static-pages
Step 1/7 : FROM node:12.18-alpine
 ---> e13d60032d4d
Step 2/7 : WORKDIR /usr/src/app
 ---> Running in 643ebf630a4d
Removing intermediate container 643ebf630a4d
 ---> 37562fe9578c
Step 3/7 : COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
 ---> 7e545837b47d
Step 4/7 : RUN npm install --silent
 ---> Running in bd6f91186696
[svelte-preprocess] Don't forget to install the preprocessors packages that will be used: node-sass/sass, stylus, less, postcss & postcss-load-config, coffeescript, pug, etc...
added 304 packages from 259 contributors and audited 306 packages in 10.765s

42 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Removing intermediate container bd6f91186696
 ---> 4e3bf5b2bd0d
Step 5/7 : COPY . .
 ---> 9d3431b48fe7
Step 6/7 : RUN npm run build
 ---> Running in 0abb81d01a95

> [email protected] build /usr/src/app
> svelte-kit build

(node:17) ExperimentalWarning: The ESM module loader is experimental.
> The requested module 'svelte-hmr' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'svelte-hmr';
const { createMakeHot } = pkg;
file:///usr/src/app/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:211
import { createMakeHot } from "svelte-hmr";
         ^^^^^^^^^^^^^
SyntaxError: The requested module 'svelte-hmr' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'svelte-hmr';
const { createMakeHot } = pkg;
    at ModuleJob._instantiate (internal/modules/esm/module_job.js:97:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:136:20)
    at async Loader.import (internal/modules/esm/loader.js:179:24)
    at async file:///usr/src/app/node_modules/@sveltejs/kit/dist/cli.js:896:22
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `svelte-kit build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-07-17T08_30_44_547Z-debug.log
ERROR: Service 'static-pages' failed to build: The command '/bin/sh -c npm run build' returned a non-zero code: 1
gmacario@gmpowerhorse:~/github/gmacario/blobfishes (feature/first-frontend)$

I really need help from some Svelte-gurus 🙏

gmacario · 2021-07-17T15:24:43Z

@Raffone17 unfortunately I still have build errors

gmacario@gmpowerhorse:~/github/gmacario/blobfishes (feature/first-frontend)$ docker-compose up --build --force-recreate
Building static-pages
Step 1/7 : FROM node:12.18-alpine
 ---> e13d60032d4d
Step 2/7 : WORKDIR /usr/src/app
 ---> Using cache
 ---> 7870f91cacd6
Step 3/7 : COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
 ---> Using cache
 ---> 71f26baac4e7
Step 4/7 : RUN npm install --silent
 ---> Using cache
 ---> c53e44b81403
Step 5/7 : COPY . .
 ---> Using cache
 ---> bfa4896631d8
Step 6/7 : RUN npm run build
 ---> Running in 352233c237b9

> [email protected] build /usr/src/app
> svelte-kit build

(node:17) ExperimentalWarning: The ESM module loader is experimental.
> The requested module 'svelte-hmr' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'svelte-hmr';
const { createMakeHot } = pkg;
file:///usr/src/app/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:211
import { createMakeHot } from "svelte-hmr";
         ^^^^^^^^^^^^^
SyntaxError: The requested module 'svelte-hmr' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'svelte-hmr';
const { createMakeHot } = pkg;
    at ModuleJob._instantiate (internal/modules/esm/module_job.js:97:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:136:20)
    at async Loader.import (internal/modules/esm/loader.js:179:24)
    at async file:///usr/src/app/node_modules/@sveltejs/kit/dist/cli.js:896:22
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `svelte-kit build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-07-17T15_23_18_840Z-debug.log
ERROR: Service 'static-pages' failed to build: The command '/bin/sh -c npm run build' returned a non-zero code: 1
gmacario@gmpowerhorse:~/github/gmacario/blobfishes (feature/first-frontend)$

Raffone17 · 2021-07-17T15:36:06Z

@gmacario update node to versione 14 in the file "client/Dockerfile"

gmacario · 2021-07-17T15:37:31Z

The Docker images now builds correctly again 🎉

docker-compose build --no-cache

Result

gmacario@gmpowerhorse:~/github/gmacario/blobfishes (feature/first-frontend)$ docker-compose build --no-cache
Building static-pages
Step 1/7 : FROM node:14.17.3-alpine
 ---> f5f48375fc5d
Step 2/7 : WORKDIR /usr/src/app
 ---> Running in d12105356605
Removing intermediate container d12105356605
 ---> 64e1bb43a9c9
Step 3/7 : COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
 ---> 213cde4727e3
Step 4/7 : RUN npm install --silent
 ---> Running in 6e44b70087ff
[svelte-preprocess] Don't forget to install the preprocessors packages that will be used: node-sass/sass, stylus, less, postcss & postcss-load-config, coffeescript, pug, etc...
added 305 packages from 259 contributors and audited 307 packages in 14.675s

42 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Removing intermediate container 6e44b70087ff
 ---> dcc11162cf58
Step 5/7 : COPY . .
 ---> 1b33e49bd05f
Step 6/7 : RUN npm run build
 ---> Running in d05e2a33f6a4

> [email protected] build /usr/src/app
> svelte-kit build

vite v2.4.2 building for production...
transforming...

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
✓ 18 modules transformed.
rendering chunks...
.svelte-kit/output/client/_app/manifest.json                               1.30kb
.svelte-kit/output/client/_app/pages/index.svelte-53346cf9.js              0.83kb / brotli: 0.43kb
.svelte-kit/output/client/_app/error.svelte-e8e349f2.js                    1.55kb / brotli: 0.64kb
.svelte-kit/output/client/_app/pages/__layout.svelte-26dcdf13.js           1.75kb / brotli: 0.80kb
.svelte-kit/output/client/_app/assets/start-0826e215.css                   0.18kb / brotli: 0.11kb
.svelte-kit/output/client/_app/assets/pages/index.svelte-92f2f640.css      0.14kb / brotli: 0.09kb
.svelte-kit/output/client/_app/chunks/vendor-76ea059a.js                   6.42kb / brotli: 2.45kb
.svelte-kit/output/client/_app/assets/pages/__layout.svelte-ad4f48dc.css   5.54kb / brotli: 1.58kb
.svelte-kit/output/client/_app/start-7b8815ea.js                           17.47kb / brotli: 5.58kb
vite v2.4.2 building SSR bundle for production...
transforming...
✓ 15 modules transformed.
rendering chunks...
.svelte-kit/output/server/app.js   18.48kb

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-static
  ✔ done
Removing intermediate container d05e2a33f6a4
 ---> 3eb8399efe4c
Step 7/7 : CMD ["ls", "-laR", "public/"]
 ---> Running in 7df49470b8fa
Removing intermediate container 7df49470b8fa
 ---> 1633d4180167
Successfully built 1633d4180167
Successfully tagged blobfishes_static-pages:latest
Building server
Step 1/7 : FROM node:14.17.3-alpine
 ---> f5f48375fc5d
Step 2/7 : WORKDIR /usr/src/app
 ---> Running in 496ff5e39463
Removing intermediate container 496ff5e39463
 ---> 9cb9305ce7e2
Step 3/7 : COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
 ---> 140c830da709
Step 4/7 : RUN npm install --silent
 ---> Running in c3b2b2f0155d
[bcrypt] Success: "/usr/src/app/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node" is installed via remote
Love nodemon? You can now support the project via the open collective:
 > https://opencollective.com/nodemon/donate

added 602 packages from 606 contributors and audited 612 packages in 20.083s

30 packages are looking for funding
  run `npm fund` for details

found 2 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
Removing intermediate container c3b2b2f0155d
 ---> f5c29057afff
Step 5/7 : COPY . .
 ---> 8b9730f4291d
Step 6/7 : RUN npm run build
 ---> Running in a9997097dbd8

> [email protected] build /usr/src/app
> tsc

Removing intermediate container a9997097dbd8
 ---> 4290bd1ffdcd
Step 7/7 : CMD ["node", "dist/app.js"]
 ---> Running in 5ceebf1c8c42
Removing intermediate container 5ceebf1c8c42
 ---> fc2a204e4199
Successfully built fc2a204e4199
Successfully tagged blobfishes_server:latest
gmacario@gmpowerhorse:~/github/gmacario/blobfishes (feature/first-frontend)$

gmacario · 2021-07-17T15:38:00Z

Merging PR

alv67 · 2021-07-17T15:43:22Z

You are a wonderful team. Tankyou @Raffone17 & @gmacario , now with this working I can speedly create the ugliest interface...

alv67 and others added 4 commits July 17, 2021 03:52

Using "svelte-kit" boilerplate with TailwindCSS

e06c882

Correction of Super-Linter errors (hopefull)

c4c0d12

Linter ping-pong

c03a23a

Merge branch 'main' into feature/first-frontend

d4fef94

gmacario linked an issue Jul 17, 2021 that may be closed by this pull request

Create application frontend #10

Closed

4 tasks

gmacario assigned alv67 Jul 17, 2021

gmacario added this to the M1. First deployment to DO milestone Jul 17, 2021

gmacario removed a link to an issue Jul 17, 2021

Create application frontend #10

Closed

4 tasks

gmacario mentioned this pull request Jul 17, 2021

Create application frontend #10

Closed

4 tasks

gmacario added the help wanted Extra attention is needed label Jul 17, 2021

Raffone17 added 2 commits July 17, 2021 17:03

Add static adapter for build and update gitignore

2b42c63

Format fix

d120012

gmacario added 3 commits July 17, 2021 17:32

client: Rebase on node:14.17.3-alpine

88fc264

Rebase on node:14.17.3-alpine

c63a84b

Document dependency on node:14.17.3 or later

70234b4

gmacario merged commit f5dfa34 into main Jul 17, 2021

gmacario deleted the feature/first-frontend branch July 17, 2021 15:38

gmacario mentioned this pull request Jul 18, 2021

Test frontend #27

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feature/first frontend #30

Feature/first frontend #30

Uh oh!

alv67 commented Jul 17, 2021

Uh oh!

gmacario commented Jul 17, 2021

Uh oh!

gmacario commented Jul 17, 2021

Uh oh!

gmacario commented Jul 17, 2021

Uh oh!

Raffone17 commented Jul 17, 2021

Uh oh!

gmacario commented Jul 17, 2021 •

edited

Loading

Uh oh!

gmacario commented Jul 17, 2021

Uh oh!

alv67 commented Jul 17, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Feature/first frontend #30

Feature/first frontend #30

Uh oh!

Conversation

alv67 commented Jul 17, 2021

Uh oh!

gmacario commented Jul 17, 2021

Uh oh!

gmacario commented Jul 17, 2021

Uh oh!

gmacario commented Jul 17, 2021

Uh oh!

Raffone17 commented Jul 17, 2021

Uh oh!

gmacario commented Jul 17, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gmacario commented Jul 17, 2021

Uh oh!

alv67 commented Jul 17, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

gmacario commented Jul 17, 2021 •

edited

Loading