Giter Club home page Giter Club logo

webpack-testing's Introduction

Webpack Testing

Build Status Dependencies CodeFactor Coverage Status Tests

Webpack Testing is a repository created with the intention of using webpack to compile JS modules. This project create dist folder during build and deploy its content to gh-pages using Travis CI

Table of contents

  1. Set up
  2. Test
  3. Tasks
  4. Useful websites
  5. VS Code Plugins Recommended
  6. LICENSE

Set up

Follow the following steps:

  1. git clone https://github.com/immnk/logo-generator-app.git
  2. cd webpack_testing && npm install
  3. For testing in dev npm start. To test prod NODE_ENV=production npm start
  4. Open dist/index.html in browser.

Test

  1. Open webpack_testing folder where the code is cloned.
  2. Open command prompt at the folder and run npm test

Tasks

All tasks and issues are listed as items in Tasks & issues in repository Issues tab

  • Write a README file.
  • Write JS modules and compile with webpack
  • Make dist folder with html and js files compiled
  • Create SCSS and compile them with webpack
  • Create API test method and set up
  • Add CI/CD pipelines
  • Make automatic deployments on release branch
  • Create unit test cases with Mocha(JS test framework) and Chai(assertion library)

VS Code Plugins Recommended

  • Beautify
  • Debugger for Chrome
  • ESLint
  • GitLens
  • IntelliSense for CSS class names
  • markdownlint
  • vscode-icons

Useful websites

  1. Mock data - https://www.mockaroo.com/
  2. Background generator - https://cssgradient.io/gradient-backgrounds/
  3. Markdown tricks - https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

License

MIT License

webpack-testing's People

Contributors

aradhanagate avatar dependabot-preview[bot] avatar immnk avatar renovate-bot avatar renovate[bot] avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

webpack-testing's Issues

Rename the project

Is your feature request related to a problem? Please describe.
Project doesn't have specific goal

Describe the solution you'd like
Have a clear thought of the features that you want to persist and work for.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

  • Update dependency chai to v5
  • Update dependency concurrently to v8
  • Update dependency copy-webpack-plugin to v12
  • Update dependency css-loader to v7
  • Update dependency eslint to v9
  • Update dependency html-loader to v5
  • Update dependency mini-css-extract-plugin to v2
  • Update dependency mocha to v10
  • Update dependency optimize-css-assets-webpack-plugin to v6
  • Update dependency sass-loader to v14
  • Update dependency webpack-cli to v5
  • ๐Ÿ” Create all rate-limited PRs at once ๐Ÿ”

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

npm
package.json
  • chai ^4.2.0
  • concurrently ^4.1.0
  • copy-webpack-plugin ^4.6.0
  • coveralls ^3.0.2
  • css-loader ^2.1.0
  • eslint ^5.12.0
  • file-loader ^3.0.1
  • html-loader ^0.5.5
  • html-webpack-plugin ^3.2.0
  • jsdom ^13.1.0
  • jsdom-global ^3.0.2
  • lite-server ^2.4.0
  • lodash ^4.17.15
  • mini-css-extract-plugin ^0.5.0
  • mocha ^6.0.0
  • node-sass ^4.11.0
  • nyc ^13.1.0
  • optimize-css-assets-webpack-plugin ^5.0.1
  • require-hooks 0.0.6
  • sass-loader ^7.1.0
  • terser-webpack-plugin ^1.2.2
  • url-loader ^1.1.2
  • webpack ^4.44.0
  • webpack-cli ^3.2.1
travis
.travis.yml

  • Check this box to trigger a request for Renovate to run again on this repository

Add code coverage to the project

Is your feature request related to a problem? Please describe.
Currently there is no code coverage tool installed on the project that gives a comprehensive report

Describe the solution you'd like
We can use automation tools like CodeCov which generates reports from our CI tool.

Describe alternatives you've considered
No alternatives at this moment

Additional context
Refer
https://github.com/codecov/example-node

Create new pages to make navigation between them

Is your feature request related to a problem? Please describe.
There is only one page currently and I cannot see navigating between pages.

Describe the solution you'd like
Create a new page and link the pages between them so that we can traverse between them.

Describe alternatives you've considered
An alternative would be to use SPA

Make the application more mobile friendly

Is your feature request related to a problem? Please describe.
Currently the application doesnt fit into mobile space. Sharing the app URL doesn't generate a preview.

Describe the solution you'd like
Add manifest.json file that loads different media

Describe alternatives you've considered
Add view tag that zooms in the context

Additional context
img_0118

Fetch data from actual APIs to create views

Is your feature request related to a problem? Please describe.
Currently there is no API method that is being called. It is all dummy data that is being fetched.

Describe the solution you'd like
Need real time data being pulled from an end point and populate that data on front-end. Use mockaroo

Additional context
This layout looks good:CodePen
image

minify CSS and JS files

Is your feature request related to a problem? Please describe.
As webpack-testing user, I need the production build to contain minified JS and CSS files so that files are less spacious and load faster.

Describe the solution you'd like
Using webpack plugins such as optimize-css-assets-webpack-plugin and terser-webpack-plugin for CSS and JS respectively.

Describe alternatives you've considered
N/A

Additional context
N/A

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.