Skip to content

Instantly share code, notes, and snippets.

@jdecode
Last active June 11, 2020 21:08
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jdecode/3dd9a6edd6c0411756681c0035b76c41 to your computer and use it in GitHub Desktop.
CakePHP and Vue in single repo

Edit: The original title of this gist was "Vue from scratch" but soon (actually from the very initial stage) it took the road of "CakePHP and Vue as monorepo". This still contains almost all the Vue specific items as listed below (the 18-point list is not changed, although some of the items are skipped or have notes added in comments). This is a fairly large piece of text + screenshots (to read and see) but not really time consuming to implement (that's what I tell myself, anyway). Happy reading.... caking and vueing... cakueing perhaps!

Thanks to github.com/pankajvashisht-ucreate for the list

Following is the original 18-point list shared by Pankaj Vashisht for someone who is starting in Vue.js from scratch

  1. Node installation
  2. Initialization of package.json file
  3. Basic understanding of script key in package.json file
  4. Install vuejs
  5. Vue file initialization with vue instance
  6. Understanding of vue.use methods
  7. Vue router
  8. Vue lifecycle (Hooks)
  9. Design Pattern
  10. How to create component in the vuejs
  11. Vue html Attributes (Very Important)
  12. Two way binding
  13. Data pass parent to child and child to parent (Props)
  14. Understanding the concept of $emit in the vue js
  15. Vue js slot
  16. Vue js Object keys in details
  17. VueStore for data sharing
  18. How deploy the Vue js App
@jdecode
Copy link
Author

jdecode commented Jun 10, 2020

Prerequisite being installation of Vue CLI (steps/links not included here, Google!)

  1. vue create . (create vue project in current directory)
    Screenshot from 2020-06-10 21-02-18
    Screenshot from 2020-06-10 21-03-41

  2. That's it - Vue is installed (not going to work in a mono-repo setup as of now, but it is actually installed)

@jdecode
Copy link
Author

jdecode commented Jun 10, 2020

One of the side-effect of having CakePHP and Vue in the same folder is that the .gitignore file is replaced now with vue specific files/folders, and we want to include both so we simply merge the 2 versions of the files.

To keep things downright simple, I copied the CakePHP .gitignore file before installing vue
If you need it, you can download a copy from the GitHub repo
Or run git stash (this will stash the changes done by vue create . command) and NOW you can copy the CakePHP's .gitignore to a safe place, and then unstash previously stashed code, and proceed from there on (Google for stash/unstash and what these do in git).

After installing vue (as per the previous step) if you run git status you will find something like following (because of the changes in .gitignore file)
Screenshot from 2020-06-10 21-04-22

@jdecode
Copy link
Author

jdecode commented Jun 10, 2020

After merging .gitignore file, this is what git status looks like (BTW, s is the shortcut that I have set for git status)
Screenshot from 2020-06-10 21-20-46

Note : So far there is nothing specific to Vue.js, except the vue create . command. Rest everything has been to have a mono-repo setup.

@jdecode
Copy link
Author

jdecode commented Jun 10, 2020

Git add > commit > push (whatever is there as of now)
Screenshot from 2020-06-10 22-25-08

Screenshot from 2020-06-10 22-25-36

@jdecode
Copy link
Author

jdecode commented Jun 10, 2020

Still no Vue!

@jdecode
Copy link
Author

jdecode commented Jun 10, 2020

Till this point, CakePHP home page will show up showing the list of dependencies with status.
Since we have not done any specific configuration and the system on which this is being installed already has the required PHP and the extensions so the default home page looks like following (note that I have dark-theme setup, don't ask how/why, so your setup might be more bright)
Screenshot from 2020-06-10 23-52-31

@jdecode
Copy link
Author

jdecode commented Jun 10, 2020

Vue!

2 configurations:

  1. npm script to build vue output files from source files - this doesn't require any change since package.json is already having this command
  2. build to output the files to a folder that would be public - create a new vue.config.js (in project's root directory) and set the path to webroot/vue, webroot is the "public" folder of CakePHP (storing CSS/JS/Images/Icons etc), and in this folder a new folder would be created, aptly named vue that will contain the compiled files.

Note: build command generates build when prompted, while during active development the build should be compiled as and when we save the source vue files.
To accomplish this, instead of just "build", we add a flag "watch" that watches continuously the changes done to Vue source files, and compiles in the background.
In package.json, go to the scripts part and you will notice that it already contains some scripts, including build.
Duplicate the build script line, and name it watch and append --watch to the end of the command.

Change in package.json:
Screenshot from 2020-06-10 22-31-09

Contents of the vue.config.js file
Screenshot from 2020-06-10 23-03-39

@jdecode
Copy link
Author

jdecode commented Jun 10, 2020

Now, when the command npm run watch is executed, the compiled JS is stored in webroot/vue folder (creating respective folders as necessary)
Screenshot from 2020-06-11 00-12-29

@jdecode
Copy link
Author

jdecode commented Jun 10, 2020

Notice that the line ends with "Watching for changes..." and the command prompt is not available for other commands (you can't type any command in the CLI)
What this means is that whenever we will change the Vue source code, the compilation will happen "live" and the compiled files in webroot/vue folder will be updated.

@jdecode
Copy link
Author

jdecode commented Jun 10, 2020

There are other ways of handling mono-repo and, obviously, very different ways of handling separate front-end repo (for Vue).

The "thing" (I wouldn't say it is a "good" or "bad" thing - just a thing) is that with the setup like this the compiled files will always be part of the commit - whenever there would be a change in Vue source code, the compiled files will change and will become part of the commit.

The way I keep the back-end/front-end commits separate is that when I know I am doing something for the API or at CakePHP level, I commit after making the changes (not necessarily push - unless required, of course), and when I am doing changes in the front-end code (Vue source code), after the changes are done I commit the webroot/vue folder (and the included files) - again, not necessarily push.

push is done when the version working on localhost works like it is supposed to work - this ensures that the code stays separate for FE/BE at least at a per-commit level. 1 commit should have either BE code or FE code, but not both, and it is "OK" (and in fact it makes more sense) that the commits that are related (even if the commits belong to BE and FE separately) should be pushed at the same time.

@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

This is rather pretty detailed page (official Vue documentation as of today - June 2020) explaining a lot of stuff about deployments:
https://cli.vuejs.org/guide/deployment.html

@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

And before moving ahead, everything so far is pushed to GitHub
Screenshot from 2020-06-11 19-26-05

@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

And trying to run composer run test shows incorrect file permissions.
Changed tmp and logs folder permissions to writable (I know 0777 is too much - so don't do this)

Required sudo

Screenshot from 2020-06-11 19-35-57

@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

Now composer run test runs default test cases in CakePHP

Screenshot from 2020-06-11 19-36-54

@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

No "visible" Vue yet!
Just a few things to setup in CakePHP before Vue shows up!

CakePHP routes file : config/routes.php

By default CakePHP routes the home page / to PagesController and the method name is display.
To keep the default stuff working as it is, we route the home page / to PagesController and use the method vue.

Screenshot from 2020-06-12 00-49-07

In PagesController [ location : src/Controller/] create a new method by the name vue (or just about anything... change the route name above as well) and just set it to use a non-default layout file. The name used in the current setup is vue-layout, but it could be anything.

The only content that is required in the vue method is $this->viewBuilder()->setLayout('vue-layout'); - this sets the layout name (location : templates/layout/vue-layout.php

Screenshot from 2020-06-12 00-49-20

In CakePHP, the "view" file (the "V" in MVC) is located at templates/{controller-name}/{method-name}.php.
In this setup, the "view" file of "vue" method is to be created at templates/Pages/vue.php

Screenshot from 2020-06-12 00-53-20
(This is the only content in the "view" file).

The layout file templates/layout/vue-layout.php is a regular HTML template file with a couple of CakePHP specific PHP lines.
Screenshot from 2020-06-12 00-54-47

The PHP code is following:
<?= $this->Flash->render() ?>
<?= $this->fetch('content') ?>

The first line is to show session flash messages like "The login is successful" or "The product has been archived" etc.
The second line is the "view" loader. This fetches the data from corresponding "view" and places it here and renders the final HTML.

@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

The final version of the home page now looks like this(normal and dark-mode screenshots included) - remember that this is all in preparation to include Vue.js files and the actual code (that is the next step)

Screenshot from 2020-06-12 01-12-33

Screenshot from 2020-06-12 00-54-05

@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

Git add > commit > push
.gitignore is also updated with an additional file name .php_cs.cache - created by PhpStorm

Screenshot from 2020-06-12 01-50-37

@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

Wow... still no Vue?
Damn... that is exhausting...

@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

The layout file templates/layout/vue-layout.php is modified at 2 places:

  1. At the very top CakePHP's Router class is included
    <?php
    use Cake\Routing\Router;
    
    ?>
    
  2. Right before the body tag is closed, 2 script tags are introduced loading the app.js and chunk-vendors.js files from the compiled files created somewhere above (probably still compiling in the background) when the command npm run watch was executed.
    <script type="text/javascript" defer src="<?= Router::url('/') ?>webroot/vue/js/chunk-vendors.js"></script>
    <script type="text/javascript" defer src="<?= Router::url('/') ?>webroot/vue/js/app.js"></script>
    

Light/Normal mode home page now looks like this (ignore the missing logo, the file path is the issue, this layout will be updated, and the logo would be moved to somewhere else):
Screenshot from 2020-06-12 02-00-45

Removed the text from the "view" file templates/Pages/vue.php

Screenshot from 2020-06-12 02-03-39

Now the page looks more clean (the bottom-right logo is of CakePHP debugKit - for debugging in development environments, ignore that as well):

Screenshot from 2020-06-12 02-04-53

@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

Git add > commit > push
Working CakePHP and Vue setup (mono-repo)...

Next would be actual "DAPIER" being developed, and deployed... stay tuned... or not... It's almost 2 AM - the NIGHT

@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

To make things easier while designing the UI (HTML/CSS) I use TailwindCSS framework, so I am adding some instructions to set that up as well. If you do not use it - then please explain "WHY THE HELL NOT?"
npm install tailwindcss or npm i tailwindcss

Screenshot from 2020-06-12 02-18-49

Screenshot from 2020-06-12 02-19-22

A new npm script is added called tailwind and the script is tailwind build src/tailwind.css -o webroot/css/style-tw.css
What this command is doing/saying is
"Hey tailwind,
build from the source file at src/tailwind.css
and generate output (-o) css file
at webroot/css/style-tw.css"

The source file at src/tailwind.css contains following code (copied directly from tailwind's official documentation):

@tailwind base;
@tailwind components;
@tailwind utilities;

The package.json file now looks like this:
Screenshot from 2020-06-12 02-22-52

@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

Git add > commit > push
This will not have any screenshots unless something particular interesting or problematic happens
If someone faces any issue, please ask question here in the comments or add an issue at the repo

@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

Run npm run tailwind and this will generate the output file at webroot/css/style-tw.css
Include this CSS file in the templates/layout/vue-layout.php file in the head section.

Screenshot from 2020-06-12 02-35-08

git status shows 2 files - vue-layout because it now has the CSS file, and the CSS file itself (untracked). Do git add > commit > push cycle.

Screenshot from 2020-06-12 02-35-35

@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

The final homepage's structure looks slightly different because tailwind's CSS is now loaded as well
Screenshot from 2020-06-12 02-37-48

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment