BUILT WITH
Welcome here!
The api is proudly served by https://render.com/ (from a docker service + a postgres database)
This is another awesome blogging web application running on top of laravel and vue!
We adopted to completely separate backend and frontend in order to explore the the power and extensibility of both frameworks (note that we could have compiled the vue components in blade templates but that's not my favorite way to do it :haha )
Here's why separating things is the right idea:
- The same exposed API endpoint can serve multiple purposes i.e. mobile app, web app and any other API consumer
- We fully explore the power of Vue SPA with all the benefits of SPAs
- The frontend can be deployed anywhere as a static site
- Single Page applications are fast!
- Website Responsivess
- User authorization and authentication
- Blog creation, edition and deletion
- Cross platform access
In order to run this project on your local environment ensure you have the following tool installed:
- PHP (At least PHP 7.3) and make sure you can access it globaly in your terminal https://kinsta.com/blog/install-php/
- Composer for PHP package management https://getcomposer.org/
- A SQL database Management system (We have prefered MySQL) https://www.mysql.com/fr/downloads/
- NPM & Node JS https://nodejs.org/en/
- Vue-CLi (optional) https://cli.vuejs.org/guide/
- Git bash https://git-scm.com/downloads
Before you continue make sure you can run the following
php --version
node --version
npm --version
composer --version
mysql --version
git --version
In case one this command rise an error, please address the issue before continue
First you have to clone the project in a given folder on your local machine by
git clone https://github.com/ElvisAns/LaraBlog.git
Then navigate inside the folder and run (Make sure you are having composer 2.x) to avoid error on runing composer install
composer install
cd frontend
npm install
The root folder contain our main backend application (laravel) while inside the frontend folder we have our vue application
In both root and frontend you will found a file .env.example, rename them as .env and start using them as template.
While the frontend .env file can be left as is, the laravel .env file(from the root folder) need to be adjusted to your local setup.
Open it and make sure the database credentials are correctl .
we assume you have already created an empty database so you can use it inside the .env config at root(laravel env).if no, check on this blog
Next
Being in the root folder run the following command:
php artisan migrate
This command will first check if the app can access the database you have configured and if so, it will create necessary tables for us!
Cool, Dont you see? hahhaa
Next if, migration successed you can seed your database with mock datas as many time as you want by running
php artisan db:seed
Now our app backend is ready, you can start the server by running
php artisan serve
Excited to get started? Please continue reading! To now serve our frontend, make sure the php artisan serve is keeping running! If you are using VS Code you can easily open two terminal windows.
Now open a new terminal and move inside the frontend folder and run the following command
npm run serve
Bingo!!!
If you did not change any configuration about urls you can access the website at http://localhost:8080/
Enjoy!
Remember that anytime you need to add new mock datas inside the database, you can always run php artisan db:seed and the terminal will show the user account created so you can easily login without having to signup directly from the website.
Play around with this MVP website with simple yet powerfull blog feature!
To run tests against our backend api, run the following command at root (Our tests has been defined as feature so we need --testsuite=Feature)
php artisan test --testsuite=Feature
Attention : Running test will wipe all the datas inside the database, so make sure you seed the database after perfoming tests!
There are still some functionalities that we are planning to implement soon:
- Comments features
- User access capacity (admin,publisher, reviewer etc..)
- A nice text editor plugin
- Enhance profile component and make it look like a dashboard
And many more that i didn't spot, right?
if you answered YES!
come and join me building amazing blog website :-)
Feel free to fork the repo, report any bug, propose a feature so we make it better!
Email me at ansimapersic@gmail.com
© 2022 - ElvisAnsima