├── .gitignore
├── README.md
├── app
├── angular.json
├── build.js
├── karma.conf.js
├── package-lock.json
├── package.json
├── src
│ ├── app
│ │ ├── app.component.html
│ │ ├── app.component.scss
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ │ └── foo
│ │ │ └── foo.component.ts
│ ├── assets
│ │ └── .gitkeep
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.scss
│ └── test.ts
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json
└── plugin
└── my-awesome-new-app
└── my-awesome-new-app.php
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # Compiled output
4 | dist
5 | /tmp
6 | /out-tsc
7 | /bazel-out
8 |
9 | # Node
10 | node_modules
11 | npm-debug.log
12 | yarn-error.log
13 |
14 | # IDEs and editors
15 | .vscode
16 | .idea/
17 | .project
18 | .classpath
19 | .c9/
20 | *.launch
21 | .settings/
22 | *.sublime-workspace
23 |
24 | # Visual Studio Code
25 | .vscode/*
26 | !.vscode/settings.json
27 | !.vscode/tasks.json
28 | !.vscode/launch.json
29 | !.vscode/extensions.json
30 | .history/*
31 |
32 | # Miscellaneous
33 | /.angular/cache
34 | .sass-cache/
35 | /connect.lock
36 | /coverage
37 | /libpeerconnection.log
38 | testem.log
39 | /typings
40 | .angular
41 |
42 | # System files
43 | .DS_Store
44 | Thumbs.db
45 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Angular WordPress Integration Starter
2 |
3 | ## A simple to use Angular app in the form of a WordPress plugin
4 |
5 | Sometimes we need a modern, flexibile, and extensible solution to frontend problems in a WordPress project. Some things that need to be handled are too complex or require more reactivity and organization than vanilla JS or jQuery could reasonably accommodate.
6 |
7 | Also, Angular is awesome, and not nearly as cumbersome as it may have earned a reputation for in its early days.
8 |
9 | You can get more details about how this all works in [this article](https://dev.to/stevewhitmore/take-your-wordpress-site-farther-with-angular-3o6p).
10 |
11 | ## Setup
12 |
13 | 1. `cd app && npm i` to get things started.
14 | 2. Once the dependencies are installed, write your app and run `npm run build`. The command will automagically:
15 | - update the css and js file names in the plugin file
16 | - paste the dist folder and its contents into the WordPress plugin folder.
17 | 3. Take the contents of `/plugin` and upload it to your WordPress project's `/wp-content/plugins` folder.
18 | 4. Log into WordPress and activate the plugin.
19 | 5. Add the shortchode defined in the plugin file (It's `[ng_wp]` by default) to any WordPress page or post. Paste `` into a template if you'd prefer to directly embed it in the code.
20 | 6. Sit back and contemplate how great life is now.
--------------------------------------------------------------------------------
/app/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "my-awesome-new-app": {
7 | "projectType": "application",
8 | "schematics": {
9 | "@schematics/angular:component": {
10 | "style": "scss"
11 | },
12 | "@schematics/angular:application": {
13 | "strict": true
14 | }
15 | },
16 | "root": "",
17 | "sourceRoot": "src",
18 | "prefix": "app",
19 | "architect": {
20 | "build": {
21 | "builder": "@angular-devkit/build-angular:browser",
22 | "options": {
23 | "outputPath": "dist/my-awesome-new-app",
24 | "index": "src/index.html",
25 | "main": "src/main.ts",
26 | "polyfills": "src/polyfills.ts",
27 | "tsConfig": "tsconfig.app.json",
28 | "inlineStyleLanguage": "scss",
29 | "assets": [
30 | "src/favicon.ico",
31 | "src/assets"
32 | ],
33 | "styles": [
34 | "src/styles.scss"
35 | ],
36 | "scripts": []
37 | },
38 | "configurations": {
39 | "production": {
40 | "budgets": [
41 | {
42 | "type": "initial",
43 | "maximumWarning": "500kb",
44 | "maximumError": "1mb"
45 | },
46 | {
47 | "type": "anyComponentStyle",
48 | "maximumWarning": "2kb",
49 | "maximumError": "4kb"
50 | }
51 | ],
52 | "fileReplacements": [
53 | {
54 | "replace": "src/environments/environment.ts",
55 | "with": "src/environments/environment.prod.ts"
56 | }
57 | ],
58 | "outputHashing": "all"
59 | },
60 | "development": {
61 | "buildOptimizer": false,
62 | "optimization": false,
63 | "vendorChunk": true,
64 | "extractLicenses": false,
65 | "sourceMap": true,
66 | "namedChunks": true
67 | }
68 | },
69 | "defaultConfiguration": "production"
70 | },
71 | "serve": {
72 | "builder": "@angular-devkit/build-angular:dev-server",
73 | "configurations": {
74 | "production": {
75 | "browserTarget": "my-awesome-new-app:build:production"
76 | },
77 | "development": {
78 | "browserTarget": "my-awesome-new-app:build:development"
79 | }
80 | },
81 | "defaultConfiguration": "development"
82 | },
83 | "extract-i18n": {
84 | "builder": "@angular-devkit/build-angular:extract-i18n",
85 | "options": {
86 | "browserTarget": "my-awesome-new-app:build"
87 | }
88 | },
89 | "test": {
90 | "builder": "@angular-devkit/build-angular:karma",
91 | "options": {
92 | "main": "src/test.ts",
93 | "polyfills": "src/polyfills.ts",
94 | "tsConfig": "tsconfig.spec.json",
95 | "karmaConfig": "karma.conf.js",
96 | "inlineStyleLanguage": "scss",
97 | "assets": [
98 | "src/favicon.ico",
99 | "src/assets"
100 | ],
101 | "styles": [
102 | "src/styles.scss"
103 | ],
104 | "scripts": []
105 | }
106 | }
107 | }
108 | }
109 | },
110 | "defaultProject": "my-awesome-new-app"
111 | }
112 |
--------------------------------------------------------------------------------
/app/build.js:
--------------------------------------------------------------------------------
1 | const { execSync } = require('child_process');
2 | const fs = require('fs');
3 | const pluginName = 'my-awesome-new-app';
4 | const pluginFileName = `${pluginName}.php`;
5 | const destination = `../plugin/${pluginName}`;
6 | const pluginFilePath = `${destination}/${pluginName}.php`
7 |
8 | // Remove the dist folder in the plugin file if its present. Doesn't care if it's not.
9 | fs.rmSync(`${destination}/dist`, { recursive: true, force: true });
10 |
11 | // Run the build command
12 | execSync('ng build --configuration production', { encoding: 'utf-8', stdio: 'inherit' });
13 |
14 | // Move the bundle from the `/app` folder to the plugin's folder
15 | execSync(`mv ./dist ${destination}`)
16 |
17 | // copy the js and css file names to an array
18 | distFilenames = fs.readdirSync(`${destination}/dist/my-awesome-new-app`);
19 | scriptsAndStyleFiles = distFilenames.filter(file => file.endsWith('.js') || file.endsWith('.css'));
20 |
21 | // replace the js and css file names in the php file contents
22 | const pluginFileContents = fs.readFileSync(`${pluginFilePath}`, 'utf8');
23 |
24 | const updateLine = (line, name) => {
25 | const matchedLinePart = line.match(/(?<=app\/).*?(?=\')/gs).toString();
26 | const matchedFileName = scriptsAndStyleFiles.find(file => file.includes(name));
27 | return line.replace(matchedLinePart, matchedFileName);
28 | }
29 |
30 | const updatedFileContentArray = pluginFileContents.split(/\r?\n/).map(line => {
31 | switch (true) {
32 | case line.includes('wp_enqueue_style( \'ng_styles'):
33 | return updateLine(line, 'styles');
34 | case line.includes('wp_register_script( \'ng_main'):
35 | return updateLine(line, 'main');
36 | case line.includes('wp_register_script( \'ng_polyfills'):
37 | return updateLine(line, 'polyfills');
38 | case line.includes('wp_register_script( \'ng_runtime'):
39 | return updateLine(line, 'runtime');
40 | default:
41 | return line;
42 | }
43 | });
44 | const updatedFileContents = updatedFileContentArray.join('\n');
45 |
46 | // write the new names to the php file
47 | fs.writeFileSync(`${pluginFilePath}`, updatedFileContents);
48 | console.log(`*************** ${pluginFileName} updated! ***************`)
--------------------------------------------------------------------------------
/app/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | jasmine: {
17 | // you can add configuration options for Jasmine here
18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 | // for example, you can disable the random execution with `random: false`
20 | // or set a specific seed with `seed: 4321`
21 | },
22 | clearContext: false // leave Jasmine Spec Runner output visible in browser
23 | },
24 | jasmineHtmlReporter: {
25 | suppressAll: true // removes the duplicated traces
26 | },
27 | coverageReporter: {
28 | dir: require('path').join(__dirname, './coverage/my-awesome-new-app'),
29 | subdir: '.',
30 | reporters: [
31 | { type: 'html' },
32 | { type: 'text-summary' }
33 | ]
34 | },
35 | reporters: ['progress', 'kjhtml'],
36 | port: 9876,
37 | colors: true,
38 | logLevel: config.LOG_INFO,
39 | autoWatch: true,
40 | browsers: ['Chrome'],
41 | singleRun: false,
42 | restartOnFileChange: true
43 | });
44 | };
45 |
--------------------------------------------------------------------------------
/app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "my-awesome-new-app",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "node ./build.js",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "~13.3.0",
14 | "@angular/common": "~13.3.0",
15 | "@angular/compiler": "~13.3.0",
16 | "@angular/core": "~13.3.0",
17 | "@angular/forms": "~13.3.0",
18 | "@angular/platform-browser": "~13.3.0",
19 | "@angular/platform-browser-dynamic": "~13.3.0",
20 | "@angular/router": "~13.3.0",
21 | "rxjs": "~7.5.0",
22 | "tslib": "^2.3.0",
23 | "zone.js": "~0.11.4"
24 | },
25 | "devDependencies": {
26 | "@angular-devkit/build-angular": "~13.3.5",
27 | "@angular/cli": "~13.3.5",
28 | "@angular/compiler-cli": "~13.3.0",
29 | "@types/jasmine": "~3.10.0",
30 | "@types/node": "^12.11.1",
31 | "jasmine-core": "~4.0.0",
32 | "karma": "~6.3.0",
33 | "karma-chrome-launcher": "~3.1.0",
34 | "karma-coverage": "~2.1.0",
35 | "karma-jasmine": "~4.0.0",
36 | "karma-jasmine-html-reporter": "~1.7.0",
37 | "typescript": "~4.6.2"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/app/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |