Build Process for Javascript Projects

25 Apr 2024

Compiling and deploying a modern JS project can be a long-winded process but it need not be.

This tutorial will help you to create a streamlined build process.

First, create a project on Github. Let's call it helloworld.

We will be developing our project locally using VS code.

Open VS code and clone our helloworld repository:

Within VS code, open a new terminal and let's create a vuetify app.

Accept most of the defaults, although I prefer NPM to Yarn for some reason.

The setup process will create a new folder called helloworld. We're going to want to move the contents of that folder into the root. This feels like an unneccessary step but here we are:

# cd helloworld
# mv * ../
# cd ..
# rm helloworld

We can run our test project as follows.

# npm run dev

When we're ready we can create a commit.

Then push the changes.

Quick and dirty (don't do this)

If you just want to create a build of your app, run the following from terminal

npm run build

This will compile your app and create a dist folder which you can then upload to your site.

Create a workflow instead

We can avoid these manual steps by uploading a workflow script to Github.

Add your site to ServerWand if you haven't already done so.

Then generate a deployment URL from the App tab and copy the URL.

Go to the helloworld repostory in Github, then settings -> Secrets and variables -> Actions -> New repository secret

.Give it the name DEPLOY_URL

The secret is the Deployment URL we copied previously:

We now need to create our build script.

Go into VScode and place the build.yml file in: .github/workflows/build.yml

Create a commit. We will need Github desktop to push this commit as VS code lacks the neccessary permissions.

Once synced our Github repo should now have a workflow ready to be run:

In order to run the workflow we must push another commit to our repository. Any commit will do.

This should trigger the workflow:

If all is successful we will have a new build pushed to our website and any updates will also trigger a new build.

Redirect all traffic to the index.html

We will likely want to route all website urls to our apps index page otherwise the subpages will generate a 404 error upon refresh.

We can do this by uploading a htaccess file to the website directory. We should put it above the public folder so it is not overwritten by the new builds.

Navigate to the website folder in ServerWand

Upload this htaccess file.

All done!