Making my own framework and using it as an upstream for projects

Question

I’m a freelancer making websites for clients. I have my own devstack based on React and Node. Currently, when I’m developing a new site, I just copy the last project that I’ve programmed and modify routes, pages and so on. When I add some new functionality (update webpack 1 to 2 and so on), I then have to do it manually at each project (or I don’t do it at all).

I’d like to have a more professional approach to this. Can you recommend me some materials or attitudes towards it?

My current goal is this: Have a repo (private github and after verification give it public) with my devstack (framework). Everytime I start a new project, I fork it (so that it stays as upstream origin) and start developing. Everytime I change some core functionality or add something that I want to have in other projects too, I want to push it somehow to the devstack repo. I could also copy this code to the devstack manually, but I don’t want to write it twice, so a better approach would help.

How can I do that, is my idea good? Basically, some recommendation if it makes sence at all and some link to an article would help me enough. Thank you.

Answer 1

"Everytime I change some core functionality or add something that I want to have in other projects too, I want to push it somehow to the devstack repo."

Pushing to a devstack repo (the original one you have forked for all your project) is a good first step, but it won't magically "propagate" that new feature to all your other repos.

However, you can take advantage of the triangular workflow:

• fork (see "Fork a Repo") the repo devstack (that is what you are doing already for your projects)

• clone that fork locally for a given project,

  git clone /url/my/fork myfork
  

• add as remote upstream the original repo

  cd myfork
  git remote add upstream /url/to/devstack
  

From there, with git 2.9 or more, configure:

git config --global pull.rebase true
git config --global rebase.autoStash true

Finally, each time you want to update one of your repo to benefit from a feature pushed to devstack:

cd /path/to/one/of/mine/projects
git checkout mybranch
git fetch upstream
git rebase upstream/master

Answer 2

There are multiple approaches to this and they all depend on how much of your scaffold code is reused, modified or thrown away.

If your code is very generic and allows customization without ever touching the scaffold code I would really recommend the last strategy here.

---

You could use a generator like yeoman. You could create your own template for yeoman and maintain the template. This way every time you create a new site the only thing you have to do is to invoke yo with your template, feed it a few options if necessary and you get things rolling.

---

When it comes to updating all your projects at once using an upstream VonC has given a good approach with forking.

---

If you want to avoid forking altogether and you are able to modularize your scaffold you can use git submodules.

With git submodules you can separate your "framework" code from your client's code. There are multiple strategies.

It depends much on your setup but one strategy would be to create a repository for each client with a predefined structure and add your scaffold as a submodule.

Have a look at this question concerning submodules and sub repositories.

---

Finally if your scaffold is very generic nothing prevents you from creating a module that will populate your project with the needed files and options.

In your project's package.json dependencies you can add:

"my-scaffold": "git+ssh://git@gitlab.com:user/repo.git#ref"

Then in your scaffold's package.json you could run you deployment script upon install:

"scripts": {
  "install" : "node tools/deploy.js"
}

And every time you build your project you could then check for the version currently deployed vs the version installed in your node_modules and rerun the deploy script to update the scripts you need in your project.

cheers!