Trouble installing on a DreamHost VPS

thedonquixotic · 1 September 2019 00:02

HI. I got Frontity working on my local machine and I wanted to set it up on a subdomain of my website but I have not been able to. Here is my last two attempts:

┌─ ~/hire-me.jackalope.tech                                                                                                       
└─➤ npx frontity dev 
npx: installed 146 in 11.926s 

Error: Cannot find module '@frontity/core'

Make sure that you are running frontity inside a Frontity project.   
If so try installing @frontity/core again with npm i @frontity/core. 
If you need help please visit https://community.frontity.org/.       


┌─  ~/hire-me.jackalope.tech                                                                                                 
└─➤  npm i @frontity/core 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents): 
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ @frontity/core@1.2.0
added 4 packages from 1 contributor, removed 484 packages, updated 4 packages and audited 8316 packages in 20.174s
found 0 vulnerabilities


┌─  ~/hire-me.jackalope.tech                                                                                                       
└─➤ npx frontity dev
npx: installed 146 in 9.974s 

Error: Cannot find module '@frontity/core'

Make sure that you are running frontity inside a Frontity project.
If so try installing @frontity/core again with npm i @frontity/core.
If you need help please visit https://community.frontity.org/.

I’m on a Dreamhost VPS server. I’m running the lastest version of Node, NPX, and NPM through NVM.

I realized that it was having trouble grabbing frontity from the node modules folder for some reasons o I tried the follow:

┌─    ~/hire-me.jackalope.tech                                                                                                         
└─➤ node frontity dev 
internal/modules/cjs/loader.js:605 
    throw err;
    ^

Error: Cannot find module '/home/jcklpe/hire-me.jackalope.tech/frontity'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
    at Function.Module._load (internal/modules/cjs/loader.js:529:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:775:12)
    at startup (internal/bootstrap/node.js:300:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:826:3)

┌─    ~/hire-me.jackalope.tech                                                                                                         
└─➤ node .node_modules/frontity dev 
internal/modules/cjs/loader.js:605 
    throw err;
    ^

Error: Cannot find module '/home/jcklpe/hire-me.jackalope.tech/.node_modules/frontity'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
    at Function.Module._load (internal/modules/cjs/loader.js:529:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:775:12)
    at startup (internal/bootstrap/node.js:300:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:826:3)

┌─    ~/hire-me.jackalope.tech                                                                                                         
└─➤ ls 
favicon.gif  favicon.ico  frontity.settings.js  node_modules/  old.index.html  package-lock.json  package.json  packages/

┌─    ~/hire-me.jackalope.tech                                                                                                         
└─➤ node ./node_modules/frontity dev 
/home/jcklpe/hire-me.jackalope.tech/node_modules/@frontity/connect/src/index.js:1 
(function (exports, require, module, __filename, __dirname) { export { observe, unobserve } from "./observer";
                                                              ^^^^^^

SyntaxError: Unexpected token export
    at new Script (vm.js:83:7)
    at createScript (vm.js:267:10)
    at Object.runInThisContext (vm.js:319:10)
    at Module._compile (internal/modules/cjs/loader.js:685:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:733:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:658:17)
    at require (internal/modules/cjs/helpers.js:22:18)

EDIT:

Okay I have got the thing installed and running but I can’t access it from my url. I’ve never set up any other kind of website than a wordpress and a static html website so maybe this is super basic but how do I get it to actually point to my frontity website?

This shows some of my lack of knowledge here, as I don’t really understand why frontity is structured the way it is.

I’ve never put a react website up before but I think it wouldn’t be that different from how I do things locally. I would have my index.html and then react would inject into that html with the app.js file etc etc.

But that’s not how frontity is set up. How is frontity set up? I’m not entirely sure. It seems to me that it’s compiling html files and serving them using the javascript as an HTML engine instead of using the PHP engine that normally wordpress has.

I’m not entirely even sure that’s how I want things set up but looking at your docs it seems like there’s def multiple ways to do things.

Regardless, it’s clearly not set up like a default create-react-app style app. So how do I get this thing to appear?

I’m going to leave the node server running in case you want to check. My website should be appearing here: hire-me.jackalope.tech

If you have any suggestions I’d be super thankful! I’m not really a full on dev, I’m just a designer who knows enough code to get themselves in trouble

luisherranz · 3 September 2019 09:39

The only reason Frontity needs a node server (or serverless functions) is because if you want to use React to generate the HTML of you theme, you need to run JavaScript in the server. You cannot generate HTML with React in a PHP server.

@Reyes and I did a talk about that last on the JSforWP conference: https://www.youtube.com/watch?v=fjgmjyXT1kQ

That’s right, that is the way React works without server side rendering. When you want to add server side rendering (SSR), the HTML is not index.html anymore, but a different HTML for each URL, generated by Frontity.

Doing things the create-react-app way is really bad for SEO because the index.html is empty. It’s also bad for user experience because the user needs to wait until JavaScript is downloaded and executed to see the content.

You’re almost there, don’t worry!

I’ve signed up for a Dreamhost VPS to test it out. I’ll let you know what I find.

luisherranz · 3 September 2019 11:04

Ok, so first, you need to add Node to your VPS. Edit the domain and check this boxes:

It looks like it’s similar to cPanel. It needs an app.js file in the your-domain.com folder.

I’ve added this hello-world file:

var http = require('http');
var server = http.createServer(function(req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    var message = 'It works!\n',
        version = 'NodeJS ' + process.versions.node + '\n',
        response = [message, version].join('\n');
    res.end(response);
});
server.listen();

And node seems to work just fine: http://www.frontiti.com.

But the default node version is 0.12 which is like 3 years old. To install node 10, you must ssh in the VPS. In order to do that, first edit the user associated with your domain:

Then, switch to SSH and add a password:

Then ssh to your domain:

> ssh your_username@your-domain.com

Once you’re logged in your VPS, if you check your node version, it should be 0.12.0:

> node --version
# v0.12.0

Run this command to install nvm (which stands for “node version manager”):

> curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

And then add it to the path:

> export NVM_DIR="$HOME/.nvm"
> [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
> [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

If you check the nvm version, it should work:

> nvm --version
# 0.34.0

Finally, install the latest node version using nvm:

> nvm install --lts

And check the node version again:

> node --version
# v10.16.3

It should have updated both npm and npm as well:

> npm --version
# 6.9.0
> npx --version
# 6.9.0

This is where I got stuck. The node app is still using node 0.12: http://www.frontiti.com

I’ve tried to do what they say at the bottom of their guide about adding a .htaccess without success: https://help.dreamhost.com/hc/en-us/articles/360029083351-Installing-a-custom-version-of-NVM-and-Node-js

@thedonquixotic could you please give it a try, add that app.js file and see if you can make it work with Node 10?

luisherranz · 3 September 2019 13:26

I’ve figured it out. The .htaccess file should be on the public folder.

The node version is now 10.16.3

I’ll try to make it work with a custom app.js file.

luisherranz · 3 September 2019 13:53

I got Frontity working using this app.js file:

var frontity = require("./build/server").default;
var http = require("http");
var server = http.createServer(frontity);
server.listen();

then, doing npx frontity build in my local machine and once it finishes, uploading the /build folder to the FTP:

https://www.frontiti.com

thedonquixotic · 3 September 2019 21:47

Thank Luis for so much help!

Okay so I have the latest version of node through nvm, the app.js in my root folder and I have my build folder up. It’s still showing that it’s useing nodeJS 0.12.0 though when I check the page so I think I need to add that htaccess to the public folder. Let me do that real quick.

thedonquixotic · 3 September 2019 22:28

Bingo! Got it working! Thanks so much! And I got to learn some cool Node stuff doing this too

I never realized that it was as easy as just requiring the file and then using http.createServer . That’s great!

luisherranz · 4 September 2019 08:38

A post was split to a new topic: Rename mars-theme to a new name