Hi there! Thanks for stopping by!

This was build for public viewing and some of the confidential has been redacted, but besides that, it's an exact copy of my private repository.

This is are just the fastest steps to get you up and running with a development build of the app.

Clone the repo

git git@github.com:rdig/portfolio-snapshot.git

Install Npm's global and dev dependencies: (If you don't have Node.js installed check below)

npm install
npm install -d

Build the project

npm run dev-once

The project requires Node.js and it's package manager Npm, plus it renders the pages using the React.js library / Ecosystem (Check below for more information). You can see the requirements by reading the package.json file.

On the server side, this project requires Apache v2.4.x, PHP newer than v5.4 and an Sqllite database engine.

Since some of the directives are written for the new version of Apache, running it on pre-2.4 will break the site.

This projects requires Node.js version 4 or newer.

(Linux Debian-based distributions Install)

To install node on your system, run the following commands: (use setup_4.x for version 4.x.x of node or setup_5.x for version 5.x.x)

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs

Install the build tools (you may already have them):

sudo apt-get install -y build-essential

Link the nodejs binary to the node or else you will run into problems along the way (because there is another node package - Amateur Packet Radio "Node" Program - that is going to screw with your setup):

sudo ln -s /usr/bin/nodejs /usr/bin/node

Before installing dev time dependencies (below) you will need React for this build to work.

This must be installed globally to prevent unwanted dependencies break (or packages getting installed multiple times).

To install, run npm install -g react react-dom. Only these this is used globally, the rest will be installed in --save-dev mode while initializing the project.

To get the project's required global dependencies (npm packages) run npm install

To get the project's required development dependencies (npm packages) run npm install -d

Depending on your internet connection, this could take a while.

To build the project (for development) just run npm run dev

This has --watch argument added to the run command so it will keep the process open and watch for file changes as you work.

This dev run contains livereload, but since this does not work as well as hot-reload, and is very likely to fail at some point, don't over-rely on it.

The data storage / entry is handled in the backend by Cockpit CMS. This was chosen because of it's lack of front-end. It also has a pretty goo data retrieval interface via APIs.

For more documentation you look at the official one, or go strait to the Github repo of the project.

The linting process was added to the dev build process and runs every time you build, you can also run it once, manually using npm run lint.

If you need to tweak the rules, the config file is non-standard and is named eslint-rules.json

The unit tests are written in Jest using Jasmine v2 as a test runner.

You'll find them in the test/ folder.

To test, just run npm test. Like the build command, this also has --watch argument added to the run command, so it will watch for changes / fails while you work.

Initially we were supposed to have a documentation generator (The likes of yuiDoc or react-docgen), but since I didn't find one suitable to work with, and that can be used with all libraries (eg: Vanilla JS and with React), the whole thing was postponed until I can find (or write) something better.

The stylesheets are automatically preprocessed (if needed) by the appropriate webpack loader, so you don't have to worry about them. (Granted, it's a little slower than a stand-alone preprocessor, because this has to re-bundle the javascript files)

Robots and Sitemaps are automatically generated by cockpit via robots.php and sitemap.php.

If the articles are not published they will not show up.

For static entries in the sitemap files, add / change data in the Sitemap datastore in Cockpit.

Robots is only used for explicitly denying, not allowing.

For entries, add / change data in the Robots datastore in Cockpit.

Warning Apparently the name of the link gets parsed and matched, so try to avoid short non-descriptive links while using the disallow instruction. Ex: blocking cv will also block colocvial

Since this project uses PHP for the backend CMS, I did not want to use the built in webpack dev server (even though it has some nifty features), or use some weird two server config.

Because of that you have to supply your own web server that supports PHP >= 5.4, PDO with SQLite support and has the GD extension enabled.

I'm currently using Apache on Linux. If you want to roll one up fast, I suggest checking out Bitnami's LAMP Stack. Bitnami also has the equivalent stacks for Windows or Mac OS

Before pushing the files to production, make sure you build them for production (minified, smaller, using production version of React) using npm run build

Except for a few, the files and folders require basic read permissions(0644 / 0755). Here are the exceptions the require group write (0775) permissions:

/cp/storage/backups
/cp/storage/cache/assets
/cp/storage/cache/thumbs
/cp/storage/cache/tmp
/cp/storage/data
/cp/storage/uploads

After loging in the cockpit dashboard for the first time, clear the cache so it will be re-generated for the new environment: Settings -> Info -> Cache size (Click on value).