setup-node VS Nuxt.js

Setup environment with Nodejs and install dependencies with npm install, with Github Actions setup Node

No, PR review isn't the only thing that prevents these from being updated. In the yml it's set to a release branch. So it isn't especially fallible.

https://github.com/actions/setup-node/tree/releases/v2

➜ getting-started-with-act git:(master) act -j build WARN ⚠ You are using Apple M1 chip and you have not specified container architecture, you might encounter issues while running act. If so, try running it with '--container-architecture linux/amd64'. ⚠ [Node.js CI/build] 🚀 Start image=node:16-buster-slim [Node.js CI/build] 🐳 docker pull image=node:16-buster-slim platform= username= forcePull=false [Node.js CI/build] 🐳 docker create image=node:16-buster-slim platform= entrypoint=["tail" "-f" "/dev/null"] cmd=[] [Node.js CI/build] 🐳 docker run image=node:16-buster-slim platform= entrypoint=["tail" "-f" "/dev/null"] cmd=[] [Node.js CI/build] ☁ git clone 'https://github.com/actions/setup-node' # ref=v3 [Node.js CI/build] ☁ git clone 'https://github.com/actions/cache' # ref=v3 [Node.js CI/build] ☁ git clone 'https://github.com/actions/upload-artifact' # ref=v3 [Node.js CI/build] ⭐ Run Main actions/checkout@v3 [Node.js CI/build] 🐳 docker cp src=/Users/andrewevans/Documents/projects/getting-started-with-act/. dst=/Users/andrewevans/Documents/projects/getting-started-with-act [Node.js CI/build] ✅ Success - Main actions/checkout@v3 [Node.js CI/build] ⭐ Run Main Use Node.js 16.x [Node.js CI/build] 🐳 docker cp src=/Users/andrewevans/.cache/act/actions-setup-node@v3/ dst=/var/run/act/actions/actions-setup-node@v3/ [Node.js CI/build] 🐳 docker exec cmd=[node /var/run/act/actions/actions-setup-node@v3/dist/setup/index.js] user= workdir= [Node.js CI/build] 💬 ::debug::isExplicit: [Node.js CI/build] 💬 ::debug::explicit? false

steps: # Check out the current repository code - uses: actions/checkout@v3 # 3. https://github.com/actions/setup-node#usage - name: Setup node and build Gatsby uses: actions/setup-node@v1 with: node-version: '16.x' cache: 'npm' - run: npm install # This triggers `gatsby build` script in "package.json" - run: npm run build # 4. Deploy the gatsby build to Netlify - name: Deploy to netlify uses: netlify/actions/cli@master env: NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} with: # 5. "gatsby build" creates "public" folder, which is what we are deploying args: deploy --dir=public --prod secrets: '["NETLIFY_AUTH_TOKEN", "NETLIFY_SITE_ID"]'

If you see repeated build or preparation steps that do not change when your codebase changes, look into caching the results. Here is a straightforward guide to caching, but also be aware caching is built into a lot of marketplace actions anyway, e.g. actions/setup-node can cache npm dependencies.

The most popular ones are Node.js, Python, Java JDK, Go, .Net Core SDK.

diff --git a/.github/workflows/gh-pages.yaml b/.github/workflows/gh-pages.yaml index 401fd33..3ddf6dd 100644 --- a/.github/workflows/gh-pages.yaml +++ b/.github/workflows/gh-pages.yaml @@ -11,42 +11,48 @@ on: jobs: deploy: - runs-on: ubuntu-20.04 + runs-on: ubuntu-22.04 + # Ensure that only a single job or workflow + # https://docs.github.com/en/actions/using-jobs/using-concurrency concurrency: + # workflow - The name of the workflow. + # ref - The branch or tag ref that triggered the workflow run. group: ${{ github.workflow }}-${{ github.ref }} steps: - uses: actions/checkout@v3 with: - submodules: true # Fetch Hugo themes (true OR recursive) fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod + # https://github.com/peaceiris/actions-hugo - name: Setup Hugo uses: peaceiris/actions-hugo@v2 with: - hugo-version: '0.91.2' - # extended: true + hugo-version: '0.101.0' + # https://github.com/actions/setup-node - name: Setup Node uses: actions/setup-node@v3 with: - node-version: '14' - - - name: Cache dependencies - uses: actions/cache@v2 - with: - path: ~/.npm - key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} - restore-keys: | - ${{ runner.os }}-node- - - - run: npm ci + node-version: '18.7.0' + cache: npm + # The action defaults to search for the dependency file (package-lock.json, + # npm-shrinkwrap.json or yarn.lock) in the repository root, and uses its + # hash as a part of the cache key. + # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-data + cache-dependency-path: ./blog/package-lock.json + + - name: Install npm dependencies + working-directory: ./blog/ + run: npm ci - name: Build - run: hugo --minify + working-directory: ./blog/ + run: npm run build + # https://github.com/peaceiris/actions-gh-pages - name: Deploy uses: peaceiris/actions-gh-pages@v3 if: ${{ github.ref == 'refs/heads/main' }} with: github_token: ${{ secrets.GITHUB_TOKEN }} - publish_dir: ./public + publish_dir: ./blog/src/public

Well, let’s consider the scenario we had with the DevHub. We were using the third-party action setup-node to install and configure the Node.js programming language. This action lets you specify the node version to install but it can’t be a dynamically acquired value. You either have to hardcode it or interpolate the value.

This is hitting workflows that use caching [1][2].

- [1] https://github.com/actions/setup-node/issues/516

- [2] https://github.com/actions/cache/issues/820

As of now (11:28 UTC) the status page has been updated.

https://www.githubstatus.com

According to Node Package Manager (NPM), Next.js has about 3.9 million weekly downloads while Nuxt.js has about 438,000. Although Next.js has a significantly higher number of weekly downloads, Nuxt.js still has a robust number of users. We can conclude that both frameworks are relevant and will stand the test of time.

Nuxt team themselves pointed that out [in first release](https://www.npmjs.com/package/nuxt/v/0.0.1) as well as you can see that statement in [Nuxt's wikipedia article](https://cdn.domin.pro/K2Qa). I completely agree with how Nuxt is better for an amount of features.

Node is basically back-end Javascript. While powerful alone, almost exclusively you will use a back-end framework like Next.js or Gatsby when using React, and then maybe Nuxt or Gridsome in Vue.

Both Vue.js and React have their own set of tools and libraries to help developers build and maintain their applications. Vue.js has Vue CLI and Nuxt.js, while React has Create React App and Next.js.

Nuxt.js is a free and open-source JavaScript framework based on Vue.js that helps you develop modern web applications using SSR (server-side rendering) which provides a faster load, better SEO (search engine optimization), and better caching capabilities.

We made a LiveChat Next.js App template. Using Next.js as a foundation for the project, we have a front-end app with built-in routing, Server Side Rendering (SSR), and Server Side Generation (SSG) built with React, but on top of that, ready-to-use API routes built in the form of Serverless functions. If you prefer Vue.js or Svelte, you can choose similar frameworks, like Nuxt.js and SvelteKit.

Not oc, but maybe give Nuxt a look?

Vue's docs are some of the best I've ever read. Nuxt and Craft are pretty great too. I especially like how Craft's docs are bifurcated into the docs which give you the 20/80 + code snippets, and the class reference, which is complete documentation of every method, type, param, etc of the platform.

Nuxt - the Vue alternative to NextJS - supports both static site generation and SSR.