diff --git a/containers/javascript-react/.devcontainer/Dockerfile b/containers/javascript-react/.devcontainer/Dockerfile new file mode 100644 index 0000000000..f84ac7bc30 --- /dev/null +++ b/containers/javascript-react/.devcontainer/Dockerfile @@ -0,0 +1,26 @@ +#------------------------------------------------------------------------------------------------------------- +# Copyright (c) Microsoft Corporation. All rights reserved. +# Licensed under the MIT License. See https://go.microsoft.com/fwlink/?linkid=2090316 for license information. +#------------------------------------------------------------------------------------------------------------- + +FROM node:10 + +# Configure apt +ENV DEBIAN_FRONTEND=noninteractive +RUN apt-get update \ + && apt-get -y install --no-install-recommends apt-utils 2>&1 + +# Verify git and needed tools are installed +RUN apt-get install -y git procps + +# Install Reat +RUN npm install -g -y create-react-app + +# Clean up +RUN apt-get autoremove -y \ + && apt-get clean -y \ + && rm -rf /var/lib/apt/lists/* +ENV DEBIAN_FRONTEND=dialog + +# Set the default shell to bash instead of sh +ENV SHELL /bin/bash diff --git a/containers/javascript-react/.devcontainer/devcontainer.json b/containers/javascript-react/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..793c951ccf --- /dev/null +++ b/containers/javascript-react/.devcontainer/devcontainer.json @@ -0,0 +1,17 @@ +{ + "name": "Javascript React", + "dockerFile": "Dockerfile", + + + "appPort": [3000], + + // Uncomment the next line if you want to add in default container specific settings.json values + // "settings": { "workbench.colorTheme": "Quiet Light" }, + + "postCreateCommand": "create-react-app sample_project", + + "extensions": [ + "dsznajder.es7-react-js-snippets", + "msjsdiag.debugger-for-chrome" + ] +} \ No newline at end of file diff --git a/containers/javascript-react/.npmignore b/containers/javascript-react/.npmignore new file mode 100644 index 0000000000..1d72d293eb --- /dev/null +++ b/containers/javascript-react/.npmignore @@ -0,0 +1,4 @@ +README.md +test-project +.vscode +.npmignore diff --git a/containers/javascript-react/.vscode/launch.json b/containers/javascript-react/.vscode/launch.json new file mode 100644 index 0000000000..cbfc6ee854 --- /dev/null +++ b/containers/javascript-react/.vscode/launch.json @@ -0,0 +1,16 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "runtimeExecutable": null, + "url": "http://localhost:3000", + "webRoot": "${workspaceFolder}/sample_project/src" + } + ] +} \ No newline at end of file diff --git a/containers/javascript-react/README.md b/containers/javascript-react/README.md new file mode 100644 index 0000000000..ea53cc2320 --- /dev/null +++ b/containers/javascript-react/README.md @@ -0,0 +1,54 @@ +# React and Javascript + +## Summary + +*Create react web applications on Linux* + +| Metadata | Value | +|----------|-------| +| *Contributors* | [Mehant](mailto:kmehant@gmail.com) | +| *Definition type* | Dockerfile | +| *Languages, platforms* | React, JavaScript | + +## Using this definition with an existing folder + +This definition does not require any special steps to use. Just follow these steps: + +1. If this is your first time using a development container, please follow the [getting started steps](https://aka.ms/vscode-remote/containers/getting-started) to set up your machine. + +2. To use VS Code's copy of this definition: + 1. Start VS Code and open your project folder. + 2. Press F1 select and **Remote-Containers: Create Container Configuration File...** from the command palette. + 3. Select the Javascript React definition. + +3. To use latest-and-greatest copy of this definition from the repository: + 1. Clone this repository. + 2. Copy the contents of `containers/javascript-react/.devcontainer` to the root of your project folder. + 3. Start VS Code and open your project folder. + +4. After following step 2 or 3, the contents of the `.devcontainer` folder in your project can be adapted to meet your needs. + +5. Finally, press F1 and run **Remote-Containers: Reopen Folder in Container** to start using the definition. + +## Testing the definition + +This definition includes a sample react app project that will help you verify it is working as expected on your system. Follow these steps: + +1. If this is your first time using a development container, please follow the [getting started steps](https://aka.ms/vscode-remote/containers/getting-started) to set up your machine. +2. Clone this repository. +3. Start VS Code, press F1, and select **Remote-Containers: Open Folder in Container...** +4. Select the `containers/javascript-react` folder. +5. After the folder has opened in the container, run the command `cd sample-project && npm start` this starts the development server. +6. Once the react app is running, press F1 and select **Remote-Containers: Forward Port from Container...** +7. Select port 3000 and click the "Open Browser" button in the notification that appears. +8. You should see spinning react symbol after the page loads. +9. For debugging, ensure that your development server is running and then press F5 or the green arrow to launch the debugger and open a new browser instance. +10. It's better to assign `runtimeExecutable` in `launch.json` with worskspace absolute path to chrome executable. +11. From here, you can add breakpoints or edit the contents of the `sample-project` folder to do further testing. You can use this as reference [Debugging React App](https://code.visualstudio.com/docs/nodejs/reactjs-tutorial#_debugging-react) + + +## License + +Copyright (c) Microsoft Corporation. All rights reserved. + +Licensed under the MIT License. See [LICENSE](https://github.com/Microsoft/vscode-dev-containers/blob/master/LICENSE). \ No newline at end of file