feat(devcontainer): enable dev environments in GH Codespaces and VS Code remote containers

[andrewbrey]

This project is marked as open to contribution for Hacktoberfest, and as such I figured it would be desirable for contributors to have a simplified means of getting up and running with the developer setup. With the addition of the devcontainer configuration, this project is now compatible with GitHub Codespaces as well as VS Code Remote Containers. Contributors who use one of these options now get all of the dev setup steps completed for them, and you get peace of mind that contributions will come from setups with the correct usage of eslint, prettier, etc.

EDIT:

Demo

https://vimeo.com/757666222

[MrRobz]

I didn't know electron apps could be run in code-spaces.
Could you add a video demo in the PR on how this works?

[andrewbrey]

@MrRobz yes, it's incredibly cool - I have already recorded a video, but it's 25Mb and apparently GH will only let you attach videos of up to 10Mb - I'm in the process of re-encoding it so it's only 10Mb 😓 (i'll attach once that's done).

[andrewbrey]

@MrRobz I've attached a link to vimeo (https://vimeo.com/757666222) which is a long demonstration of how this works - the video is being transcoded still, but should be watchable in a few minutes 👍

[MrRobz]

@MrRobz I've attached a link to vimeo (https://vimeo.com/757666222) which is a long demonstration of how this works - the video is being transcoded still, but should be watchable in a few minutes 👍

That was pretty amazing. One small suggestion. If there were some sample svg icons is a folder already present in the code-space it would make developing and testing the app lot more easier.

I'm thinking if we could have these icons in these links downloaded and present in a folder when opening the code space.
maybe a git clone of these repos perhaps
https://github.com/tailwindlabs/heroicons/tree/master/src/20/solid
https://github.com/Remix-Design/RemixIcon/tree/master/icons

[andrewbrey]

@MrRobz I just looked into this, and I think it's probably a little out of scope for the purpose of this PR due to the fact that collection names are stored in IndexDB so there's no way for me to, during the container build, establish a new icon collection and add files to it.

I think you could modify the application code to do an initial scan of the icon-library directory and automatically create some collections based on any directories present there, and that would be the way you support pre-seeding the application state with some libraries.

Basically, I think it would be super helpful if the application could be defaulted to have some collections, but I think that's probably a bit further than this PR is meant to go. If you were able to merge this PR in, perhaps it could be a good first issue item for someone else in Hacktoberfest to make the required application code changes to support seeding the collection database and then dropping some svgs into the file system at container launch 👍

[MrRobz]

@MrRobz I just looked into this, and I think it's probably a little out of scope for the purpose of this PR due to the fact that collection names are stored in IndexDB so there's no way for me to, during the container build, establish a new icon collection and add files to it.

I think you could modify the application code to do an initial scan of the icon-library directory and automatically create some collections based on any directories present there, and that would be the way you support pre-seeding the application state with some libraries.

Basically, I think it would be super helpful if the application could be defaulted to have some collections, but I think that's probably a bit further than this PR is meant to go. If you were able to merge this PR in, perhaps it could be a good first issue item for someone else in Hacktoberfest to make the required application code changes to support seeding the collection database and then dropping some svgs into the file system at container launch 👍

I understand. Lets do something simple. Clone 2 other repos with icons in it to a folder in say home or desktop in the code-space machine.
I tried adding these steps to the dockerfile but these folders aren't showing.

Could you help with this pls.

RUN cd /home && git clone https://github.com/Remix-Design/RemixIcon.git
RUN cd /home && git clone https://github.com/tailwindlabs/heroicons.git

[andrewbrey]

@MrRobz Sounds like a great way to get most of the way there! I believe your changes should actually be fine, but you've cloned to the /home directory, and not /home/node, which is where your file explorer is open to - I think you should probably be cloning to /home/node.

Also, I believe the -C flag to git clone will let you skip having to cd into the clone directory 👍

[MrRobz]

@MrRobz Sounds like a great way to get most of the way there! I believe your changes should actually be fine, but you've cloned to the /home directory, and not /home/node, which is where your file explorer is open to - I think you should probably be cloning to /home/node.

Also, I believe the -C flag to git clone will let you skip having to cd into the clone directory 👍

That made it work. Thank you