Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix devcontainer, update docs #3014

Merged
merged 3 commits into from
Dec 31, 2024
Merged

Fix devcontainer, update docs #3014

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2d0eff4
fix devcontainer image
Grotax Dec 31, 2024
9960673
update documentation
Grotax Dec 31, 2024
dc23940
adjust documentation
Grotax Dec 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions .devcontainer/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# Dev Containers

Check failure on line 1 in .devcontainer/README.md

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[Vale.Spelling] Did you really mean 'Dev'?

Raw Output:
{"message": "[Vale.Spelling] Did you really mean 'Dev'?", "location": {"path": ".devcontainer/README.md", "range": {"start": {"line": 1, "column": 3}}}, "severity": "ERROR"}

## Image Used in This Project

This project uses a Nextcloud Docker image for the development container. The image is defined in the `.devcontainer.json` configuration file. For more details about the image and its configuration, you can refer to the [GitHub repository](https://github.com/juliusknorr/nextcloud-dev).

Check failure on line 5 in .devcontainer/README.md

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[Vale.Spelling] Did you really mean 'Nextcloud'?

Raw Output:
{"message": "[Vale.Spelling] Did you really mean 'Nextcloud'?", "location": {"path": ".devcontainer/README.md", "range": {"start": {"line": 5, "column": 21}}}, "severity": "ERROR"}

# VS Code

## Introduction to Dev Containers

Check failure on line 9 in .devcontainer/README.md

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[Vale.Spelling] Did you really mean 'Dev'?

Raw Output:
{"message": "[Vale.Spelling] Did you really mean 'Dev'?", "location": {"path": ".devcontainer/README.md", "range": {"start": {"line": 9, "column": 20}}}, "severity": "ERROR"}

Dev Containers are a feature in Visual Studio Code that allows you to develop inside a containerized environment. This ensures that your development environment is consistent across different machines and setups. By using Dev Containers, you can easily share your development environment with your team, ensuring that everyone is working with the same dependencies and configurations.

Check failure on line 11 in .devcontainer/README.md

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[Vale.Spelling] Did you really mean 'Dev'?

Raw Output:
{"message": "[Vale.Spelling] Did you really mean 'Dev'?", "location": {"path": ".devcontainer/README.md", "range": {"start": {"line": 11, "column": 1}}}, "severity": "ERROR"}

Check failure on line 11 in .devcontainer/README.md

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[Vale.Spelling] Did you really mean 'Dev'?

Raw Output:
{"message": "[Vale.Spelling] Did you really mean 'Dev'?", "location": {"path": ".devcontainer/README.md", "range": {"start": {"line": 11, "column": 223}}}, "severity": "ERROR"}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Dev Containers are a feature in Visual Studio Code that allows you to develop inside a containerized environment. This ensures that your development environment is consistent across different machines and setups. By using Dev Containers, you can easily share your development environment with your team, ensuring that everyone is working with the same dependencies and configurations.
Dev Containers are a feature in some IDEs that allows you to develop inside a containerized environment. This ensures that your development environment is consistent across different machines and setups. By using Dev Containers, you can easily share your development environment with your team, ensuring that everyone is working with the same dependencies and configurations.


## How to Use Dev Containers with VS Code

Check failure on line 13 in .devcontainer/README.md

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[Vale.Spelling] Did you really mean 'Dev'?

Raw Output:
{"message": "[Vale.Spelling] Did you really mean 'Dev'?", "location": {"path": ".devcontainer/README.md", "range": {"start": {"line": 13, "column": 15}}}, "severity": "ERROR"}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should leave this to the upstream documentation. The F1 for example is not my button to open the command palette.


1. **Install Docker**: Make sure you have Docker installed on your machine. You can download it from [Docker's official website](https://www.docker.com/products/docker-desktop).

Check failure on line 15 in .devcontainer/README.md

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[Vale.Spelling] Did you really mean 'Docker's'?

Raw Output:
{"message": "[Vale.Spelling] Did you really mean 'Docker's'?", "location": {"path": ".devcontainer/README.md", "range": {"start": {"line": 15, "column": 103}}}, "severity": "ERROR"}

2. **Install VS Code**: If you haven't already, download and install Visual Studio Code from [here](https://code.visualstudio.com/).

3. **Install the Remote - Containers Extension**: Open VS Code and go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window. Search for "Remote - Containers" and install it.

4. **Open a Folder in a Container**:
- Open your project folder in VS Code.
- Press `F1` to open the Command Palette, then type `Remote-Containers: Open Folder in Container...` and select it.
- VS Code will build the container and open your project inside it.


For further information on how to configure and use Dev Containers, please visit the [official documentation](https://code.visualstudio.com/docs/remote/containers).

Check failure on line 27 in .devcontainer/README.md

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[Vale.Spelling] Did you really mean 'Dev'?

Raw Output:
{"message": "[Vale.Spelling] Did you really mean 'Dev'?", "location": {"path": ".devcontainer/README.md", "range": {"start": {"line": 27, "column": 53}}}, "severity": "ERROR"}
3 changes: 2 additions & 1 deletion .devcontainer/devcontainer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{
"image": "ghcr.io/juliushaertl/nextcloud-dev-php82:latest",
"image": "ghcr.io/juliusknorr/nextcloud-dev-php82:latest",
"forwardPorts": [80],
"containerEnv": {
"NEXTCLOUD_VERSION": "30",
"NEXTCLOUD_AUTOINSTALL_APPS": "news",
"XDEBUG_MODE": "debug"
},
Expand Down
27 changes: 18 additions & 9 deletions docs/developer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,24 +25,33 @@

The application Front End uses Vue 2.7 and the Nextcloud Libraries [Vue Components](https://github.com/nextcloud-libraries/nextcloud-vue) for building the Application running inside your Nextcloud instance. For linting these files, we are using eslint, see the [config file](https://github.com/nextcloud/news/blob/master/.eslintrc.js). We also have Unit Tests for the components that run with Jest, please ensure these pass when adding new features/fixing bugs.

## General Developer setup
## Developer setup
TL;DR:

Check the Nextcloud [documentation](https://docs.nextcloud.com/server/latest/developer_manual/getting_started/devenv.html) to learn how to setup a developer environment, alternatively to a proper web server you can also use the [builtin php server](https://www.php.net/manual/en/features.commandline.webserver.php) on demand, it is enough for development purposes.
- Clone [nextcloud server repository](https://github.com/nextcloud/server)

Check failure on line 31 in docs/developer.md

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[Vale.Spelling] Did you really mean 'nextcloud'?

Raw Output:
{"message": "[Vale.Spelling] Did you really mean 'nextcloud'?", "location": {"path": "docs/developer.md", "range": {"start": {"line": 31, "column": 10}}}, "severity": "ERROR"}
- run `git submodule update --init`
- Install the server `php ./occ maintenance:install`
- Clone the viewer repo if you want to be able to upgrade the setup
- `cd apps && git clone https://github.com/nextcloud/viewer.git`
- Inside apps dir clone the news app: `git clone https://github.com/nextcloud/news.git`

When your setup is running, clone the news repository in the `apps/` directory inside the server.
For more information check the Nextcloud [documentation](https://docs.nextcloud.com/server/latest/developer_manual/getting_started/devenv.html), the setup of a webserver is not strictly needed for backend development.

Change into the news directory and run `make` to build the app, you will need php, composer, node, npm and maybe more.

Now you can basically use the news app and test any changes you make on your local development environment. Check out the `appinfo/routes.php` file and `lib/controller/` directory for details on API controllers. Or check out `package.json` for npm scripts and the `src/` directory for the front end Vue Application.

## Alternative Developer setup
With [PR 2670](https://github.com/nextcloud/news/pull/2670) new options to create a development environment were added.
### Docker
We also have a docker based environment check the README in the `docker/` directory.

See the README in the docker directory.
This setup is nice since you get a full nextcloud installation and you can open the interface in the browser, which allows you to easily test your changes.

There is also a nix-shell config and zellij layout prepared.
There is also a nix-shell config and zellij layout prepared if you are interested in that.

If you have issues with the setup create a [new discussion](https://github.com/nextcloud/news/discussions).
### Devcontainer
Check the README in the .devcontainer directory.

If you have issues with setting up a developer environment create a [new discussion](https://github.com/nextcloud/news/discussions/categories/developer).

### Frontend Tips/Organization

Expand All @@ -53,7 +62,7 @@

## Testing

Please make sure to run all tests before submitting any pull requests.
When submitting your PR the tests will be run automatically, try to fix any errors.

### Frontend Unit Tests

Expand Down
Loading