GithubHelp home page GithubHelp logo

starter-express's Introduction

Please Don't Use

Please use npm init remix instead of this starter repo to create a new Remix app. This repository was archived on April 29, 2021.

Remix Starter for Express

Welcome to Remix!

This is a starter repo for using Remix with Express.


After cloning the repo, rename .npmrc.example to .npmrc and insert the license key you get from logging in to your dashboard at

Note: if this is a public repo, you'll probably want to move the line with your key into ~/.npmrc to keep it private.

Then, install all dependencies using npm:

$ npm install

Your @remix-run/* dependencies will come from the Remix package registry.

Once everything is installed, start the app in development mode with the following command:

$ npm run dev

This will run a few processes concurrently that will dynamically rebuild as your source files change. To see your changes, refresh the browser.

Note: Hot module reloading is coming soon, which will allow you to see your changes without refreshing.


To run the app in production mode, you'll need to build it first.

$ npm run build
$ npm start

This will start a single HTTP server process that will serve the app from the files generated in the build step.


Detailed documentation for Remix is available at

Project Structure

All application source code is found in the app directory. This includes your application entry points for both server rendering (see app/entry.server.tsx) and the browser (see app/entry.client.tsx), as well as your root component and routes (see app/root.tsx and app/routes).

Everything in the public directory is served by express.static.

Don't want TypeScript?

The no-typescript branch is a version of this same starter template that uses plain JavaScript instead of TypeScript for all code in app.

starter-express's People


mjackson avatar ryanflorence avatar cdock1029 avatar flexbox avatar mdingena avatar


 avatar  avatar Alireza avatar M Haidar Hanif avatar Alexander avatar Ahmed Saleh avatar Eduardo Rabelo avatar Marcio Figueiredo | Tech Lead | Arch | DEV avatar yude avatar takagi avatar Ingwie Phoenix avatar  avatar Sudeep Deysarker avatar  avatar Abe Chen avatar Steven Cobb avatar Md Irshad avatar  avatar tosh shimayama (satake) avatar  avatar Edal_y avatar Tia Eastwood avatar Aron Nicholasson avatar Jens Meindertsma avatar oli avatar chencheng (云谦) avatar Anurag Goel avatar Nicolas Renon avatar Ruben Amorim avatar 汪東陽 avatar Michael Chacón avatar  avatar Guglielmo D'Anna avatar Yuriy Linnyk avatar Hao avatar Thomas Digby avatar Miles Sorce avatar Guido avatar Anthony Mineo avatar Ian Jones avatar Andrew Chinn avatar Satyendra singh avatar Rakshith Suvarna avatar  avatar Tony Mamedbekov avatar Nokri Mohammed avatar Lars Roettig avatar Artem Batura avatar Kyle Mo avatar ik5 avatar Phan Le Quang avatar Jonathan Palma avatar Tobias Timm avatar David GG avatar José M. Gulias Lugo avatar Luke Andersen avatar David East avatar Tim Meade avatar luka dodelia avatar Andrey Knupp Vital avatar Luke Herrington avatar Zaydek MG avatar Paranoid_K avatar Subhan Bakhtiyarov avatar Stephen Bowling avatar Jonathan Picazo avatar deelaks avatar Balqis Mughny Sasando avatar Sebastien Ballesteros avatar Luke Hedger avatar Nick Foden avatar Paulo Daher Filho avatar Dave Townsend avatar Richard Holland avatar Benjamin Bangsund avatar Patrick Smith avatar Benjamin avatar Mathieu Ledru avatar Andrzej Koper avatar MOISES SANABRIA avatar Paul Cailly avatar Manel Escuer avatar Guillaume Démésy avatar Stephen Richardson  avatar Toan Tran avatar 爱可可-爱生活 avatar David Sanderson avatar Sibelius Seraphini avatar Santosh Rai avatar Ayuth Mangmesap avatar  avatar Andres Chavez avatar Luis Miguel Alvarado avatar Jake Scott avatar Nader Dabit avatar Parsa Kafi avatar Devvrat avatar A-J Roos avatar John Johnson avatar Salvador López Mendoza avatar


Ryan Florence avatar Matt Farmer avatar James Cloos avatar Tim Meade avatar Cassidy Williams avatar A-J Roos avatar

starter-express's Issues

install fails

Received this error with initial repo installation. (node v10 & v12)

npm ERR! code E404
npm ERR! 404 Not Found - GET - Not found
npm ERR! 404
npm ERR! 404  '@remix-run/[email protected]' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'starter-express'

Data not loading or is cached

I'm trying to follow the example in the docs and it seems that team is not getting written to data-build/routes despite being present in the same places as the gist example. npm run dev doesn't seem to build the app correctly

Update: I manually added team.js to data-build/routes and got the Team component to render, however this does not solve the build issue

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.loader = void 0;
let loader = async () => {
    return fetch("");
exports.loader = loader;

[0.8.1] Importing in data loader causes data-build directory to have incorrect structure

I wanted to import some test JSON data.

// data/routes/cybermonday-blackfriday/index.ts
import type { Loader } from '@remix-run/data'
import * as data from '../../../json/test-items.json'

export const loader: Loader = () => {
  return data

As you can see, json directory is a sibling of data directory.

Running tsc -b now results in a data-build directory like:

├── data
│   ├── global.js
│   └── routes
│       ├── cybermonday-blackfriday
│       │   └── index.js
│       └── index.js
└── json
    └── test-items.json

4 directories, 4 files

Which causes some problems when launching Remix, as it's expecting a data-build/routes directory which is not there in this case.

Changing the data loader to

import type { Loader } from '@remix-run/data'
//import * as data from '../../../json/test-items.json'

export const loader: Loader = () => {
  return null

and rerunning tsc -b:

├── data
│   ├── global.js
│   └── routes
│       ├── cybermonday-blackfriday
│       │   └── index.js
│       └── index.js
├── global.js
├── json
│   └── test-items.json
└── routes
    ├── cybermonday-blackfriday
    │   └── index.js
    └── index.js

6 directories, 7 files

Which correctly outputs the data-build/routes directory but doesn't seem to clean up the previous build. Are we supposed to manually clean these up?

server.js -> server.ts

Most folks will want to write all their code in TypeScript. Especially if there's more going on than just configuring remix. In my case, I use HTTP mocks in dev mode and I want that code in TypeScript. I'd love it if remix could help me with this since it's compiling everything else for me. Just feels like a poor DX experience to have to do something extra to get this working when none of my other code needs extra tooling figured out.

Windows Issues

EDIT: node version 14.15.0

Scripts set NODE_ENV the unix way. Windows would be set NODE_ENV=developement. I THINK separating the env variable and concurrently bit with ; should work, but is failing for me.

To test I removed the NODE_ENV part and get the following when hitting localhost:3000

Cannot find module ./App.tsx


Build fails due to missing React import

VS Code already complains about the missing React imports in the modules and build fails due to the same issue.

 npm run build

> [email protected] build /home/main/projects/remix/starter-express
> remix build && tsc -b

Building Remix app for production...
app/App.tsx:7:6 - error TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

7     <html lang="en">

app/App.tsx:8:8 - error TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

8       <head>

pm2 script is broken

I cloned a new version of the starter-express, but when I go to run npm run dev I get the following error:

> [email protected] dev C:\Users\mikey\Websites\express_tester
> pm2-dev pm2.config.js

  Error: Script not found: C:\Users\mikey\Websites\express_tester\remix run
      at Object.Common.resolveAppAttributes (C:\Users\mikey\Websites\express_tester\node_modules\pm2\lib\Common.js:644:11)
      at C:\Users\mikey\Websites\express_tester\node_modules\pm2\lib\API.js:1132:35
      at C:\Users\mikey\Websites\express_tester\node_modules\async\internal\withoutIndex.js:8:40
      at replenish (C:\Users\mikey\Websites\express_tester\node_modules\async\internal\eachOfLimit.js:81:17)
      at C:\Users\mikey\Websites\express_tester\node_modules\async\internal\eachOfLimit.js:86:9
      at eachLimit (C:\Users\mikey\Websites\express_tester\node_modules\async\eachLimit.js:47:43)
      at awaitable (C:\Users\mikey\Websites\express_tester\node_modules\async\internal\awaitify.js:13:28)
      at startApps (C:\Users\mikey\Websites\express_tester\node_modules\pm2\lib\API.js:1116:7)
      at C:\Users\mikey\Websites\express_tester\node_modules\pm2\lib\API.js:1097:16
      at wrapper (C:\Users\mikey\Websites\express_tester\node_modules\async\internal\once.js:12:16)


Windows 10
Node v12.21.0
npm v6.14.11
Starter express version current as of 4th March 2021.
Remix v13.0
pm2 v4.5.4

Warning: Did not expect server HTML to contain a <script> in <html>.

After cloning, installing, and running this example repo I see the following in the console:

Warning: Did not expect server HTML to contain a <script> in <html>. Warning: Did not expect server HTML to contain a <script> in <html>. head html [email protected]://localhost:3000/build/root.js:11:26 RemixErrorBoundary [email protected]://localhost:3000/build/_shared/__remix-run/react-fd118932.js:528:14 [email protected]://localhost:3000/build/_shared/__remix-run/react-fd118932.js:690:27 [email protected]://localhost:3000/build/_shared/react-router-44425546.js:8:283 RemixErrorBoundary [email protected]://localhost:3000/build/_shared/__remix-run/react-fd118932.js:341:24 [email protected]://localhost:3000/build/_shared/__remix-run/react-fd118932.js:709:32

This does not occur if if I run npm run build and npm run start so it appears to be something to do with the development server.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.