DevOps / Build, Test, Deploy / JS Build Tools / JS Task Runners
Shared insights

I have got a small radio service running on Node.js. Front end is written with React and packed with Webpack . I use Docker for my #DeploymentWorkflow along with Docker Swarm and GitLab CI on a single Google Compute Engine instance, which is also a runner itself. Pretty unscalable decision but it works great for tiny projects. The project is available on https://fridgefm.com

11 upvotes102K views
Avatar of Scrayos
CEO at Scrayos UG (haftungsbeschr盲nkt)

For our internal team and collaboration panel we use Nuxt.js (with TypeScript that is transpiled into ES6), Webpack and npm. We enjoy the opinionated nature of Nuxt.js over vanilla Vue.js, as we would end up using all of the components Nuxt.js incorporates anyways and we can adhere to the conventions setup by the Nuxt.js project, which allows us to get better support in case we run into any dead ends. Webpack allows us to create reproducable builds and also debug our application with hot reloads, which greately increased the pace at which we are able to perform and test changes. We also incorporated a lot of testing (ESLint, Chai, Jasmine, Nightwatchjs) into our pipelines and can trigger those jobs through GitLab CI. All packages are fetched through npm, so that we can keep our git repositories slim and are notified of new updates aswell as reported security flaws.

6 upvotes49.8K views
Shared insights

Github Actions has been a breeze to work with. Github Actions offers a nice CI/CD service right inside the Github environment itself. It comes with tight integration with Github. Github Actions workflows are triggered based on a variety of events, such as: commit, pull request, comment...etc.

At Cereo, we serve our Webpack bundle from Amazon S3 and Amazon CloudFront. We're using Github Actions to build bundles, upload them to S3, and invalidate Cloudfront cache. Our codebase is a monorepo with multiple apps. Github Actions lets us check updates using paths so that we can limit executions. Sometimes a pull request still triggers multiple workflows, but we get to run them concurrently with Github Actions. In fact, Github Actions can run up to 20 concurrent jobs.

That being said, don't try to change your entire CI/CD solution in one afternoon. Github Actions is still new to the market. Start small and build your new shiny CI system up.

#CI #ContinuousIntegration #ContinuousDelivery

12 upvotes2 comments21.9K views
Philip Rossen
Philip Rossen
March 15th 2020 at 6:05PM


Tammy Chu
Tammy Chu
March 17th 2020 at 3:40AM


Avatar of zimoony
Senior Fullstack Developer at QUANTUSflow Software GmbH

Our whole Vue.js frontend stack (incl. SSR) consists of the following tools:

  • Nuxt.js consisting of Vue CLI, Vue Router, vuex, Webpack and Sass (Bundler for HTML5, CSS 3), Babel (Transpiler for JavaScript),
  • Vue Styleguidist as our style guide and pool of developed Vue.js components
  • Vuetify as Material Component Framework (for fast app development)
  • TypeScript as programming language
  • Apollo / GraphQL (incl. GraphiQL) for data access layer (https://apollo.vuejs.org/)
  • ESLint, TSLint and Prettier for coding style and code analyzes
  • Jest as testing framework
  • Google Fonts and Font Awesome for typography and icon toolkit
  • NativeScript-Vue for mobile development

The main reason we have chosen Vue.js over React and AngularJS is related to the following artifacts:

  • Empowered HTML. Vue.js has many similar approaches with Angular. This helps to optimize HTML blocks handling with the use of different components.
  • Detailed documentation. Vue.js has very good documentation which can fasten learning curve for developers.
  • Adaptability. It provides a rapid switching period from other frameworks. It has similarities with Angular and React in terms of design and architecture.
  • Awesome integration. Vue.js can be used for both building single-page applications and more difficult web interfaces of apps. Smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
  • Large scaling. Vue.js can help to develop pretty large reusable templates.
  • Tiny size. Vue.js weights around 20KB keeping its speed and flexibility. It allows reaching much better performance in comparison to other frameworks.
19 upvotes1 comment477.6K views
April 25th 2020 at 6:24AM

Thanks a lot for sharing.

Avatar of wevtimoteo
CTO at SourceLevel

I find myself struggling trying to use a specific minified CSS file under node_modules for Milligram in Phoenix Framework using Webpack. First I thought that I need to define a resolve entry in my webpack.config.js as described in css-loader docs.

Then, I've discovered that I can simply use this Webpack notation in my manifest file (app.scss):

@import '~milligram/dist/milligram.min';

As described in docs:

To import assets from a node_modules path (include resolve.modules) and for alias, prefix it with a ~

Note that if you have other Webpack loaders, it will expand your CSS file in development mode.

3 upvotes13.5K views