CODEWITHSUNDEEP
node.jswordpressangular
kirby
kirby

Reputation: 33

Angular 5 and Wordpress

I am attempting to setup a project that uses both Angular 5 and Wordpress. Currently my solution allows the serving of both applications using node. From the root directory I run "node index.js" to run wordpress, and in a separate terminal, in a subdirectory I run "ng serve" to run the angular implementation.

Is it possible to run both angular and wordpress on the same terminal window? An example being, by typing "node index.js" in the root directory, can I serve both the angular application in a subdirectory and the wordpress through that one console?

My projects are pretty bare but here is some base code:

/index.js

const express = require('express')
const epf = require('express-php-fpm')

const options = {
  // root of your php files
  documentRoot: __dirname + '/wordpress',

  // extra env variables
  env: {},

  // connection to your php-fpm server
  // https://nodejs.org/api/net.html#net_socket_connect_options_connectlistener
  socketOptions: { port: 9000 },
}

const app = express()
app.use('/', epf(options))
app.listen(3000)

/subproject/protractor.conf.js

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
};

Thank you.

Upvotes: 2

Views: 1123

Answers (1)

WarriorRocker
WarriorRocker

Reputation: 166

I am working on a new plugin, Xo for Angular that may provide a solve for the use case above.

https://wordpress.org/plugins/xo-for-angular/

Xo gives you the option to load an Angular App as a theme with WordPress serving only as the management interface. Routes can be generated dynamically so all pages and posts are instantly viewable on the front-end without needing to recompile.

For local development I recommend setting up either apache or nginx using a tool like XAMPP. I have detailed the setup I use for my own local development here: https://github.com/WarriorRocker/angular-xo-material

Once you have wordpress running through a server like apache you can then just run ng build and let Xo load your App/theme through the main front-end. Alternatively you can also run with ng serve for rapid development.

In production you can either have Xo load your App and inject wp_head/wp_footer as necessary (Live Redirect Mode) or redirect all front-end requests to your App's dist index.html (Offline Redirect Mode).

Additional docs (work in progress): https://angularxo.io/

Upvotes: 1

Related Questions