{"id":21699965,"url":"https://github.com/tbhatti/my-app","last_synced_at":"2026-04-13T03:03:59.488Z","repository":{"id":39177521,"uuid":"252064686","full_name":"tbhatti/my-app","owner":"tbhatti","description":"React app with web-pack, less css","archived":false,"fork":false,"pushed_at":"2023-01-05T18:13:36.000Z","size":11571,"stargazers_count":1,"open_issues_count":24,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-26T16:07:40.741Z","etag":null,"topics":["babel","less","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tbhatti.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-01T03:42:50.000Z","updated_at":"2020-08-06T01:41:30.000Z","dependencies_parsed_at":"2023-02-04T09:45:25.044Z","dependency_job_id":null,"html_url":"https://github.com/tbhatti/my-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tbhatti/my-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tbhatti%2Fmy-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tbhatti%2Fmy-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tbhatti%2Fmy-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tbhatti%2Fmy-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tbhatti","download_url":"https://codeload.github.com/tbhatti/my-app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tbhatti%2Fmy-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31737850,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-12T22:19:12.206Z","status":"online","status_checked_at":"2026-04-13T02:00:06.623Z","response_time":93,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","less","webpack"],"created_at":"2024-11-25T20:12:17.730Z","updated_at":"2026-04-13T03:03:59.460Z","avatar_url":"https://github.com/tbhatti.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ReactApp\n\nThis project is created without using create-react-app\n\n## Steps to create my-app from terminal\n```bash\n mkdir my-app\n cd my-app\n npm init -y\n npm install react react-dom\n mkdir app\n create index.js index.css inside app directory\n ```\n## Copy following code into my-app\\app\\index.js\n```python\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\n\nclass App extends React.Component{\n    render(){\n        return(\n            \u003cdiv\u003eHello World\u003c/div\u003e\n        )\n    }\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('app'))\n```\nSo when you try to run this code in the browser it will give an error as the our code is written in JSX and browser does not understand it.\n\nSo this is the point where Babel and Webpack comes into play.\nTo install all required dependency for these two run following command from your terminal.\n```bash\nnpm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin\n```\n### Webpack configurations\n\nCreate webpack.config.js at root folder and paste following code into it\n\n```python\nvar path = require('path');\nvar HtmlWebpackPlugin =  require('html-webpack-plugin');\n\nmodule.exports = {\n    entry : './app/index.js',\n    output : {\n        path : path.resolve(__dirname , 'dist'),\n        filename: 'index_bundle.js'\n    },\n    module : {\n        rules : [\n            {test : /\\.(js)$/, use:'babel-loader'},\n            {test : /\\.css$/, use:['style-loader', 'css-loader']}\n        ]\n    },\n    mode:'development',\n    plugins : [\n        new HtmlWebpackPlugin ({\n            template : 'app/index.html'\n        })\n    ]\n\n}\n```\n### In conjuction with out babel-loader works we have to add babel preset config to our package.json file\n\n```python\n\"main\": \"index.js\",\n\"babel\":{\n    \"presets\" : [\n      \"@babel/preset-env\",\n      \"@babel/preset-react\"\n    ]\n  }\n  \n  ```\n  \n  ### To run the build we have to add webpack to our script tag in our package.json\n  \n  ```python\n  \"main\": \"index.js\",\n  \"babel\":{\n    \"presets\" : [\n      \"@babel/preset-env\",\n      \"@babel/preset-react\"\n    ]\n  },\n  \"scripts\": {\n    \"create\": \"webpack\"\n  },\n  ```\nSo when i run npm run create from terminal it will run the webpack which will create the dist folder and our bundle file with index.html file.\n\nIt's hassle to run webpack every time. So you can start a webpack dev server. so it will start build your code as soon as you run it. modify your script in package.json with following.\n\n```python\n\n\"scripts\": {\n    \"start\": \"webpack-dev-server --open\"\n  }\n  ```\n  Now when you run npm run start it will start the dev server and open your app in the browser.\n\n  # Use Less in the project\n  You need to do following changes to use less instead of simple CSS\n  ```python\n  npm i less-loader\n  ```\n  ## Update webpack.config.js as follow\n\n  ```python\n  {test : /\\.less$/, \n                use: [\n                    { loader: 'style-loader' },\n                    { loader: 'css-loader' },\n                    { loader: 'less-loader' }\n                ]\n            }\n\n```\n\n## Add styles.less inside app folder \n\nAdd path for styles.less in index.js as follow\n\nimport './styles.less';\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftbhatti%2Fmy-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftbhatti%2Fmy-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftbhatti%2Fmy-app/lists"}