A template repository to quickly start a new project with a VueJS frontend and PHP CodeIgniter backend. This is especially useful in hackathons or personal projects, since you can get down and immediately start programming your idea.
VueJS is installed via vue-cli with default configuration plus vuex and vue-router. Below is the list of newly installed packages:
- Vuex
- vue-router
- vue-toast-notifications
- axios
- qs
qs is used to securely stringify an object before sending it through a POST request using axios
.
Example usage:
const headers = {
'Content-Type': 'application/x-www-form-urlencoded'
}
const data = {
username: 'alkibiadez',
password: 'goCorona'
}
axios({
method: 'post',
url: 'localhost:80/myapp/post',
data: qs.stringify(data),
headers: headers
})
CodeIgniter v3 is installed in the api/
directory. CodeIgniter is an open-source software rapid development web framework, for use in building dynamic web sites with PHP. It has a really small footprint, so it keeps your project lightweight. It is also reallyeasy to get started with.
As of now, CodeIgniter v4 is realeased too. But I found v3 to be simpler and easier than v4, which is fresh out of Beta.
Note: Since you would be sending cross-domain requests, you need to look at allowing cross origin requests in the API to avoid CORS errors. Look at the below section to know how you can solve this.
To know more about CORS, visit https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
This error pops up only when you are using different domains in develpment. Even hosting on different ports like localhost:3000
and localhost:80
count.
To solve CORS errors, just set the required headers wherever you have an action method (function) inside a controller in PHP:
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Authorization");
Be careful. You might want to restrict access to only your own domain when deploying for production (Change *
to the domain name). For development on your local machine though, this is fine.
If you're programming on your local machine, you would need to have two servers running. One for VueJS at localhost:3000
and one for PHP at localhost:80
.
But XAMPP stores files and folders only from its xampp/htdocs
directory. In order to serve your PHP from thee api/
directory of this template, you can look up the Make an alias section on this link: https://stackoverflow.com/a/1421/11743498
I welcome everyone to make contributions to this template. Contributions can be anything, like:
- Adding a new package which you think is essential
- Fixing a problem
- Fixing a problem concerning the version of a package. Or if a package is outdated, adding another similar to it.
- New code to better organize the workflow
- Everything else
You can even suggest better practices for writing code if necessary!