Local website development environment not working

[quaid]

Working in a Fedora Toolbox, I've been setting up my own repo for doing website changes, and I'm having troubles with the steps in the README.md for this repo. I'm working on setting up a local development environment so I can test site redesigns locally.

When I run make dev inside of my cloned repo, it consistently errors out, with the contents of the attached log and this final output. Running make dev-clean gets the same results:

npm ERR! A complete log of this run can be found in:
npm ERR!     /var/home/kwade/.npm/_logs/2021-07-27T21_09_09_820Z-debug.log

> operate-first.github.io@0.1.0 start
> npm run develop

> operate-first.github.io@0.1.0 develop
> gatsby develop

sh: line 1: gatsby: command not found
make: *** [Makefile:19: dev] Error 127

There doesn't seem to be the presence of sharp anywhere in the Toolbox. (The Toolbox is one I built, as I haven't been able to get the Operate First community's Toolbox running on this Fedora Silverblue.) I'm also not very familiar with npm and how node.js dependencies are handled, so I could be missing something (that maybe should be in the README.)

Here is the full log:

2021-07-27T21_09_09_820Z-debug.log

[oindrillac]

@quaid I think you might be missing installation of Gatsby on your local machine? I had to install node and npm install -g gatsby-cli. We should add that as a pre-requisite on the instructions

[quaid]

Yeah, I have a few suggestions for improving the README, that being one of them.

Since I couldn't find a system package, I used the Gatsby quickstart but it uses a combined move of npm init gatsby and maybe that didn't get me what I needed. Going back to use npm install gatsby, I get two different results depending on which branch I'm in for the repo. I suppose this is related to the node-modules directory?

In the gh-pages branch I get a series of deprecation errors and offers to audit and fix, it doesn't error out.

In the main branch, I get essentially the same error as above.

It also seems I'm having nvm/npm confusion; I'm not very familiar with working with Node.JS.

Using npm install -g gatsby-cli actually installed something! Then make dev dies looking for gatsby-source-filesystem.

I'll try this on a regular Fedora system (the above is a rawhide Silverblue install using a F34 Toolbox) and see how it compares. Thanks!

[quaid]

I removed the Fedora repo versions of Node.js and npm, then followed the instructions on the Gatsby site for getting Node.js and Gatsby installed, as linked from PR #278 . Same error pathway unfortunately: the make dev fails for a missing gatsby-source-filesystem, and trying to install that with npm also fails the same.

Here are those two logs: 2021-07-31T02_44_51_903Z-debug.log 2021-07-31T02_42_09_459Z-debug.log

[durandom]

Actually make dev should install all the dependencies for you.

@tumido I'd love to see toolbox version for the development. Or a containerized version. I think I'll play with that a bit...

[durandom]

Change this in package.json

diff --git a/package.json b/package.json
index b28eeee..9d9458e 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "license": "GPLv3",
   "scripts": {
     "build": "gatsby build",
-    "develop": "gatsby develop",
+    "develop": "gatsby develop -H ${HOST:-0.0.0.0} -p ${PORT:-8080}",
     "format": "prettier --write \"*.{js,jsx,ts,tsx,json,md}\" \"src/**/*.{js,jsx,ts,tsx,json,md}\" \"content/**/*.{js,jsx,ts,tsx,json,md}\"",
     "start": "npm run develop",
     "serve": "gatsby serve -H ${HOST:-0.0.0.0} -p ${PORT:-8080}",

Then create the container initially:

❯ docker run -ti -v `pwd`:/home -p 8080:8080 --name op1st_site quay.io/operate-first/opf-toolbox
yum install -y make npm
cd /home
make dev

Then point your browser to http://localhost:8080

Later, you can restart the container with

docker start -i op1st_site

As said, you can comment all the source-git inclusions, to compile faster in gatsby-config.js

  //   {
  //     resolve: `gatsby-source-git`,
  //     options: {
  //       name: `users/data-science-workflows`,
  //       remote: `https://github.com/aicoe-aiops/data-science-workflows.git`,
  //       patterns: [`**/*.md`, `**/*.png`],
  //     }
  //   },

This is with docker on my :cough: mac... with the https://github.com/operate-first/toolbox it should be similar, if not easier. We should probably add make and npm to the toolbox.

[quaid]

Can we do this with podman instead? I.e., if we're using podman in the rest of the infrastructure, it would be good to use the same OCR runtime in this setup.

[tumido]

https://github.com/operate-first/operate-first.github.io/pull/283 together with https://github.com/operate-first/toolbox/pull/41 makes it possible to run a simple dev setup within the toolbox without any other additional setup needed.

[quaid]

283 together with operate-first/toolbox#41 makes it possible to run a simple dev setup within the toolbox without any other additional setup needed.

We can't make using the Toolbox the only method for contributing to the website, that is actually a higher bar to participation than before. (I know the Toolbox is ready-to-go, but it presumes that one is even familiar with or has access to that technology.)

If the steps for creating a build environment to test website changes is too complicated, we should look at using a simpler tool for building the site.

We definitely need a clear set of steps in the README, these changes help us get there. I have other changes to propose, but I haven't even gotten the environment working yet so I don't know what the working instruction set is.

[tumido]

Hm.. how can I replicate your issue. Developer environment works locally fine for me.

can you please share your node.js version:

$ npm version
{
  'operate-first.github.io': '0.1.0',
  npm: '6.14.11',
  ares: '1.16.1',
  brotli: '1.0.9',
  cldr: '37.0',
  http_parser: '2.9.4',
  icu: '67.1',
  llhttp: '2.1.3',
  modules: '72',
  napi: '8',
  nghttp2: '1.41.0',
  node: '12.22.0',
  openssl: '1.1.1j',
  tz: '2019c',
  unicode: '13.0',
  uv: '1.40.0',
  v8: '7.8.279.23-node.46',
  zlib: '1.2.11'
}

I think the dev experience should be as simple as:

$ git clone ...
$ npm install
$ make dev   # or npm run dev

which works for me. :shrug:

[tumido]

I agree that toolbox shouldn't be the always go-to tool for any changes. It should be much simpler as it usually is for any web development....

[quaid]

@tumido cool, I agree, let's keep it simple and have our great developer toolbox experience. :)

I'll look further into my env and try things again, here's my Node.js version:

npm version { 'operate-first.github.io': '0.1.0', npm: '6.14.13', ares: '1.17.1', brotli: '1.0.9', cldr: '38.1', icu: '68.2', llhttp: '2.1.3', modules: '83', napi: '8', nghttp2: '1.43.0', node: '14.17.0', openssl: '1.1.1k', tz: '2020d', unicode: '13.0', uv: '1.41.0', v8: '8.4.371.23-node.63', zlib: '1.2.11' }

[tumido]

@quaid I think the problem here is your node version. This repo requires Node.js in version 12, since that's the builder image's Node version. All the locked dependencies are locked to versions supported for this particular node version.

Can you try installing and using nvm? https://github.com/nvm-sh/nvm

After you install it you should be able to run following commands to change your Node.js version.

$ nvm install lts/erbium
Downloading and installing node v12.22.5...
Downloading https://nodejs.org/dist/v12.22.5/node-v12.22.5-linux-x64.tar.xz...
############################################################################################################################################################################## 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v12.22.5 (npm v6.14.14)

$ nvm use lts/erbium
Now using node v12.22.5 (npm v6.14.14)

$ node -v > .nvmrc

On any consecutive cd into this project directory you either have to run nvm use:

$ nvm use
Found '/home/tcoufal/Programming/AI-CoE/operate-first/website/.nvmrc' with version <v12.22.5>
Now using node v12.22.5 (npm v6.14.14)

Or enable any of the automated solutions for your shell described in the nvm repo.

I think when you start using Node.js 12 all the problems and incompatibilities should go away. I hope so :crossed_fingers:

[sesheta]

Issues go stale after 90d of inactivity. Mark the issue as fresh with /remove-lifecycle stale. Stale issues rot after an additional 30d of inactivity and eventually close.

If this issue is safe to close now please do so with /close.

/lifecycle stale

[sesheta]

Stale issues rot after 30d of inactivity. Mark the issue as fresh with /remove-lifecycle rotten. Rotten issues close after an additional 30d of inactivity.

If this issue is safe to close now please do so with /close.

/lifecycle rotten

[sesheta]

Rotten issues close after 30d of inactivity. Reopen the issue with /reopen. Mark the issue as fresh with /remove-lifecycle rotten.

/close

[sesheta]

@sesheta: Closing this issue.

In response to [this](https://github.com/operate-first/operate-first.github.io/issues/277#issuecomment-1017442967): >Rotten issues close after 30d of inactivity. >Reopen the issue with `/reopen`. >Mark the issue as fresh with `/remove-lifecycle rotten`. > >/close Instructions for interacting with me using PR comments are available [here](https://git.k8s.io/community/contributors/guide/pull-requests.md). If you have questions or suggestions related to my behavior, please file an issue against the [kubernetes/test-infra](https://github.com/kubernetes/test-infra/issues/new?title=Prow%20issue:) repository.