• Stars
    star
    127
  • Rank 282,790 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 7 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

VulcanJS starter repo. Use as a base for your own VulcanJS projects.

Vulcan Starter

This kit gives you all you need to quickly learn Vulcan and launch your own projects.

Other resources:

Table of Contents

Quick Install

If you already have Meteor up and running, read this section. Otherwise, read the Complete Install section.

Step 1 - Clone

git clone [email protected]:VulcanJS/Vulcan-Starter.git
cd Vulcan-Starter

(or, using https: git clone https://github.com/VulcanJS/Vulcan-Starter.git)

Step 2 – Run

npm install
npm start

Getting Started Tutorial

When you first run this repo, you'll see the first step of Vulcan's interactive Getting Started tutorial.

https://d3vv6lp55qjaqc.cloudfront.net/items/0I2W3G1i2K3z0p052c02/Screen%20Shot%202018-02-03%20at%2011.16.53.png?X-CloudApp-Visitor-Id=43642&v=807ac6f9

This interactive tutorial will guide you through Vulcan basics, such as:

  • Creating routes.
  • Registering components.
  • Defining a schema.
  • Loading data.
  • Generating forms.

All while modifying the code of the tutorial itself! How meta!

Other Examples

Additionally, this repo also contains the following example apps:

  • Simple Example: build a simple paginated list of movies [video].
  • Movies Example: like the Simple example, but more in-depth [video+tutorial].
  • Permissions Example: manage user roles in Vulcan [video].
  • Instagram Example: create a simple Instagram clone [video].
  • Interfaces Example: using GraphQL interfaces.
  • Reactions Example: implement Facebook-style reactions & voting.
  • Forum Example: a full-fledged Hacker News-style forum codebase [docs].
  • Customization Example: how to customize other Vulcan packages, based on the Forum Example [video+tutorial].

Complete Install

The Complete Install steps will get you going on a freshly built Ubuntu desktop machine (including installing Node, Meteor, etc.) using the "two-repo" install.

The steps below assume a machine that has not previously been used for software development.

They were tested Oct 15/2017, on an 8Gb Qemu/KVM virtual machine running a freshly installed Xubuntu Desktop 16.04 LTS. Expect other environments to behave differently but, sufficiently similar that, adaptation should not be difficult.

Critical prerequisite

Note that, to use the scripts below, you must already have SSH access to GitHub. You'll need that in any case for properly managing version control of your project. Learn more at GiHub Bootcamp : Connecting to GitHub with SSH

Step 1 - Preparation

# Specify where things should go
export NEW_PROJECT_NAME="myVulcan";                # a name for your new project
export PROJECTS_DIRECTORY="${HOME}/projects";      # the installation path for your new project
export VULCAN_HOME="${PROJECTS_DIRECTORY}/Vulcan"; # the path to the root of your Vulcan installation

# Prepare dependencies
sudo apt install -y git curl build-essential;
# Need git for managing your project's source code.
# Need curl to get the other stuff.
# Need C++ build tools for fast bcrypt installation

# Install 'meteor'
curl https://install.meteor.com/ | sh;

# Sanity check your Meteor installation
echo -e "\nMeteor version...";
meteor --version;
export METEOR_NODE_VERSION=$(meteor node --version);
echo -e "Meteor Node version...\n ${METEOR_NODE_VERSION}";


# Install 'nvm', so as to be able to easily switch NodeJs versions
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.5/install.sh | bash;

# Prepare to use 'nvm' immediately
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion


# Set Meteor version of Node as your default for NodeJS work outside of Meteor
nvm install ${METEOR_NODE_VERSION};
nvm alias default ${METEOR_NODE_VERSION};

# Create a projects folder and step into it
mkdir -p ${PROJECTS_DIRECTORY}
cd ${PROJECTS_DIRECTORY}

# Clone Vulcan core into its own folder and step into it
git clone [email protected]:VulcanJS/Vulcan.git

# install and pre-cache all of Vulcan's NodeJS dependencies
cd ${VULCAN_HOME};
meteor npm install;

Step 2 - Test Vulcan installation

Check it works with a browser at http://localhost:3033 then kill it with <ctrl-c>

# Run Vulcan so it pre-caches all its Meteor dependencies
[ -f settings.json ] || cp sample_settings.json settings.json;
meteor  --port 3033 --settings settings.json;

Step 3 - Prepare your project

cd ${PROJECTS_DIRECTORY};

# Clone Vulcan starter kit as your named project
git clone [email protected]:VulcanJS/Vulcan-Starter.git ${NEW_PROJECT_NAME}

# Step in your project folder
cd ${NEW_PROJECT_NAME};

# Make sure your app uses the same Meteor release as Vulcan
cp ${VULCAN_HOME}/.meteor/release ./.meteor;

# install and pre-cache all of your named app's NodeJS dependencies
# meteor npm install --save cross-fetch;
meteor npm install;

# Tell Meteor to refer to the Vulcan sister folder for packages that Vulcan supplies
export METEOR_PACKAGE_DIRS=../Vulcan/packages;
echo "Vulcan's Meteor packages folder : ${METEOR_PACKAGE_DIRS}.";

Step 4 - Test your project installation

Check it works with a browser at http://localhost:3000 then kill it with <ctrl-c>

# Run your Vulcan project
[ -f settings.json ] || cp sample_settings.json settings.json;
meteor --port 3000 --settings settings.json

More Repositories

1

Vulcan

πŸŒ‹ A toolkit to quickly build apps with React, GraphQL & Meteor
JavaScript
7,978
star
2

vulcan-next

The Next starter for GraphQL developers
TypeScript
394
star
3

npm-the-right-way

Demonstration of how you build full-stack, typed, NPM packages, the right way
TypeScript
69
star
4

vulcan-docs

πŸ“– Docs for React/Apollo/Meteor version of Vulcan
Less
42
star
5

vulcanjs-cli

The official cli scaffolding tool for VulcanJS
JavaScript
36
star
6

vulcan-npm

The full-stack JavaScript App Framework
TypeScript
31
star
7

Screenings

The theme for Screenings.io
JavaScript
22
star
8

Zeiss

A video and photo theme for Telescope
CSS
21
star
9

Fuji-Theme

A Vulcan theme for showcasing videos and photos
JavaScript
18
star
10

eurodance-stack

The Remix stack for GraphQL developers
TypeScript
17
star
11

meteor-events

Internal event tracking for Meteor apps
JavaScript
14
star
12

Telescope-Homepage

The Telescope homepage
HTML
10
star
13

vulcan-home

The VulcanJS homepage
JavaScript
10
star
14

enka-stack

Alias for Eurodance stack
TypeScript
6
star
15

vulcan-places

Google Maps Places integration for Vulcan
JavaScript
6
star
16

Project-JobBoard

A VulcanJS job board starter project
JavaScript
5
star
17

Project-Bookings

VulcanJS AirBnB-style bookings starter project
JavaScript
5
star
18

Meta

The repo for http://meta.telesc.pe
JavaScript
5
star
19

API-Docs

Telescope API Documentation
HTML
4
star
20

custom-project

A sample project with a few simple customizations
JavaScript
4
star
21

vulcan-remix

The Remix stack for GraphQL developers
TypeScript
4
star
22

Telescope-Tweets

A package for getting tweet counts
JavaScript
3
star
23

Brick-By-Brick

A community building guide
HTML
3
star
24

vulcan-algolia

Algolia integration for Vulcan.js
JavaScript
2
star
25

vulcan-express

Vulcan backend, based on Express
TypeScript
2
star
26

Project-Forum

VulcanJS Forum starter project
JavaScript
2
star
27

vulcan-meteor-next-transition

A starter using Vulcan Next as the frontend and Vulcan Meteor as the backend (for transition purpose)
JavaScript
2
star
28

vulcan-vscode-snippets

The official snippets extension for Vulcan.js
2
star
29

Telescope-Lens-Recently-Commented

A "Recently Commented" lens for Telescope
JavaScript
1
star