Basic Front-end Dev. Environment Setup

In this post I will share with you a very basic development environment setup which is very useful if you just quickly want to evaluate some functionality. Same time this has a good foundation and can be extended once you are done with the initial testing.

Angular and React are now a days default choice for front-end development but for simple POC and validation purposes, we dont have to use those and this way we can avoid complexity.

The idea is to keep it very simple and reuse this approach for other POC projects as well. However, if you want to see more details about specific topics e.g. Git, then you can find some posts written by me on those topics. Ok, lets see steps involved in this setup.

Steps

• Create a git-repo for project. Add ReadMe and .gitignore files.
• Initialize npm >> npm init
• Install lite-server>>npm install –save-dev lite-server
• Add lite-server config file: bs-config.json and update npm-start script: lite-server.
• Install some initial dependences:
  • npm install  — save bootstrap
  • npm install — save jquery
  • npm install — save font-awesome
• Create index.html (see example code)

And the results of following this steps is that you will have a starting point to test your idea. Furthermore you can clone the sample-code repository and you have all above mentioned steps already done for you. So. one git-clone command and the whole environment is available. At this point the environment is done and the whole idea was to keep it very minimum for quick reuse.

Screenshot -Index.html

The html code is available in the repo and here are the screenshots of that simple html structure.

Other Screenshots

Here are some other screenshots, showing the folder structure and some code. Again, if you clone the repo, you have all this available to you.

Summary

So, this setup can now be reused for POC type cases. Let me know if you have some comments in this regard. Till next time, Happy Coding.

References

• https://github.com/jawadhasan/basic-frontend-starter
• https://hexquote.com/git-up-your-app/