epicweb-dev / web-app-fundamentals

Learn the foundational concepts of building web applications
https://kentcdodds.com/workshops/web-app-fundamentals
Other
75 stars 11 forks source link

Usage Report #1

Closed onemen closed 1 year ago

onemen commented 1 year ago

Setup

Result from npm run setup

Everything seems to installed except from Setting up example apps

output without errors ``` > setup > node ./setup.mjs ▶️ Starting workshop setup... Running the following command: npx "https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733" -q ▶️ Starting: System Validation Ensuring the correct versions of tools are installed on this computer. Running the following command: npx "https://gist.github.com/kentcdodds/abbc32701f78fa70298d444c2303b6d9" ✅ Success: System Validation ▶️ Starting: Dependency Installation Installing third party code dependencies so the workshop works properly on this computer. Running the following command: npm install --legacy-peer-deps --no-save npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs npm WARN deprecated rollup-plugin-inject@3.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject. npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead added 1646 packages, and audited 1680 packages in 2m 322 packages are looking for funding run `npm fund` for details found 0 vulnerabilities ✅ Success: Dependency Installation ▶️ Starting: Custom Setup Handling custom setup (if neccessary) Running the following command: npm run setup:custom --if-present > setup:custom > node ./scripts/setup-custom.mjs 📝 copying .env.example to .env files... 🛠️ Setting up exercises.07.seo.01.problem... Environment variables loaded from .env Prisma schema loaded from prisma\schema.prisma ✔ Generated Prisma Client (4.11.0 | library) to .\node_modules\@prisma\client in 210ms You can now start using Prisma Client in your code. Reference: https://pris.ly/d/client ` import { PrismaClient } from '@prisma/client' const prisma = new PrismaClient() ` Environment variables loaded from .env Prisma schema loaded from prisma\schema.prisma Datasource "db": SQLite database "data.db" at "file:../../../../data.db?connection_limit=1" 1 migration found in prisma/migrations No pending migrations to apply. Environment variables loaded from .env Running seed command `tsx prisma/seed.ts` ... 🌱 Seeding... 🧹 Cleaned up the database...: 3.281s 🌃 Created 6013 cities...: 40.716s ✅ Created 5 brands...: 492.154ms ⭐ Created 30 ship models...: 1.187s 🏢 Created 80 starports...: 1.539s 👤 Created 40 users...: 4.015s 👮 Created 4 admins...: 19.858ms 🥳 Created 12 hosts...: 2.001s 😍 Created 31 renters...: 250.196ms 📚 Created bookings...: 873.328ms 📝 Created reviews...: 771.57ms 💬 Created chats...: 1.169s 🌱 Database has been seeded: 56.642s The seed command has been executed. ```
Error from `Setting up example apps` ``` Setting up example apps... > setup > prisma generate && prisma migrate deploy && prisma db seed 'prisma' is not recognized as an internal or external command, operable program or batch file. ❌ setup script failed for finished-app 🚨 Failure: Custom Setup. Please review the messages above for information on how to troubleshoot and resolve this issue. ```

finished-app

"setup": "prisma generate && prisma migrate deploy && prisma db seed",

The setup for the finished app is the same as for the exercises. Do you need it if you are going to use the same data.db?.
maybe it is sufficient to run prisma generate.


.env.example

path to example app: examples/finished-app/.env.example path to exercise app: exercises/01.styling/01-05.problem/.env.example

DATABASE_PATH="../../../data.db"
DATABASE_URL="file:../../../../data.db?connection_limit=1"

The value to DATABASE_PATH and DATABASE_URL in the example up should be one level up.


Web App Fundamentals

The only change i've made is to kcdshop process-manager.server.ts runAppDev function

runAppDev ```diff const appProcess = spawn('npm', ['run', 'dev'], { cwd: app.fullPath, + shell: true, env: { ...process.env, // TODO: support specifying the env NODE_ENV: 'development', // TODO: support specifying the port PORT: String(portNumber), // let it pick a random port... REMIX_DEV_SERVER_WS_PORT: '', }, }) ```


Result from

`npm start` ``` > npm start > start > kcdshop start 🐨 Let's get learning! Local: http://localhost:5639 On Your Network: http://10.100.102.21:5639 Press Ctrl+C to stop ```

Startign - SEO Optimization

Error after clicking on `Start Learning` ✘ [ERROR] Could not parse expression with acorn: Bad escape sequence in untagged template literal [plugin @mdx-js/esbuild] _mdx_bundler_entry_point-b1663984-b044-4f0d-8bdb-a4bbf6cbd0ee.mdx:87:19: 87 │ ╵ ^ ``` Error: Build failed with 1 error: _mdx_bundler_entry_point-b1663984-b044-4f0d-8bdb-a4bbf6cbd0ee.mdx:87:19: ERROR: [plugin: @mdx-js/esbuild] Could not parse expression with acorn: Bad escape sequence in untagged template literal at failureErrorWithLog (C:\projects\kcd-apps\web-app-fundamentals\node_modules\esbuild\lib\main.js:1636:15) at C:\projects\kcd-apps\web-app-fundamentals\node_modules\esbuild\lib\main.js:1048:25 at runOnEndCallbacks (C:\projects\kcd-apps\web-app-fundamentals\node_modules\esbuild\lib\main.js:1471:45) at buildResponseToResult (C:\projects\kcd-apps\web-app-fundamentals\node_modules\esbuild\lib\main.js:1046:7) at C:\projects\kcd-apps\web-app-fundamentals\node_modules\esbuild\lib\main.js:1075:16 at responseCallbacks. (C:\projects\kcd-apps\web-app-fundamentals\node_modules\esbuild\lib\main.js:697:9) at handleIncomingPacket (C:\projects\kcd-apps\web-app-fundamentals\node_modules\esbuild\lib\main.js:752:9) at Socket.readFromStdout (C:\projects\kcd-apps\web-app-fundamentals\node_modules\esbuild\lib\main.js:673:7) at Socket.emit (node:events:513:28) at addChunk (node:internal/streams/readable:324:12) { errors: [ { detail: [VFileMessage], id: '', location: [Object], notes: [], pluginName: '@mdx-js/esbuild', text: 'Could not parse expression with acorn: Bad escape sequence in untagged template literal' } ], warnings: [] ```

completer console log for this stage is in the attached file:

07-Start Learning.txt

Error: @prisma/client did not initialize

Since you only run setup on the last problem app, when i try to start app for any of the other exercises problem or solution i get this error:
Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again

@prisma/client Error [07.seo.01.solution:5061] HEAD / 500 1429 - 573.421 ms [07.seo.01.solution:5061] [07.seo.01.solution:5061] Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again. [07.seo.01.solution:5061] In case this error is unexpected for you, please report it in https://github.com/prisma/prisma/issues [07.seo.01.solution:5061] at new PrismaClient (C:\projects\kcd-apps\web-app-fundamentals\exercises\07.seo\01.solution\node_modules\.prisma\client\index.js:2:154) [07.seo.01.solution:5061] at C:\projects\kcd-apps\web-app-fundamentals\exercises\07.seo\01.solution\build\server-assets-manifest:@remix-run\dev\assets-manifest:1:22034 [07.seo.01.solution:5061] at Object. (C:\projects\kcd-apps\web-app-fundamentals\exercises\07.seo\01.solution\build\:1:1) [07.seo.01.solution:5061] at Module._compile (node:internal/modules/cjs/loader:1254:14) [07.seo.01.solution:5061] at Object.F (C:\projects\kcd-apps\web-app-fundamentals\node_modules\@esbuild-kit\cjs-loader\dist\index.js:1:941) [07.seo.01.solution:5061] at Module.load (node:internal/modules/cjs/loader:1117:32) [07.seo.01.solution:5061] at Function.Module._load (node:internal/modules/cjs/loader:958:12) [07.seo.01.solution:5061] at Module.require (node:internal/modules/cjs/loader:1141:19) [07.seo.01.solution:5061] at require (node:internal/modules/cjs/helpers:110:18) [07.seo.01.solution:5061] at C:\projects\kcd-apps\web-app-fundamentals\exercises\07.seo\01.solution\server\index.ts:2:1628


running prisma generate in the terminal of each of the exercises apps result in this error:

'prisma' is not recognized as an internal or external command, operable program or batch file. I had to use npx prisma generate to run it.

NOT all the apps work, even after prisma generate, some fails to start with the error
[ERROR] Could not parse expression with acorn: Bad escape sequence in untagged template literal [plugin @mdx-js/esbuild]

The app is very slow

Start Learning take 2-3 sec to start and moving between PROBLEM, SOLUTION, TESTS, DIFF is very very slow.

Tests

I did not get any test output

onemen commented 1 year ago

Error on Linux

Using Firefox on Linux, when clicking on link to http://localhost:5639/07/01/problem?preview=solution I get this message

This address is restricted

This address uses a network port which is normally used for purposes other than Web browsing. Firefox has canceled the request for your protection.

terminal output:

[07.seo.01.solution:5061] Error: Cannot find module '/home/onemen/Desktop/kcd-apps/web-app-fundamentals/exercises/07.seo/01.solution/build'
[07.seo.01.solution:5061] Require stack:
[07.seo.01.solution:5061] - /home/onemen/Desktop/kcd-apps/web-app-fundamentals/exercises/07.seo/01.solution/server/index.ts
[07.seo.01.solution:5061] - /home/onemen/Desktop/kcd-apps/web-app-fundamentals/exercises/07.seo/01.solution/index.js
[07.seo.01.solution:5061]     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
[07.seo.01.solution:5061]     at Function.u.default._resolveFilename (/home/onemen/Desktop/kcd-apps/web-app-fundamentals/node_modules/@esbuild-kit/cjs-loader/dist/index.js:1:1519)
[07.seo.01.solution:5061]     at Function.Module._load (node:internal/modules/cjs/loader:920:27)
[07.seo.01.solution:5061]     at Module.require (node:internal/modules/cjs/loader:1141:19)
[07.seo.01.solution:5061]     at require (node:internal/modules/cjs/helpers:110:18)
[07.seo.01.solution:5061]     at /home/onemen/Desktop/kcd-apps/web-app-fundamentals/exercises/07.seo/01.solution/server/index.ts:2:1628
[07.seo.01.solution:5061]     at Layer.handle [as handle_request] (/home/onemen/Desktop/kcd-apps/web-app-fundamentals/node_modules/express/lib/router/layer.js:8:864)
[07.seo.01.solution:5061]     at next (/home/onemen/Desktop/kcd-apps/web-app-fundamentals/node_modules/express/lib/router/route.js:8:1411)
[07.seo.01.solution:5061]     at next (/home/onemen/Desktop/kcd-apps/web-app-fundamentals/node_modules/express/lib/router/route.js:8:1340)
[07.seo.01.solution:5061]     at next (/home/onemen/Desktop/kcd-apps/web-app-fundamentals/node_modules/express/lib/router/route.js:8:1340)
onemen commented 1 year ago

Error in Linux

Result from guessEditor for editor is code, but i have only code-insiders in linux.

maybe you can let the user select the editor from a list ?

Error: spawn code ENOENT
    at Process.ChildProcess._handle.onexit (node:internal/child_process:283:19)
    at onErrorNT (node:internal/child_process:476:16)
    at processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn code',
  path: 'code',
  spawnargs: [
    '-g',
    '/home/hadar/Desktop/kcd-apps/web-app-fundamentals/exercises/07.seo/01.problem/app/routes/users_+/$username.tsx:1:0'
  ]

open

onemen commented 1 year ago

I've found a fix to the editor issue

in COMMON_EDITORS_LINUX make sure that code-insiders is before code

    'code-insiders': 'code-insiders',
    code: 'code',
onemen commented 1 year ago

I'm on discord now... for realistic timing check all timing in web-app-fundamentals

onemen commented 1 year ago

Error on Linux

Using Firefox on Linux, when clicking on link to http://localhost:5639/07/01/problem?preview=solution I get this message

The issue is not with the URL: http://localhost:5639/07/01/problem?preview=solution

This address is restricted

This address uses a network port which is normally used for purposes other than Web browsing. Firefox has canceled the request for your protection.

The problem is with the app port number. for getSolutionAppFromPath it starts with 5000, maybe this range is block by Ubuntu . After I've changed this code the solution start working:

async function getSolutionAppFromPath(
    fullPath: string,
): Promise<Array<SolutionApp> | null> {
......
-   const portNumber = 5000 + (exerciseNumber - 1) * 10 + firstStepNumber
+   const portNumber = 7000 + (exerciseNumber - 1) * 10 + firstStepNumber
    const compiledReadme = await compileReadme(fullPath)
    return Promise.all(
kentcdodds commented 1 year ago

I guess 5639 is ok then?

onemen commented 1 year ago

yes

kentcdodds commented 1 year ago

I think we've handled all of these.