Creating web apps is a lot a fun. As a 28-years-old web developper who learned a lot through the internet in his teenage years, I feel as if we lived through a massive evolution in the development process of web based applications. Switching between so many different libraries, frameworks and tools, the culmination of my years of learning brought me to FullStacked: a new way to help with this non-stop growing domain of work. I started to develop a lean and efficient tool that allows to skip the redundant task of setting up a full stack typescript (javascript) web app project. Here’s the story that led me to it.
Discovering the internet
My first steps in the world of javascript were with jQuery back in 2009 when I was 14–15 years old. I copy/pasted chunks of code from Stack Overflow and W3Schools without knowing too much what I was doing. All I wanted was to have cool animations in my menu. Around a year later, I got into Angular 1 (AngularJS). I quickly understood that the development of websites was about to become something much more logical than the simple markup that allow HTML and CSS. At that time, I didn’t have any proper knowledge on programming and I found Angular quite complex. When I tried Angular 2, I completely abandoned ship. Bootstrap-jQuery-Sass were my main working tools for quite some time.
Frontend revolution
I was a bit late to the party when I first heard about React. I was just starting to understand the concept of for-loops while the purpose of NodeJS and npm was still unclear to me. I was using it for the pre-processing of certain things like Pug and Sass, but to transpile a sugared version of javascript to a more common javascript that could be executed by web browsers was a concept that I found far-fetched and very difficult to cope with. However, React was spreading very fast. From one one day to another, everyone seemed to have hoped on the train and since it was developed by Facebook, I came to the conclusion that it was a must to learn. So I started my apprenticeship. My research and testing quickly led me to webpack and all the npm install webpack-plugin-you-need-or-else-nothing-works that follows. Not only that, you also needed to figure out how to configure these plugins and declare unknown Babel presets in the config files! After multiple trial and error, once I managed to have a working webpack.config.js, the development was a charm. That day, I really fell in love with React and the concept of programming logically/components-wise a website.
Deploying a web app
On the other hand, up until this point, all I had touched on was frontend development. There was still the question of how to deploy these beautiful interfaces to the internet? It really left a weird feeling to develop in such a technologically advanced environment only to end up having to FTP the output files to an Apache hosting server like it was still 1999. Along with the rise of Rest APIs, I started to look for a way to host/deploy a web app to the internet. I quickly realized that it was doable with pretty much any common programming language. Not only PHP! And even more, it was possible with NodeJS, the same language in which I was starting to be fluent. That day, I discovered express. From that moment, I started to take an interest in backend development as well. I was starting to develop full stack projects and I gained more and more freedom in the same way that I was becoming more and more skilled with javascript and npm.
I hit a wall the day I wanted to deploy my awesome full stack javascript application. Was I supposed to FTP all the node_modules? I came across Heroku’s site and I figured out how to get my app to work on the web without really understanding what was going on behind the scene. I used the services of Heroku for a little while. Their free tier was doing the job for my few projects. I then kept the status quo for a couple of months. I was seeing a lot of new projects pop out here and there while others continued to praise vanillajs.
Getting comfortable
On my side, I still loved React with express. I used create-react-app a couple of times, but it was to bloated in my opinion and to setup a development environment was always a challenge:
Frontend listens at : http://localhost:8080
Backend listens at : http://localhost:8000
var apiBaseURL= "/api"
if(window.origin === localhost:8080)
apiBaseURL = "http://localhost:8000/api";Throws error because of Cross-Origin Resource Sharing (CORS)
if(process.env.NODE_ENV === "development")
app.use(cors());So I started to create my own little library of starters for all the different types of projects. Everything was working a bit more smoothly. At some point, while working at DeepSight as a frontend dev, my C++ colleague strongly recommended that I look into typescript for the sake of collaboration and organization. At this point in my life, I have had classes in which I used typed languages, so I didn’t have much learning to do here. It actually didn’t take me long to realize how typescript is essential for any project that will eventually scale.
A new day, a new toolset
One morning, that same colleague of mine showed me this new up-and-coming transpiler/bundler which once again completely changed my whole toolset: esbuild. My experimentation with esbuild was the initial spark for FullStacked. We now have a tool that allows you to bundle an application and all its dependencies into a single file. Not only the frontend, but also the backend! I had read online that some people were already bundling their backend with webpack, but since it was designed for browsers, it made no sense to me to bundle a backend with webpack.
Endgame
All of this led to the stage where it is now possible to transform an ultra complex application, including the server side and the client side, into a few files ready for deployment! So easy! Well almost. The fact remains that it still takes a lot of trial and error and configuration for the magic to happen. My intention with this new project is to save developers a whole lot of trouble and help get their apps to work the way they expect. I want to make full stack application development and deployment quick and easy, because I realized that all I ever really wanted was to get this weird mix of HTML and JS to work in my browser.
As stated, the project is called FullStacked. It’s an open source tool that allows to rapidly start developing all the way to deploying full stack applications with typescript. Simple and straightforward, it uses some of the most common and reliable libraries (like React and express) and with esbuild, it bundles everything in record time. Tools like building with code splitting, watchers for frontend and backend, testing with code coverage¹ and deployment scripts¹ are all built-in tools that you won’t need to waste a second to setup or configure.
Summed up, it replaces :
npm i react react-dom @types/react @types/react-dom webpack webpack-html-plugin copy-webpack-plugin express @types/express morgan mocha nyc ...with
npm i fullstacked¹work in progress
For more info on FullStacked follow these links :
Website: https://fullstacked.org/
Github: https://github.com/CPLepage/fullstacked
npmjs: https://www.npmjs.com/package/fullstacked
Patreon: https://www.patreon.com/fullstacked
I hope you could relate and see yourself through the story, leave me a response if you also had a tumultuous but stimulating journey!
Thanks for reading!
Timeline Details
Dates used are whether the first official public release or the date of the first published npm package I could find.
Projects per appearance:
jQuery: https://jquery.com/
SASS: https://sass-lang.com/
NodeJS: https://nodejs.org/
CoffeeScript: https://coffeescript.org/
npm: https://www.npmjs.com/
Backbone.js: https://backbonejs.org/
Angular: https://angularjs.org/ or https://angular.io/
Express: https://expressjs.com/
Pug: https://pugjs.org/
Bootstrap: https://getbootstrap.com/
Mocha: https://mochajs.org/
Ember.js: https://emberjs.com/
Meteor: https://www.meteor.com/
Bower: https://bower.io/
TypeScript: https://www.typescriptlang.org/
React: https://reactjs.org/
ESLint: https://eslint.org/
gulp.js: https://gulpjs.com/
Vue.js: https://vuejs.org/
webpack: https://webpack.js.org/
Babel: https://babeljs.io/
rollup.js: https://rollupjs.org/
Redux: https://redux.js.org/
GraphQL: https://graphql.org/
Grunt: https://gruntjs.com/
yarn: https://yarnpkg.com/
styled-components: https://styled-components.com/
Svelte: https://svelte.dev/
Prettier: https://prettier.io/
NestJS: https://nestjs.com/
Gatsby: https://www.gatsbyjs.com/
Fastify: https://www.fastify.io/
Parcel: https://parceljs.org/
esbuild: https://esbuild.github.io/
FullStacked: https://fullstacked.org/
