Step -1: What's Vulcan?

Vulcan Next is the Next.js starter for GraphQL developer.

Next.js is a low-level technology, you need a lot more to build professional-grade applications: tools for testing like Jest, Storybook and Cypress ; helpers to quickly spawn an API ; user account management...

Vulcan Next provides all those features out-of-the-box!

Step 0: Let's install Vulcan

Already familiar with JavaScript frameworks?

If you are a beginner, skip to next section. If you feel confident in your programming skills, run this in your terminal:

git clone -b main https://github.com/VulcanJS/vulcan-next
cd ./vulcan-next
yarn install
yarn run dev
xdg-open http://localhost:3000/learn

If those commands don't make sense for you, that's ok! The sections below will explain Vulcan installation process step by step.

Prerequisites

This first step has a lot of prerequesites! If you've never used Node.js before, the setup will feel complicated. That's perfectly normal and fine at this point, keep going!

• Being able to use the terminal. All the commands are provided in "Linux" shell format. They will work on Linux (Ubuntu, Fedora, etc.) and Mac, but not on Windows. If you are using Windows, you might want to use WSL to get the same results.
• Having Git installed.
• Having Node.js installed. We recommend using NVM or Volta.

Never used Next.js?

Vulcan Next is a framework based on Next.js. If you don't know Next.js: good news, they have a live tutorial as well!

Get the code on your own computer

The first step of your journey is installing Vulcan on your own computer.

Installing a JavaScript framework is as simple as copying its code in a folder, on your machine. This is what git clone does.

# 1. Open a terminal. A terminal always open in a specific folder.
# As a default, the terminal will open in your "home" folder.
# 2. Clone Vulcan Next code in your home folder.
# For me, this will create a folder: /home/eric-burel/vulcan-next
git clone -b main https://github.com/VulcanJS/vulcan-next

Then, let's install Vulcan Next. In a JavaScript framework, installing means running a command that will download all packages that the application depends on, and sometimes do additional operations. For example, Vulcan Next depends on Next.js, Apollo Graphql, and Material UI. To install them, you only need one command:

# 1. Go to the right directory. "cd" means "change directory"
cd ./vulcan-next
# 2. Install the packages using Yarn (Yarn is similar to the "npm" command, but better :))
yarn install

Run Vulcan

Wow, that was probably the most difficult step. Good news is that most Node.js/JavaScript frameworks works exactly the same: if it's your first time using a JS framework, you'll be able to reuse this new knowledge for other projects.

Now, let's run Vulcan:

# We are going to run in "dev" mode => it is a special mode suited for developement.
# For example, it reloads the pages automatically as you code them!
yarn run dev

Go to step 1

Congratulation, you beat the first and hardest step!