jreades
commented
2 years ago OK, I've tried to work out for myself the issues with installing from scratch and have the following notes that gets me down to just three errors (see below) with the web site launching and some bits functioning as expected (but others not). This is mix of reference stuff that I've got in half-bash/half-markdown format:
Install gatsby
APPDIR = 'client' npm install --global gatsby-cli mkdir docker-gatsby && cd $_ gatsby new $APPDIR cd $APPDIR npm install
Install dependences
npm install --save juniper-js node-sass prismjs react react-dom react-helmet rehype-react reveal.js classnames autoprefixer @phosphor/widgets @jupyterlab/rendermime @jupyterlab/outputarea browser-monads react-use-localstorage crypto-browserify node-polyfill-webpack-plugin stream-browserifyInstall plugins
npm install gatsby-plugin-sass gatsby-plugin-react-helmet gatsby-source-filesystem gatsby-plugin-react-svg gatsby-plugin-sharp gatsby-plugin-sitemap gatsby-plugin-offlineInstall Transforms and Related
npm install gatsby-transformer-remark gatsby-transformer-sharp
npm install gatsby-remark-copy-linked-files gatsby-remark-prismjs gatsby-remark-smartypants gatsby-remark-images gatsby-remark-unwrap-imagesInstall
npm installGrab Existing Repo Stuff
- Copy over gatsby-config.json
- Copy over gatsby-browser.js
- Copy over gatsby-node.js
- Copy over theme.sass
- Copy over static folder contents
- Look in src folder:
- Copy over templates folder contents
- Copy over index.js
- Copy over styles folder contents
- Copy over components folder contents
- Comment out
indentedSyntax: trueingatsby-config.js - Add
meta.json- And add "author": "Foo" to this file
Add expected folders
mkdir -p chapters
mkdir -p slides
mkdir -p exercisesAnd copy contents (so could be cp -r).
Edits to templates
- Replace
@illinois/...import insrc/templates/chapter.jswithreact-use-localstorage - Replace
marked.jsimport insrc/components/slides.jswithmarkdown.js - Add the below to tail of
gatsby-node.js:exports.onCreateWebpackConfig = ({ actions }) => { actions.setWebpackConfig({ resolve: { fallback: { crypto: require.resolve('crypto-browserify'), stream: require.resolve('stream-browserify'), }, }, }) }
Fixes to imports in components
perl -i -p -e 's|import classes from|import * as classes from|' ../components/choice.js
perl -i -p -e 's|import classes from|import * as classes from|' ../components/code.js
perl -i -p -e 's|import classes from|import * as classes from|' ../components/exercise.js
perl -i -p -e 's|import classes from|import * as classes from|' ../components/hint.js
perl -i -p -e 's|import classes from|import * as classes from|' ../components/layout.js
perl -i -p -e 's|import classes from|import * as classes from|' ../components/link.js
perl -i -p -e 's|import classes from|import * as classes from|' ../components/slides.js
perl -i -p -e 's|import classes from|import * as classes from|' ../components/typography.js
perl -i -p -e 's|import classes from|import * as classes from|' ../pages/index.js
perl -i -p -e 's|import classes from|import * as classes from|' ../templates/chapter.jsTemplate Issues
Try removing global keyword and indenting for .sass files:
- Fixes reveal from
slides.module.sasserror
Still Stuck
warn ./src/components/code.js
Attempted import error: 'input' is not exported from '../styles/code.module.sass' (imported as
'classes').
warn ./src/components/code.js
Attempted import error: 'button' is not exported from '../styles/code.module.sass' (imported as
'classes').
warn ./src/components/layout.js
Attempted import error: 'description' is not exported from '../styles/layout.module.sass'
(imported as 'classes').
Hi -- I'm trying to adapt a starter Python course that we wrote a few years ago for use with Binder to the template provided here since it provides a lot of really useful features in terms of self-testing of both code and comprehension.
We already make use of Docker so I was quite excited to think that I'd not have to go anywhere near
npmsince my previous excursions into the package manager have been... challenging. It might just be my poor understanding of node, but having forked the repository as a template and cloned it to my local machine I'm stuck on this:This is using the repo as cloned on Docker 4.4.2 (Intel Mac running Monterey 12.2.1) with no attempts at modification. Tracing this error via Google led me to this:
So it looks to me like something (in sharp?) is no longer compatible with what's being installed during
docker-composeand hasn't had its version pinned to a compatible one (which seems strange given the sheer overwhelming detail of package-lock.json). Trying to manually install sharp as part of the build process hasn't worked for me. This is almost certainly a function of my lack of knowledge about node. Is there a pre-built image somewhere that I can use, or does that not work because the web site is not actually mounted from the local FS but baked into the build? It doesn't look like that's the case but...Anyway, since then I've tried this tutorial, this tutorial, and this tutorial. The last one has gotten me closest to a running Docker image but installs someone else's package.json plan with various version locks that are only a bit more recent than this starter course. When I try to bring in the bits that seem to be missing (by comparing against your
package.jsonfile) I end up in npm ::hell::.Is there a process/explanation for installing this stuff from scratch so that I'm not doing cargo cult stuff with npm, package.json, and package-lock.json?
If I can get this building I'd be happy to put a Docker image on the Hub so that a backup process exists as and when the build starts failing...
P.S. Do I also infer that each code cell currently launches its own Binder instance?