I teach digital design in a classroom that has no connection to the internet at a State Penitentiary. I would like to use FCC in my classroom so that students can go through the coursework.
I successfully built the Site from the github repository and confirm that it works offline on my laptop, but I’d like to use it on my classroom’s server so that student workstations can each access the coursework concurrently.
Can this be achieved? Can anyone point me in the right direction for detailed instructions on how to do so?
Awesome that you try to do this for the prison inmates.
Do you have a network admin?
In the end you can simply run this on your server (maybe in some isolated environment like a docker container) and make it available on the internal network over an internal IP.
We have had received several requests over the years to facilitate an offline/classroom mode of the whole stack.
I will go ahead and set some expectations. This is something we will not be supporting out of the box anytime soon, due the limited bandwidth we have as a small tiny non-profit.
That said, Yes - its technically possible but it is going to be involving at the same time.
If you are willing to fork the repository and make tweaks, it should be doable. You would be needing some networking knowledge and understanding of Node.js ecosystem to a certain degree.
If you are stuck, this community forum and StackOverflow are your best friends with generic queries about the same.
With that out of the way, let me explain how our stack ties together. Broadly speaking, we have three main services:
A react app (built with Gatsby) which is the client application.
A Node.js app (Loopback 3 + Express) which serves the API and does data handling.
A MongoDB Database server.
Firstly, you need to get the networking done, before investing in “classroom” features. Follow these steps:
Start the server in the local development mode with the commands from the guide.
Expose the ports 3000 and 8000 over your network.
I believe this should be doable with ufw given your use case and assuming the machine is on a local network running Ubuntu etc.
Verify that this is working.
Right now, all you are ensuring is that the local server is up and running and is accessible from the network.
Next automate this a little bit, because as is the setup you have so far is a bit ephemeral in the sense if the server dies, you have to start all over again.
So, next steps would be to ensure the DB, the API and the client are running as services. This means you no longer will use the local development setup or the commands.
For MongoDB, follow the official documentation for running it as a service. A docker based deployment is going to playout the best.
You can ignore the need for google-credentials, it’s something that we need on production and is automatically ignored in local/dev setups.
You can also use any branch of your choice instead of what is mentioned there. This will be needed later when we discuss authentication.
Finally instead of the production-start.js you would use the development-start.js with PM2. Also, while you are doing this use whatever name you want for the application set in the --name flag.
When it comes to the client app:
I recommed serving it off either with Gatsby using the gatsby serve command in their docs setting the port to 8000.
Or
Use something like vercel/serve, that we use for our own production deployments. Here is the configuration file if you are interested in using that over Gatsby which we recommend for a better experience.
I will let you figure out the whole PM2 setup for this, because ours is a bit convoluted but you can look it up in the same devops guide as mentioned previously.
Next challenge, and probably the most difficult one because it involves changing code is going to be the authentication and managing multiple users.
We use OAuth 2.0 implemented with the Passport.js middleware and have two providers at the minute. When working locally we use a mock authentication provider (which basically is a single user - no auth page - workflow) and on production we use Auth0 as our auth provider.
We also already have an entry for the standard username/password strategy here:
But this is not used in on the API side.
Some pointers for you to figure this out yourself would be to look at the implementations:
and
You would be needing to implement a “view” to capture a username and a password form as well should you use the local strategy.
I hope this helps, and this is the best we can do to help at this time.
Just a quick follow up. We have deployed FCC on many offline student laptops. We have found that doing a ‘npm run build’ from the client directory then launching every tine with ‘npm start’ from the root directory works best. launches in minutes instead of an hour and change.
Running in development mode was prohibitively slow.
Now we have many excited students just blitzing through the course material.
The bigger question is if we can make a bridge to the online version so that they can somehow import their progress at a later date once they have access to the internet on release and thus allow them to get certifications without redoing all the work.
For all progress to be ‘bridged’, manual alteration of the database (fCC) would be needed, assuming you have access to all of the user data for each Camper. This is not something I would expect to be done.
To reiterate from the other thread about this: Provided the Campers have access to their project code, and can upload this to a publicly visible host, the links can just be resubmitted for each of the superblocks’ 5 projects - allowing the certifications to be claimed.
