Set Up a Laravel Backend and Next.js Frontend Development Environment with Docker within 5 minutes

softjapan — Sat, 04 Jan 2025 15:35:19 +0000

Set Up a Laravel Backend and Next.js Frontend Development Environment with Docker within 5 minutes

This guide walks you through creating a Laravel backend and a Next.js frontend, all within a Dockerized environment. You can have everything up and running in just a few minutes.

Prerequisites

Docker and Docker Compose installed on your system
Basic knowledge of Laravel and Next.js

- Basic knowledge of command-line usage

1. Clone the Repository

git clone https://github.com/softjapan/laravel-nextjs-dev-environment.git

2. Create the Laravel Backend

By default, this setup uses MySQL. We will skip running migrations at this point and do them later. Other options use default settings.

cd laravel-nextjs-dev-environment
docker run --rm -it -v "$PWD:/app" softjpn/laravel-nodejs-dev laravel new laravel-backend

3. Install Laravel Breeze and Dependencies

We will install Laravel Breeze (API scaffolding) without running migrations at this stage. Migrations will be run later after configuring the .env file and starting the Docker containers.

cd laravel-backend
docker run --rm -it -v "$PWD:/app" softjpn/laravel-nodejs-dev composer require laravel/breeze --dev
docker run --rm -it -v "$PWD:/app" softjpn/laravel-nodejs-dev php artisan breeze:install api

4. Create the Next.js Frontend

cd ..
docker run --rm -it -v "$PWD:/app" softjpn/laravel-nodejs-dev git clone https://github.com/laravel/breeze-next.git next-frontend

5. Install Frontend Dependencies

cd next-frontend
docker run --rm -it -v "$PWD:/app" softjpn/laravel-nodejs-dev npm install

6. Create the Environment Files

These files contain database connection details and other environment variables.

cd ..
cp ./envfiles/laravel-backend/.env ./laravel-backend/.env
cp ./envfiles/next-frontend/.env ./next-frontend/.env

7. Start the Docker Containers

docker compose up -d

8. Run Database Migrations

Once the containers are running and your .env files are in place, apply the migrations:

docker exec -it laravel-backend php artisan migrate

9. Access the Frontend

Open your browser and navigate to:

http://localhost:3000

10. Stop the Docker Containers

When you’re done, shut down the containers:

docker compose down

Screenshot

License

This project is open source and available under the MIT License.

Contributing

Contributions are welcome! Feel free to open a pull request with improvements or suggestions.

Contact

For questions or additional support, please open an issue in this repository.

Enjoy your streamlined Laravel + Next.js development setup!

ChatGPT Client with LINE-Style UI Built with Flutter and Riverpod

softjapan — Wed, 01 Jan 2025 03:00:28 +0000

ChatGPT Client with LINE-Style UI Built with Flutter and Riverpod

This is a ChatGPT client application developed with Flutter and Riverpod, featuring a LINE-inspired chat UI.

It provides real-time, bidirectional communication by integrating with OpenAI’s GPT models.

Features

LINE-Style Chat UI A simple, intuitive design that offers a streamlined user experience
Real-Time Chat with OpenAI GPT Model Utilizes the ChatGPT API to enable natural, human-like conversations
State Management with Riverpod Improves scalability and maintainability by separating application logic from the UI
Responsive Design Adapts seamlessly to various screen sizes, from smartphones to larger devices

Screenshots

Requirements

Flutter 3.19.x or higher
Dart 3.3.x or higher
OpenAI API Key

Setup

Clone the repository

   git clone https://github.com/softjapan/flutter_chatgpt.git

Install dependencies

   flutter pub get

Configure environment variables Create a .env file in the project’s root directory and add the following:

   endpoint='https://api.openai.com/v1/'
   model='gpt-4-turbo-preview'
   aiToken='your-api-key-here'

Run the application

   flutter run

Technologies Used

License

This project is released under the MIT License. Please see the LICENSE file for details.

How to Contribute

Fork this repository
Create a new feature branch

   git checkout -b feature/amazing-feature

Commit your changes

   git commit -m 'Add some amazing feature'

Push the branch to the remote repository

   git push origin feature/amazing-feature

Create a Pull Request

Author

Twitter: FullStack@ITエンジニア

GitHub Repository: https://github.com/softjapan/flutter_chatgpt

DEV Community: softjapan

Set Up a Laravel Backend and Next.js Frontend Development Environment with Docker within 5 minutes

Set Up a Laravel Backend and Next.js Frontend Development Environment with Docker within 5 minutes

Prerequisites

- Basic knowledge of command-line usage

1. Clone the Repository

2. Create the Laravel Backend

3. Install Laravel Breeze and Dependencies

4. Create the Next.js Frontend

5. Install Frontend Dependencies

6. Create the Environment Files

7. Start the Docker Containers

8. Run Database Migrations

9. Access the Frontend

10. Stop the Docker Containers

Screenshot

License

Contributing

Contact

ChatGPT Client with LINE-Style UI Built with Flutter and Riverpod

ChatGPT Client with LINE-Style UI Built with Flutter and Riverpod

Features

Screenshots

Requirements

Setup

Technologies Used

License

How to Contribute

Author