Hiring front-end dev, how to split up app?

Wappler General
1

I’m hiring a front-end dev to help out.

I want him to write HTML and CSS.

However, my issue is, that my pages are all relying heavily on dynamic data.
And it’s using appconnect to show/hide things etc.

So I need the front-end dev to have access to this data…
I’m not sure how to approach this?

So far I’ve simply made a new folder where I copy pasted the rendered version of the page into html.
And I included the stylesheets and appconnect scripts:
image

This works partly…
But there’s more content, for example this overlay, which only shows when the user is logged out AND not opted in.

So this is again relying on data that I get from server connect.

image
image708×661 103 KB

There must be a simpler way to share part of the app with an external party so they can help develop?
Any ideas?

2

There are 2 easy ways, first is to just share the Server Connect code with the developer, if it is with NodeJS he can just run it locally. Secondly you could place sample data in JSON files, with the same structure as Server Connect would return and then let the developer work with that data.

1 Like
3

I really appreciate your help here.

I’ve spent many hours this weekend trying to get this to work.

It is NodeJS. The server connect is querying the database, so then I’d also have to let him run that I guess?

I don’t mind working with some sample data. But there’s more issues: for example the ‘onclick dmx event’ doesn’t show/hide certain content.

I did include the dmx javascript files, so I thought this should work.

I’ll DM you a link to the files, then you can easier check. Thanks in advance!

4

Solution

Credits to @patrick

Steps to get the page loading with all dmx functionalities (except the data)

  1. Saved the layout page as HTML
  2. Put the content page inside the body, where it’s normally included by EJS
  3. Removed all the pretending / from the src
  4. Removed 3rd party scripts that are not needed (FB, sentry, posthog in my case)
  5. Removed / replaced my other EJS code with static content
  6. Copy all the CSS and JS the page needs, this is how my folder looks like: image

Steps to get the data working

  1. Save the response of the request into a folder, for me: data/reading_page_static.json (this is json, you can find it using network tab in devtools)
  2. Server connect URL is set to this JSON file:
    image
    image1333×372 44.7 KB
  3. Run a a quick node server to fix the CORS error and load the data properlyimage

Alternative method

When you send him the full project, he can just run npm start and that will run the node server and the website is available at http://localhost:3000 . If you send him the fill project you could exclude the node_modules , .git and .wappler folder, he then has to do a npm install first to install the modules.

1 Like
5

An integrated static generator would do wonders here.

6

These are new words to me, can you link something?

7
8

Interesting! Thanks, will look into this

9

Sorry - but I gotta ask…

I’ve been back on this issue, hiring someone again and it’s again very hard to just share the code to put them to work.

You suggested Gatsby. I’ve scanned through the documentation multiple times but it doesn’t click in my head on how to use it in this case…

It seems like a completely different way to build the app? Using the gatsby cloud?

image
image786×524 39.4 KB

Could you maybe point me to the right direction? Could Gatsby automate the steps I had to do here? Hiring front-end dev, how to split up app?

10

It was just an example of what a SSG does and how it works. Not a suggestion to implement :slight_smile:

11

Okay I think I just need to invest more time in this.

I’m curious, how would you personally let someone else work on your project?

My biggest concerns when I share the whole project on github are:

  • They don’t have wappler, harder for them to work with it
  • They will have access to all environment variables which gives them access to the DB (privacy, security issues)
  • They can steal the project (not sure if that’s a real concern)
12

ENV variables shouldn’t be committed to git. They live in each environment. Not in source code.

Give him a new set of secrets that point to a cloned database that has no PII by using something like replibyte.

If you want to handle your secrets and ENV variables from a central location and provide user access to them you can use infisical

13

From my day to day job (larger enterprise and entertainment platforms):

  • Back- and front end(s) are separate projects with independent teams.
  • Backend / Platform development is done to a certain stage.
  • API’s who are not finished yet are mocked (“design by contract”).
  • BE is published to a accessible dev- or staging system.
  • FE Developer(s) (web / app) create their assets against this dev or stage system.

With smaller projects, e.g. smaller PHP based sites (Wordpress, Typo3, Laravel, …), the Frontend-Dev has the project locally running (LAMP/MAMP) and needs to update the backend from time to time from the Repo.

2 Likes
14

Thank you!

I can split up the ENV environments. And then I can invest time in setting up replibyte, because that also sounds perfect

image
image797×379 17.9 KB

Any other risks with sharing the entire project I might be overlooking?

Thanks for sharing! I don’t think this fits with our current size. Would take quite some time to set up and maintain these workflows I think.

1 Like